[CSS]font-size 속성 크기 단위

px

웹에서 사용되는 기본적인 크기 단위, 고정된 값이다.

rem

html 태그의 크기를 기준으로 배수에 해당하는 크기를 가지는 단위

em

부모 요소의 크기를 기준으로 배수에 해당하는 크기를 가지는 단위

em은 부모 요소에 10px의 폰트 사이즈가 적용되어 있다면 1em은 10px이다. 2em은 20px이 된다.

rem은 html 태그의 크기에 영향을 받기 때문에 기본 16px로 적용되어 있다면 1 rem은 16px이 된다.

웹을 개발할 때 px보다 em/rem을 사용하는 이유

고정적인 px값은 사용자의 화면 해상도에 따라 다르게 표현될 수 있다.

따라서 사용자가 설정한 크기에 따라 요소가 적절하게 반응하기를 원한다면 px보다는 rem을 사용하는 것이 좋다.

vw

vw는 화면의 가로 크기와 관련 있다. 1vw는 화면의 가로 크기 1/100이다.

vh

vh는 화면의 세로 크기와 관련 있다. 1vw는 세로 크기 1/100이다.