다양한 CSS단위들

css에서 속성을 지정하는 css 단위에는 여러가지가 있습니다.

상대 단위 : (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다. 왠만하면 웹쪽 퍼블리싱은 상대 단위로 퍼블리싱합니다.

절대 단위 : (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다.

웹 퍼블리싱을 하면서 제가 개인적으로 느낀 단위별 사용 빈도는
px >>> rem > em > % = vw = vh > vmin = vmax 정도였던 것 같았습니다. 😅

CSS 단위표

속성 이름	설명
px	모니터의 1dot이 1pixel을 의미하며 pixel은 해상도에 따라서 상대적인 크기를 갖습니다.
em	부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다.
ex	부모 요소의 소문자 너비를 기준으로 상대적인 값을 갖습니다.
%	부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다.
rem	루트(root em) 요소의 크기를 기준으로 상대적인 값을 갖습니다.
vw	뷰포트(viewport) 브라우저 가로 크기를 기준으로 상대적인 값을 갖습니다.
vh	뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다.
vmin	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 작은 값을 기준으로 상대적인 값을 갖습니다.
vmax	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 큰 값을 기준으로 상대적인 값을 갖습니다.
cm	cm은 센치미터를 의미합니다. centimeter 단위로 계산(1cm = 10mm = 37.8px)
mm	mm는 밀리미터를 의미합니다. mm단위로 계산(1mm = 0.1cm = 3.78px)
pt	pt는 포인트를 의미합니다. point 단위로 계산(1pt = 1/72inch)
pc	pc는 파이카를 의미합니다. pica단위로 계산(1pc = 12pt)
in	in은 인치를 의미합니다. inch 단위로 계산(1in = 96px = 2.54cm)

CSS 단위별 비교표

Point	Pixel	em	%
6pt	8px	0.5em	50%
8pt	11px	0.7em	70%
10pt	13px	0.8em	80%
12pt	16px	1em	100%
14pt	19px	1.2em	120%
16pt	22px	1.4em	140%
18pt	24px	1.5em	150%

출처