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

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;

---

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

px	%	em	pt
6 px	37.50%	0.375em	5pt
7px	43.80%	0.438em	5pt
8px	50%	0.500em	6pt
9px	56.30%	0.563em	7pt
10px	62.50%	0.625em	8pt
11px	68.80&	0.688em	8pt
12px	75.00%	0.750em	9pt
13px	81.30%	0.813em	10pt
14px	87.50%	0.875em	11pt
15px	93.80%	0.938em	11pt
16px	100%	1.000em	12pt
17px	106.30%	1.063em	13pt
18px	112.50%	1.125em	14pt
19px	118.80%	1.188em	14pt
20px	125.00%	1.250em	15pt
21px	131.30%	1.313em	16pt
22px	137.50%	1.375em	17pt
23px	143.80%	1.438em	17pt
24px	150.00%	1.500em	18pt