CSS에서 사용하는 단위에 대한 고찰

MarkUp

개발자로 거듭나기 2022. 8. 23. 22:47

font-size, 단위의 고찰

CSS에서 폰트의 크기나 요소의 넓이, 높이값 등을 표현할 때 단위를 쓰죠? 예를들어 100%, 100px, 10vw, 1.5 rem 이런 단위들 많이 보셨을 겁니다. 오늘 저는 이런 단위에 대한 심층적인 고찰을 해볼까 합니다.

▶px : 해상도에 따라 달라지는 기본단위

font-size : 12px;

▶% : 부모요소의 글자 크기를 100% 기준으로 계산한 % 단위

font-size : 150%;

▶em : 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1단위로서, 다음과 같이 표현합니다.
특별한 설정이 없다면 16px이 1em이 되므로, 1.5em은 24px이 된다.

font-size : 1.5em;

▶rem : em과 비슷하지만 부모요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. 즉, html요소

font-size : 1.5rem;

▶vw, vh : 부포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위이며, 다음과 같이 표현합니다.
다음은 글자 크기가 뷰포트 너비의 10% 크기라는 의미입니다.

font-size : 10vw;

글자 크기를 각 단위로 환산하면 다음과 같습니다.