728x90
픽셀(px), em, rem 등 웹에서 사용하는 폰트 크기 단위는 어떻게 다를까요? 이들의 차이와 변환법을 쉽게 이해할 수 있도록 정리해 보았습니다.
웹 폰트 크기 단위란?
웹 디자인에서 텍스트의 크기를 조정할 때는 다양한 단위를 사용할 수 있습니다. 이 단위들은 텍스트의 크기를 정의하는 방식이 조금씩 다르며, 상황에 따라 적합한 단위를 선택하는 것이 중요합니다.
주요 폰트 크기 단위의 종류와 특징
1. 픽셀(px)
픽셀은 화면에서 고정된 크기를 나타내는 단위입니다.
- 특징:
- 고정된 크기: 어떤 브라우저나 디바이스에서도 동일한 크기를 유지합니다.
- 장점: 디자인의 정확성을 보장합니다.
- 단점: 반응형 디자인에서는 유연성이 부족할 수 있습니다.
2. em
em은 부모 요소의 폰트 크기를 기준으로 하는 상대적 단위입니다.
- 특징:
- 1em: 부모 요소의 폰트 크기와 동일.
- 예: 부모 폰트 크기가 16px일 때,
1.5em은 24px.
- 장점: 요소의 크기를 유연하게 조정 가능.
- 단점: 중첩 사용 시 크기가 예측하기 어려워질 수 있음.
3. rem
rem은 루트 요소(<html>)의 폰트 크기를 기준으로 하는 단위입니다.
- 특징:
- 1rem:
<html>의 폰트 크기와 동일. - 예를 들어,
<html>의 폰트 크기가 16px이라면,1 rem은16px.
- 1rem:
- 장점: 중첩 문제없이 일관된 크기 조정 가능.
- 단점:
<html>의 폰트 크기를 변경하면 전체 디자인에 영향을 줄 수 있음.
4. 퍼센트(%)
퍼센트는 부모 요소의 크기를 기준으로 한 상대적 단위입니다.
- 특징:
- 텍스트 크기를 부모 요소 대비 몇 퍼센트로 할지 지정.
- 100%는 부모 요소와 동일.
- 장점: 반응형 디자인에서 유용.
- 단점: em과 마찬가지로 중첩 효과에 유의해야 함.
5. vw, vh
vw(Viewport Width)와 vh(Viewport Height)는 뷰포트의 너비와 높이를 기준으로 한 상대적 단위입니다.
- 특징:
- 1vw: 뷰포트 너비의 1%.
- 1vh: 뷰포트 높이의 1%.
- 장점: 화면 크기에 따라 자동 조정.
- 단점: 텍스트 크기를 조정하기에는 다소 제한적.
단위 변환과 계산법
픽셀(px) → em 또는 rem 변환법 (H3)
1em 또는 1rem은 기준 폰트 크기를 나타냅니다.
- 공식:
em = px / 부모 폰트 크기rem = px / <html> 폰트 크기
- 예제:
<html>의 폰트 크기가 16px일 때, 32px은 몇 rem인가요?32 / 16 = 2rem
em → 픽셀(px) 변환법
em 단위를 픽셀로 변환하려면 부모 요소의 폰트 크기를 곱하면 됩니다.
- 공식:
px = em × 부모 폰트 크기
- 예제:
부모 폰트 크기가 20px일 때, 1.5em은 몇 px인가요?1.5 × 20 = 30px
% → px 변환법
퍼센트를 픽셀로 변환하려면 부모 폰트 크기를 기준으로 계산합니다.
- 공식:
px = % × 부모 폰트 크기 / 100
- 예제:
부모 폰트 크기가 16px일 때, 150%는 몇 px인가요?150 × 16 / 100 = 24px
언제 어떤 단위를 사용해야 할까?
- 픽셀(px)
- 고정된 크기가 필요한 경우.
- 버튼이나 아이콘 크기 설정 시 유용.
- em
- 부모 요소에 따라 유연하게 크기를 조정하고 싶을 때.
- 텍스트나 패딩, 마진 설정.
- rem
- 전체적인 디자인 일관성을 유지해야 할 때.
- 글로벌 스타일을 설정하거나 반응형 웹 디자인에서 사용.
- 퍼센트(%)
- 반응형 디자인에서 상대적 크기가 필요할 때.
- 부모 요소 대비 크기를 조정할 때.
- vw, vh
- 뷰포트 크기에 따라 유동적인 크기를 설정할 때.
- 배너나 전체 레이아웃 크기 조정.
결론
폰트 크기 단위는 상황에 따라 적절히 선택해야 디자인의 유연성과 일관성을 유지할 수 있습니다. 픽셀처럼 고정된 단위가 필요할 때도 있지만, em과 rem처럼 상대적인 단위는 반응형 웹 디자인에서 필수적입니다. 이 글을 참고하여 자신의 프로젝트에 가장 적합한 단위를 선택해 보세요!