CSS 단위

CSS 단위

CSS에서 자주 사용하는 단위에 대해 알아보는 시간을 가지겠습니다.
글자 크기를 명시하지 않을 경우 기본 값은 16px 입니다.

---

▶ px

해상도에 따라 상대적으로 달라지는 기본단위로서, 아래와 같이 표현.

font-size: 12px;

▶ %

부모 요소의 글자 크기를 100% 기준으로서 계산한 % 단위로서, 아래와 같이 표현.

font-size: 150%;

▶ em

부모 요소의 글자 크기 100% 기준으로 계산한 100 분의 1 단위로서, 아래와 같이 표현.

font-size: 1.5em;

특별한 설정이 없다면 16px가 1em이 되므로, 1.5em은 24px( 16px * 1.5 = 24px )
가 된다. 부모가 10px일 경우 1.5em는 24px가됨.

▶ 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;

위 예문은 글자 크기가 부표트 너비의 10% 크기라는 의미.

---

글자크기 환산 비교

px	%	em	pt
6px	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