같은 글자, 다른 폰트#
"안녕하세요"라는 텍스트도 폰트에 따라 완전히 다른 느낌을 줍니다. 고딕체는 깔끔하고 현대적인 느낌, 명조체는 고급스럽고 전통적인 느낌, 손글씨체는 친근하고 개성 있는 느낌을 냅니다.
웹에서 폰트를 다루는 방법을 배워봅시다.
폰트 설정 — font-family#
CSS
body {
font-family: 'Noto Sans KR', sans-serif;
}
h1 {
font-family: 'Georgia', serif;
}
code {
font-family: 'Courier New', monospace;
}여러 개를 콤마로 나열하면 왼쪽부터 차례로 시도합니다. 첫 번째 폰트가 없으면 두 번째, 없으면 세 번째… 마지막엔 폰트 종류(serif, sans-serif, monospace) 중 하나를 지정합니다.
| 폰트 계열 | 특징 | 예시 |
|---|---|---|
sans-serif | 획 끝이 깔끔 (고딕) | 나눔고딕, Arial |
serif | 획 끝에 장식(세리프) (명조) | Georgia, Times |
monospace | 모든 글자 너비 동일 | Courier, Consolas |
cursive | 손글씨 느낌 |
글꼴 크기 — font-size#
CSS
h1 { font-size: 36px; }
h2 { font-size: 28px; }
p { font-size: 16px; }
small { font-size: 12px; }단위:
px(픽셀): 고정 크기. 가장 직관적.rem: 루트 요소(html) 기준 배수.1rem= 보통 16px. 반응형에 유리.em: 부모 요소 기준 배수.%: 부모 요소의 퍼센트.
처음에는 px로 연습하고, 나중에 rem으로 전환하면 됩니다.
글꼴 굵기 — font-weight#
CSS
p { font-weight: normal; } /* = 400 */
h2 { font-weight: bold; } /* = 700 */
.thin { font-weight: 300; }
.black { font-weight: 900; }100, 200, ..., 900까지 100 단위로 설정 가능합니다. 폰트에 따라 지원하는 굵기가 다릅니다.
줄 간격 — line-height#
CSS
p {
font-size: 16px;
line-height: 1.6; /* 글자 크기의 1.6배 = 25.6px */
}숫자만 쓰면 현재 글자 크기의 배수가 됩니다. 본문 텍스트는 1.5~1.8 정도가 읽기 편합니다.
텍스트 정렬 — text-align#
CSS
h1 { text-align: center; }
p { text-align: left; } /* 기본값 */
.price { text-align: right; }텍스트 장식 — text-decoration#
CSS
a {
text-decoration: none; /* 밑줄 제거 */
}
.underline {
text-decoration: underline; /* 밑줄 */
}
.line-through {
text-decoration: line-through; /* 취소선 */
}대소문자 변환 — text-transform#
CSS
.uppercase { text-transform: uppercase; } /* 전부 대문자 */
.capitalize { text-transform: capitalize; } /* 첫 글자만 대문자 */
.lowercase { text-transform: lowercase; } /* 전부 소문자 */글자 간격 — letter-spacing#
CSS
h1 { letter-spacing: 2px; } /* 글자 사이 간격 넓힘 */
.tight { letter-spacing: -1px; } /* 글자 사이 간격 좁힘 */구글 폰트 무료로 적용하기#
기본 시스템 폰트 외에 다양한 폰트를 무료로 쓸 수 있습니다.
- fonts.google.com(새 창) 접속
- 원하는 폰트 검색 (한국어 폰트: Noto Sans KR, Black Han Sans, Jua 추천)
- 폰트 선택 → "Get font" → "Get embed code"
<link>코드를 HTML<head>에 붙여넣기- CSS에서
font-family로 사용
HTML
<!-- head에 추가 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">CSS
/* CSS에서 사용 */
body {
font-family: 'Noto Sans KR', sans-serif;
}실전 타이포그래피 예시#
읽기 좋은 텍스트 스타일:
CSS
body {
font-family: 'Noto Sans KR', -apple-system, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333333;
}
h1 {
font-size: 2.5rem; /* 40px */
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
}
h2 {
font-size: 1.75rem; /* 28px */
font-weight: 700;
}
p {
font-size: 1rem; /* 16px */
line-height: 1.8;
margin-bottom: 1em;
}
a {
color: #0070f3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}직접 해보기 ✏️#
- fonts.google.com(새 창) 에서 마음에 드는 한국어 폰트를 찾아 소개 페이지에 적용하세요.
h1,h2,p의font-size와line-height를 조절해 읽기 편한 타이포그래피를 만들어 보세요.- 링크(
a)의 밑줄을 제거하고, 마우스 오버 시 밑줄이 생기도록 설정하세요.
정리#
| 속성 | 용도 |
|---|---|
font-family | 폰트 종류 |
font-size | 글자 크기 |
font-weight | 글자 굵기 |
line-height | 줄 간격 |
text-align | 텍스트 정렬 |
text-decoration | 밑줄·취소선 등 |
letter-spacing | 글자 간격 |
다음 편에서는 CSS의 핵심 개념 중 하나인 박스 모델 (margin, padding, border)을 배웁니다.
