CSS 단위

절대단위

절대 단위는 고정된 값을 가지고 있으며 변하지 않는 특징을 가지고 있다.

반응형 사이트에는 적합하지 않으며 출력 매체에 쓰기 적합하다.

 

속성값	설명
px	모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다.
pc	pc는 파이카를 의미합니다. pica단위로 계산(1pc = 12pt)
pt	pt는 포인트를 의미합니다. point 단위로 계산(1pt = 1/72inch)
in	in은 인치를 의미합니다. inch 단위로 계산(1in = 96px = 2.54cm)
cm	cm은 센치미터를 의미합니다. centimeter 단위로 계산(1cm = 10mm = 37.8px)
mm	mm는 밀리미터를 의미합니다. mm단위로 계산(1mm = 0.1cm = 3.78px)

 

상대단위

다른 요소들의 크기의 영향을 받아 상대적으로 크기가 변하는 특징을 가지고 있다.

반응형 웹사이트에 적합하다.

 

속성값	설명
cm	부모 요소의 크기를 기준으로 상대적인 값을 갖습니다.
Rem	최상위 부모 요소를 기준으로 상대적인 값을 갖습니다.
ex	부모 요소의 소문자 X축 기준으로 상대적인 값을 갖습니다.
%	부모 요소의 길이를 기준으로 상대적인 값(%)을 갖습니다.
vw	뷰포트(viewport) 브라우저 가로 크기를 기준으로 상대적인 값을 갖습니다.
vh	뷰포트(viewport) 브라우저 세로 크기를 기준으로 상대적인 값을 갖습니다.
vmin	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 작은 값을 기준으로 상대적인 값을 갖습니다.
vamx	뷰포트(viewport) 브라우저 가로 크기 또는 세로 크기 중 큰 값을 기준으로 상대적인 값을 갖습니다.