CSS font-size 속성이란?
font-size 속성은 CSS에서 글꼴의 크기를 늘리거나 줄일 때 사용하는 기본 속성입니다. 이 속성을 활용하면 웹 페이지의 텍스트 크기를 자유롭게 제어할 수 있습니다.
font-size 속성에 사용할 수 있는 값은 다음과 같습니다.
- 절대 크기 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
- 상대 크기 키워드: smaller(부모 요소보다 작게), larger(부모 요소보다 크게)
- 픽셀 단위: 예) 15px, 20px — 화면에서 고정된 크기로 표시됩니다.
- 백분율 단위: 예) 120%, 80% — 부모 요소의 글꼴 크기를 기준으로 상대적으로 결정됩니다.
글꼴 크기 조절 예제
아래 예제는 인라인 스타일을 사용해 문단별로 서로 다른 글꼴 크기를 적용한 코드입니다.
<html> <head> </head> <body> <p style = "font-size:15px;">This font size is 15 pixels</p> <p style = "font-size:small;">This font size is small</p> <p style = "font-size:large;">This font size is large</p> </body> </html>
위 코드를 브라우저에서 실행하면 첫 번째 문단은 15픽셀 크기로, 두 번째 문단은 'small' 키워드에 해당하는 작은 크기로, 세 번째 문단은 'large' 키워드에 해당하는 큰 크기로 각각 표시됩니다.
활용 팁
접근성을 고려한다면 픽셀(px)보다 백분율(%)이나 em, rem 같은 상대 단위를 사용하는 것이 좋습니다. 상대 단위는 사용자가 브라우저 설정에서 지정한 기본 글꼴 크기에 따라 유연하게 확대·축소되기 때문입니다.