CSS font-size 속성이란?
font-size 속성은 웹 페이지에서 텍스트(폰트)의 크기를 늘리거나 줄이는 데 사용되는 CSS 속성입니다. 이 속성을 활용하면 문단, 제목, 버튼 등 다양한 요소의 글자 크기를 자유롭게 제어할 수 있어, 가독성과 디자인 완성도를 높이는 데 필수적인 역할을 합니다.
font-size에 사용할 수 있는 값
font-size 속성에는 여러 가지 형태의 값을 지정할 수 있습니다.
- 절대 키워드: xx-small, x-small, small, medium, large, x-large, xx-large
- 상대 키워드: smaller(부모 요소보다 작게), larger(부모 요소보다 크게)
- 픽셀(px) 단위: 화면 기준의 고정된 크기 지정 (예: 15px)
- 백분율(%) 단위: 부모 요소 폰트 크기를 기준으로 한 상대적 크기 지정 (예: 120%)
이 외에도 em, rem 등의 상대 단위를 함께 사용하면 반응형 웹에서 더욱 유연한 타이포그래피 구성이 가능합니다.
font-size 속성 사용 예제
아래 예제는 인라인 스타일을 이용해 세 개의 문단에 서로 다른 폰트 크기를 적용한 코드입니다.
<html>
<head>
</head>
<body>
<p style = "font-size:15px;">이 텍스트의 크기는 15픽셀입니다</p>
<p style = "font-size:small;">이 텍스트의 크기는 small입니다</p>
<p style = "font-size:large;">이 텍스트의 크기는 large입니다</p>
</body>
</html>
코드 설명
- 첫 번째 문단은 15px로 픽셀 단위의 고정 크기를 지정했습니다.
- 두 번째 문단은 small 키워드를 사용해 브라우저 기본 크기보다 작은 글꼴로 표시됩니다.
- 세 번째 문단은 large 키워드를 사용해 브라우저 기본 크기보다 큰 글꼴로 표시됩니다.
마무리
font-size 속성은 CSS에서 텍스트 크기를 조절하는 가장 기본적이면서도 중요한 도구입니다. 픽셀과 같은 절대 단위는 일관된 크기를 보장하고, 백분율이나 키워드 같은 상대 값은 유연한 레이아웃 구성에 유리합니다. 프로젝트의 성격에 맞게 적절한 단위를 선택해 사용해 보세요.