CSS font-size 속성이란?
CSS의 font-size 속성은 웹 문서에서 글꼴(텍스트)의 크기를 지정할 때 사용하는 핵심 속성입니다. 값은 백분율(%)뿐만 아니라 픽셀(px), 센티미터(cm), 포인트(pt), em 등 다양한 단위로 지정할 수 있으며, smaller, larger 같은 절대 키워드도 사용 가능합니다.
특히 상대값(em, %, rem 등)을 활용하면 사용자가 브라우저 설정으로 글자 크기를 조절할 수 있어 접근성(accessibility)이 크게 향상됩니다.
- 기본값: 16px (12pt)
- 상속 여부: 부모 요소로부터 상속됨
- 권장 방식: 반응형·접근성을 고려해 em, rem, % 같은 상대 단위 사용
주요 단위와 키워드를 간단히 정리하면 다음과 같습니다.
| 단위 / 키워드 | 설명 |
|---|---|
| px | 화소 기준의 고정 크기 |
| em | 부모 요소 글꼴 크기를 기준으로 한 배수 |
| rem | 최상위(root) 요소 글꼴 크기를 기준으로 한 배수 |
| % | 부모 요소 글꼴 크기에 대한 백분율 |
| smaller / larger | 부모 요소보다 한 단계 작게 / 크게 지정 |
| initial | 기본값(16px)으로 초기화 |
문법(Syntax)
CSS font-size 속성의 기본 문법은 다음과 같습니다 −
Selector {
font-size: /*value*/
}이제 실제 예제를 통해 font-size 속성의 동작 방식을 살펴보겠습니다.
예제 1: em 단위로 글꼴 크기 지정하기
다음 예제는 중첩된 div 요소에 font-size: 1.4em;을 적용한 사례입니다. 부모 요소의 글꼴 크기를 기준으로 배율이 누적되므로, 하위 요소로 내려갈수록 글자가 점점 커지는 것을 확인할 수 있습니다 −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 10px;
text-align: center;
width: 50%;
border: 2px solid;
border-radius: 15%;
font-size: 1.4em;
}
</style>
</head>
<body>
<div>
one
<div>two
<div>three</div>
</div>
</div>
</body>
</html>
실행 결과(Output)
위 코드는 다음과 같은 결과를 출력합니다 −
예제 2: 키워드와 백분율로 글꼴 크기 지정하기
다음 예제에서는 키워드(smaller), initial 값, 그리고 백분율(200%)을 함께 사용해 각각 다른 방식으로 글꼴 크기를 조절합니다 −
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-size: smaller;
}
#demo {
font-size: initial;
}
p:last-of-type {
font-size: 200%;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text 1.</p>
<p id="demo">This is demo text 2. </p>
<p>This is demo text 3.</p>
</body>
</html>
실행 결과(Output)
위 코드는 다음과 같은 결과를 출력합니다 −
마무리
font-size 속성은 텍스트의 가독성과 전체적인 사용자 경험을 좌우하는 중요한 속성입니다. 고정된 크기가 꼭 필요한 경우가 아니라면 em, rem, % 같은 상대 단위를 적극적으로 활용하여, 다양한 기기와 브라우저 환경에서도 일관되고 접근성 좋은 타이포그래피를 구현하는 것이 좋습니다.