CSS 기본 스타일링 팁: 글꼴, 색상, 여백 설정하기

HTML로 웹페이지의 구조를 만들었다면, 이제는 그 구조에 멋을 입힐 차례입니다.
웹사이트의 첫인상을 좌우하는 요소는 바로 **디자인(스타일)**이며, 이 디자인을 구현하는 핵심 도구가 **CSS(Cascading Style Sheets)**입니다.

이번 글에서는 웹 스타일링에서 가장 기본이 되는 ‘글꼴(Font)’, 색상(Color), 여백(Margin/Padding)’ 설정 방법을 CSS 코드 예제와 함께 쉽고 명확하게 설명합니다.
비전공자 및 입문자도 따라할 수 있는 실용적인 스타일링 팁으로 구성했습니다.

1. 글꼴(Font) 설정하기

웹사이트의 텍스트 분위기를 결정하는 핵심 요소가 바로 **글꼴(Font)**입니다.

✅ 기본 문법:

selector { font-family: 글꼴1, 글꼴2, 기본글꼴; }

✅ 예시:

body { font-family: 'Noto Sans KR', Arial, sans-serif; }

'Noto Sans KR': 첫 번째로 적용할 글꼴 (사용자 PC에 설치되어 있어야 함)
Arial: 대체 글꼴
sans-serif: 브라우저 기본 글꼴

Tip: 웹에서 자주 쓰이는 무료 글꼴은 Google Fonts에서 쉽게 가져올 수 있습니다.

✅ 글자 크기 및 굵기 설정:

h1 { font-size: 32px; font-weight: bold; }

font-size: 글자 크기
font-weight: normal, bold, 100~900 숫자값 가능

2. 색상(Color) 설정하기

색상은 웹페이지의 분위기를 좌우합니다.
CSS에서는 다양한 방식으로 색상을 지정할 수 있습니다.

✅ 색상 지정 방법:

/* 색상 이름 */ p { color: blue; } /* 16진수 코드 */ h1 { color: #ff5733; } /* RGB 방식 */ span { color: rgb(255, 100, 100); }

color: 글자 색
background-color: 배경 색

✅ 배경색 설정 예시:

body { background-color: #f9f9f9; }

Tip: 배경색은 body에 설정하면 전체 분위기를 손쉽게 바꿀 수 있습니다.

3. 여백(Margin & Padding) 조절하기

여백은 콘텐츠 간의 간격을 조절하여 가독성과 정돈된 레이아웃을 만듭니다.

✅ 개념 정리:

margin: 요소 바깥쪽 여백 (요소와 요소 사이 거리)
padding: 요소 안쪽 여백 (테두리와 내용 사이 거리)

✅ 기본 예시:

h1 { margin: 30px 0; padding: 10px; }

margin: 위 아래 30px, 좌우 0px
padding: 네 방향 모두 10px

✅ 방향별 여백 지정:

div { margin-top: 20px; margin-bottom: 10px; padding-left: 15px; padding-right: 15px; }

✅ 단축 속성 사용:

/* 순서: 위, 오른쪽, 아래, 왼쪽 */ p { margin: 10px 20px 15px 5px; }

💡 실전 예제: 스타일 적용하기

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>스타일링 연습</title> <style> body { font-family: 'Noto Sans KR', sans-serif; background-color: #f0f0f0; padding: 40px; } h1 { color: #2c3e50; font-size: 36px; margin-bottom: 20px; } p { font-size: 18px; color: #555; line-height: 1.6; margin-bottom: 30px; } </style> </head> <body> <h1>나만의 첫 스타일링</h1> <p>이 문단은 CSS로 스타일이 적용된 예시입니다. 글꼴, 색상, 여백이 모두 설정되어 있습니다.</p> </body> </html>

마무리: 스타일링 기초를 익히면 디자인이 쉬워진다

CSS의 font, color, margin, padding 속성은 웹 디자인에서 가장 많이 사용되는 필수 속성입니다.
이 네 가지 속성만 자유롭게 다룰 수 있어도, 대부분의 기본 레이아웃을 구현할 수 있습니다.

특히 비전공자나 코딩 초보자는 기능보다 먼저 눈에 보이는 결과를 통해 배우는 것이 중요합니다.
오늘 배운 스타일 속성들을 바탕으로 자신만의 소개 페이지나 블로그 레이아웃을 꾸며보세요.
작은 변화들이 쌓이면, 자연스럽게 실력이 늘어납니다.

저작자표시 비영리 변경금지 (새창열림)

info521 님의 블로그