[HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기

웹디자인의 핵심은 ‘정보를 보기 좋게 전달하는 것’이에요.
즉, 단순히 예쁜 게 아니라 읽기 쉽고 집중할 수 있는 화면을 만드는 거죠.

그 기본은 바로 색상, 글꼴, 여백입니다.
이 세 가지를 잘 다루면, CSS의 70%는 이미 이해한 거예요.

[HTML 시리즈 11-2 ] CSS와 HTML의 만남 — 디자인 입히기 시작

와 의 차이)" data-og-description="지금까지 HTML의 여러 태그를 배웠지만,사실 모든 HTML 문서는 하나의 큰 틀로 시작합니다.그 틀은 바로 이 구조예요 DOCTYPE html>html> head> ... head> body> ... body>html> 이 구조

ilsandaddy.tistory.com

[HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작

지금까지 만든 HTML 페이지는 구조적으로는 완벽했지만,어딘가 밋밋했죠?이유는 바로 “디자인”이 빠져 있었기 때문이에요.HTML이 웹페이지의 뼈대라면,CSS(Cascading Style Sheets)는 그 뼈대에 색과

ilsandaddy.tistory.com

1. 색상 (Color)

CSS에서 색상을 지정하는 방법은 여러 가지가 있습니다.

색상 이름	color: red;	기본 색상 이름 사용
16진수 코드	color: #ff0000;	웹표준 색상 코드 (가장 많이 사용됨)
RGB 코드	color: rgb(255, 0, 0);	빨강, 초록, 파랑 값으로 지정
RGBA 코드	color: rgba(255, 0, 0, 0.7);	투명도 포함 (0~1)

예시:

<body>

<p style="color: #0066cc;">파란 글씨입니다.</p>

<p style="background-color: rgba(255, 200, 0, 0.3);">연한 노란 배경입니다.</p>

</body>

background-color 속성을 쓰면 배경색을 바꿀 수도 있습니다.
투명도를 조절하면 레이어 효과를 낼 수 있죠.

2. 글꼴 (Font)

글꼴은 웹의 분위기를 결정하는 중요한 요소입니다.
폰트 크기, 두께, 정렬만 바꿔도 전혀 다른 느낌을 줄 수 있어요.

주요 속성

font-family	글꼴 지정	"Noto Sans KR", sans-serif
font-size	글자 크기	16px, 1.2em, large
font-weight	두께	normal, bold, 700
font-style	기울임	italic
text-align	정렬	left, center, right
line-height	줄 간격	1.6, 30px

예시:

<body>

글자 크기와 줄 간격을 조절하면 훨씬 읽기 편해집니다.

</p>

</body>

폰트 선택 순서는 왼쪽부터 우선 적용됩니다.
예를 들어 "맑은 고딕"이 없는 컴퓨터에서는 sans-serif가 자동 적용됩니다.

3. 여백 (Margin & Padding)

HTML 요소는 눈에 보이지 않는 박스(box) 구조로 되어 있습니다.
그 박스의 안쪽과 바깥쪽 여백을 조절하는 게 바로 padding과 margin이에요.

margin	요소 바깥의 여백	요소와 요소 사이
padding	요소 안쪽의 여백	텍스트와 테두리 사이

예시:

<body>

안쪽 여백 20px, 바깥 여백 30px이 적용된 박스입니다.

</div>

</body>

패딩(padding) 은 콘텐츠와 테두리 사이의 간격,
마진(margin) 은 박스끼리 떨어지는 거리입니다.
이 둘을 적절히 조절하면 레이아웃이 훨씬 깔끔해집니다.

4. 테두리 (Border)

요소의 외곽선을 그려주는 속성입니다.
모양, 두께, 색상을 조합해 다양하게 꾸밀 수 있어요.

border	1px solid #333;	전체 테두리 (가장 기본형)
border-radius	10px;	모서리 둥글게
border-top	2px dashed red;	위쪽 테두리만
border-bottom	3px dotted blue;	아래쪽 테두리만

예시:

<body>

둥근 테두리가 적용된 문단입니다.

</p>

</body>

border-radius는 버튼, 카드, 이미지 등

부드러운 디자인을 만들 때 필수 속성이에요.

5. 종합 실습 — 나만의 미니 카드 만들기

지금까지 배운 색상 + 글꼴 + 여백 + 테두리를 조합해
예쁜 “명함 스타일 카드”를 만들어 봅시다

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: #f4f6f8;

font-family: "Noto Sans KR", sans-serif;

}

