CSS : 단위

CSS : 단위

오늘은 CSS에서 유용하게 사용하는 단위에 대하여 알아보겠습니다. 참고로, 글자 크기는 명시하지 않을 경우 16px이 기본값입니다.

---

px

해상도에 따라 상대적으로 달라지는 기본 단위로서, 다음과 같이 표현합니다.

font-size: 12px;

%

부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서, 다음과 같이 표현합니다.

font-size: 150%;

특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다.

em

부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위로서, 다음과 같이 표현합니다.

font-size: 1.5em;

특별한 설정이 없다면 16px이 1em이 됩니다. 만약 부모 요소가 10px이었다면 1.5em은 15px이 될 것입니다.

rem

rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100% 기준으로 계산합니다. rem의 r은 root 즉, html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.

font-size: 1.5rem;

vw, vh

vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이값의 100분의 1 단위이며, 다음과 같이 표현합니다.

font-size: 10vw;