2025.03.04 | 조회 : 13
CSS에서 font-size 단위 정리
CSS에서 font-size 단위 완벽 정리!
웹 개발을 할 때 글자의 크기를 조정하는 것은 매우 중요한 요소 중 하나입니다. CSS에서 font-size를 설정할 때 사용할 수 있는 다양한 단위가 존재하며, 이를 적절히 활용하면 더 유연하고 반응형 웹 디자인을 만들 수 있습니다. 이번 글에서는 CSS에서 사용되는 font-size 단위를 완벽하게 정리해보겠습니다!
1. 절대 단위 (Absolute Units)
절대 단위는 고정된 크기를 가지며, 화면 크기나 부모 요소의 크기에 영향을 받지 않습니다. 주로 인쇄 매체에서 사용되지만, 웹에서도 일부 사용할 수 있습니다.
| 단위 | 설명 |
|---|---|
px (픽셀) |
가장 많이 사용되는 단위, 화면에서 고정된 크기를 가짐 |
pt (포인트) |
인쇄용 문서에서 주로 사용 (1pt = 1/72 인치) |
pc (파이카) |
1pc = 12pt |
cm (센티미터) |
물리적인 크기 기준 (1cm = 37.8px) |
mm (밀리미터) |
1mm = 1/10cm |
in (인치) |
1in = 2.54cm = 96px |
추천: px 단위는 고정된 크기를 설정할 때 편리하지만, 반응형 디자인을 고려할 때는 상대 단위를 사용하는 것이 더 좋습니다.
2. 상대 단위 (Relative Units)
상대 단위는 부모 요소나 루트 요소(html)의 크기에 따라 동적으로 조정됩니다. 반응형 웹 디자인을 만들 때 유용합니다.
| 단위 | 설명 |
|---|---|
% |
부모 요소의 font-size에 대한 백분율 |
em |
부모 요소의 font-size를 기준으로 한 배율 (2em은 부모 크기의 2배) |
rem |
루트 요소 (html)의 font-size를 기준 (1rem = html의 font-size) |
vw |
뷰포트 너비의 백분율 (10vw는 뷰포트 너비의 10%) |
vh |
뷰포트 높이의 백분율 (10vh는 뷰포트 높이의 10%) |
vmin |
vw와 vh 중 작은 값 기준 (10vmin은 작은 쪽의 10%) |
vmax |
vw와 vh 중 큰 값 기준 (10vmax는 큰 쪽의 10%) |
추천:
rem단위는 예측하기 쉽고 유지보수하기 편리하여 반응형 웹에서 많이 사용됩니다.vw,vh는 화면 크기에 따라 동적으로 조정할 수 있어 유용합니다.
3. ex, ch 단위
문자의 크기를 기준으로 하는 단위도 있습니다.
| 단위 | 설명 |
|---|---|
ex |
현재 폰트의 x-height 기준 (소문자 x의 높이) |
ch |
현재 폰트에서 숫자 0 한 개의 너비 기준 |
예제 코드
p {
font-size: 2ch; /* 숫자 '00' 두 개의 너비 */
}
4. 추천하는 font-size 설정 방법
기본적으로 rem을 사용하기 html의 기본 font-size는 16px이므로, 1rem = 16px, 1.5rem = 24px 이런 식으로 직관적으로 조정할 수 있습니다.
html {
font-size: 16px; /* 기본 크기 설정 */
}
p {
font-size: 1rem; /* 16px */
}
h1 {
font-size: 2.5rem; /* 40px */
}
button {
font-size: 1.2rem; /* 19.2px */
}
반응형 웹에서는 vw, vh 활용 가능
h1 {
font-size: 5vw; /* 뷰포트 너비의 5% */
}
5. 요약 및 결론
px: 고정 크기, 하지만 반응형 웹에서는 유연하지 않음rem:html기준, 반응형 웹에서 추천em: 부모 요소 기준, 중첩되면 크기가 변할 수 있음vw/vh: 화면 크기에 따라 변하는 가변 크기%: 부모 요소 기준 백분율
반응형 웹을 고려한다면 rem을 기본으로 사용하고, 필요에 따라 vw, vh, %를 섞어서 활용하는 것이 좋습니다!
이제 font-size 단위를 적절하게 사용하여 가독성 높고 반응형 웹에 적합한 스타일을 만들어 보세요!