.card {

background-color: #fff;

border: 2px solid #ddd;

border-radius: 10px;

width: 300px;

margin: 50px auto;

padding: 20px;

box-shadow: 3px 3px 10px rgba(0,0,0,0.1);

}

.card h2 {

color: #3333cc;

text-align: center;

}

.card p {

color: #555;

font-size: 15px;

line-height: 1.8;

}

.highlight {

color: tomato;

font-weight: bold;

}

</style>

</head>

<body>

<h2>홍길동

의 웹카드</h2>

<p>안녕하세요! 저는 <span class="highlight">웹 개발자</span>를 꿈꾸는 학생입니다.</p>

<p>HTML과 CSS를 배우며 <span class="highlight">프론트엔드 디자인</span>을 공부하고 있어요.</p>

</div>

</body>

</html>

결과

흰색 카드가 중앙에 떠 있고,
부드러운 그림자와 둥근 모서리로 고급스러운 느낌,
강조된 부분만 색이 바뀌며 시각적 집중도가 높습니다.

6. 정리 — 스타일링의 핵심 4요소

색상(Color)	텍스트/배경의 감정 표현	color, background-color
글꼴(Font)	분위기와 가독성 결정	font-family, font-size
여백(Space)	레이아웃의 숨 쉬는 공간	margin, padding
테두리(Border)	구조 구분과 디자인 완성	border, border-radius

이 네 가지만 제대로 써도
기초 웹페이지는 충분히 “예쁜 디자인”으로 완성됩니다.

7. 마무리 — 디자인은 디테일에서 시작된다

이제 여러분은 HTML과 CSS의 가장 기본적인 디자인 능력을 갖췄어요.
앞으로 배울 flexbox, grid, animation 같은 기술은
이 기초 위에서 더 아름답고 정교한 페이지를 만드는 도구가 될 거예요.

오늘 배운 걸 한 문장으로 정리하자면

“HTML은 내용, CSS는 감정이다.”

2025.10.23 - [CODING] - [HTML 시리즈 10] HTML 문서 구조 분석 (와의 차이)

[HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이)

지금까지 HTML의 여러 태그를 배웠지만,사실 모든 HTML 문서는 하나의 큰 틀로 시작합니다.그 틀은 바로 이 구조예요 DOCTYPE html>html> head> ... head> body> ... body>html> 이 구조를 이해하지 못하면, HTML 코

ilsandaddy.tistory.com

저작자표시 비영리 (새창열림)

'CODING' 카테고리의 다른 글

React 와 Next.js 에 대하여 (0)	2026.02.22
[HTML 시리즈 11-2 ] CSS와 HTML의 만남 — 디자인 입히기 시작 (0)	2025.11.04
[HTML 시리즈 11-1] CSS와 HTML의 만남 — 디자인 입히기 시작 (0)	2025.10.31
[HTML 시리즈 10] HTML 문서 구조 분석 (<head>와 <body>의 차이) (0)	2025.10.23
[HTML 시리즈 9] <div>와 <span>의 차이 완벽 이해 (0)	2025.10.22

빅뉴스

[HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기

1. 색상 (Color)

2. 글꼴 (Font)

주요 속성

3. 여백 (Margin & Padding)

4. 테두리 (Border)

5. 종합 실습 — 나만의 미니 카드 만들기

6. 정리 — 스타일링의 핵심 4요소

7. 마무리 — 디자인은 디테일에서 시작된다

'CODING' 카테고리의 다른 글

티스토리툴바

[HTML 시리즈 12] 색상, 글꼴, 여백 스타일링 기본기

1. 색상 (Color)

2. 글꼴 (Font)

주요 속성

3. 여백 (Margin & Padding)

4. 테두리 (Border)

5. 종합 실습 — 나만의 미니 카드 만들기

6. 정리 — 스타일링의 핵심 4요소

7. 마무리 — 디자인은 디테일에서 시작된다

'CODING' 카테고리의 다른 글

관련글

티스토리툴바