CSS 기초(6) font

CSS font 핵심 정리

1. font-family → 글꼴 종류
2. font-size → 글자 크기
3. font-weight → 두께
4. font-style → 기울임
5. line-height → 줄 간격
6. letter-spacing → 자간
7. text-transform → 대소문자 변환

---

1. font-family (글꼴 종류)

p {font-family: Arial;}

​

✅ 여러 개 쓰는 이유 = 앞 글꼴이 없을 경우 대비

font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif;

​

✅ 기본 글꼴 분류

• serif → 명조 계열 (끝에 장식 있음)
• sans-serif → 고딕 계열 (웹에서 가장 많이 씀)
• monospace → 고정폭 (코딩용)

​

font-family: sans-serif;

​

2. font-size (글자 크기)

font-size: 16px;

​

단위

• px → 가장 많이 사용
• em / rem → 반응형에서 사용
• %

포토샵 자간	em
1000	1em
10	0.1em
0	0

3. font-weight (글자 두께)

font-weight: 400; * 보통 *

font-weight: 700; * 굵게 *

font-weight: bold; * 굵게 (700과 동일) *

값	의미
100	매우 얇음
400	기본
700	bold
900	매우 굵음

폰트가 해당 두께를 지원해야만 적용됨!

​

4. font-style (기울임)

font-style: normal;

font-style: italic;

​

5. line-height (줄 간격)

line-height: 1.5;

line-height: 24px;

​

✔ 보통 1.4 ~ 1.8이 가장 읽기 편함

✔ 줄 간격은 숫자만 쓰는 게 가장 안정적

행간 배수로

​

6. letter-spacing (글자 사이 간격)

letter-spacing: 1px;

letter-spacing: -0.5px;

• 값이 커질수록 글자 사이 멀어짐
• 음수도 가능!

​

7.text-transform (대소문자 변환)

text-transform: uppercase; * 전부 대문자 *

text-transform: lowercase; * 전부 소문자 *

text-transform: capitalize; * 첫 글자만 대문자 *

​

​

​

font 단축 속성 (한 줄에)

font: italic bold 16px/1.6 "Pretendard", sans-serif;

​

순서

font-style → font-weight → font-size / line-height → font-family

​

​

​

웹폰트 사용 (실무 필수)

가장 많이 쓰는 방법 = Google Fonts

• Google Fonts에서 폰트 선택
• <link>로 HTML에 연결
• CSS에서 font-family 사용

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

​

body {

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

}

​

​

​

​

자주 나오는 실수 TOP 3

1️⃣ font-weight 적용 안 됨

→ 폰트 파일이 해당 두께를 지원 안 함

2️⃣ line-height 너무 작음

→ 글이 답답해 보임

3️⃣ font-family 하나만 씀

→ 다른 기기에서 깨질 수 있음