CSS - 폰트 크기 (em vs rem)
08 Apr 2022 | css화면 크기에 가변적인 폰트 사이즈
화면 크기에 따라 폰트의 크기를 변경하고 싶을 때가 있습니다. 폰트 크기를 px로 설정하면 화면 크기와 무관하게 크기가 고정됩니다. (단, 최신 브라우저들은 px 단위에서도 화면 크기에 따라 폰트 크기가 조절됩니다.)
화면 크게에 따라 반응성으로 폰트 크기를 조절하기 위해 em 단위를 사용합니다.
em 단위는 대문자 M을 1em으로 표현한 것으로 16px이 1em 입니다.
em의 단점, rem의 등장
em은 화면 크기에 따라 폰트의 크기가 반응성을 가지며 변하지만, 부모 컨테이너의 글자 크기를 상속받는다는 단점이 있습니다. 복잡한 레이아웃에서는 사용하기 불편할 수 있습니다.
그래서 나온 것이 rem 입니다. 웹 문서의 최상위인 <html>, </html>를 기준으로 하기 때문에 상속 문제가 발생하지 않아 유용하게 사용할 수 있습니다.
vw, vh, vmin, vmax 단위
rem은 화면 크기에 따라 폰트의 크기가 변하기는 하지만 특정 단위를 기준으로 폰트 크기가 변할 뿐, 화면 비율에 따라 역동적으로 변하지는 않습니다. CSS3에서 추가된 vw, vh, vmin, vmax 등을 이용하면 화면 비율에 따라 역동적으로 변하는 폰트 크기를 얻을 수 있습니다.
p {
font-size: 5vw;
}
위와 같이 폰트 크기를 5vw로 한 경우 웹브라우저 너비의 5%를 의미합니다. 여기서 v는 viewport를 의미합니다.
vmin은 너비와 높이 중 짧은 쪽을 기준으로 합니다.