CSS 단위

CSS 단위

CSS에는 다양한 형태의 단위가 있으며, 이것을 상황에 맞게 효율적으로 사용하는 것이 좋습니다.

---

font-size

문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다.

px

font-size: 12px;

픽셀(px)은 해상도에 따라 상대적으로 달라지는 기본 단위 입니다.

%

font-size: 150%;

부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위 입니다. 특별한 설정이 없다면 16px가 100%입니다.

em

font-size: 1.5em;

부모 요소의 글자 크기를 100% 기준으로 계산한 100 분의1 단위 입니다. 특별한 설정이 없다면 16px이 1em 입니다.

rem

font-size: 1.5rem;

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

vw, vh

font-size: 10vw;

vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1 단위 입니다.

---

단위 환산

CSS의 각각의 단위마다 서로 대응되는 단위 값 입니다.

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