CSS 단위

CSS 단위

CSS의 표준권고안에 따르며 크기 단위는 절대단위와 상대단위로 구분됩니다.

절대단위고정된 값을 출력하며 절대 크기가 변하지 않습니다. 크기가 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있습니다

cm(센티미터) mm(미리미터) in(인치)
px(픽셀) pt(포인트) pk(피아카)

상대단위부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다.

단위 설명
em 부모 요소의 크기의 영향을 받아 크기가 변함
rem 최상위 요소인 html요소의 크기의 영향을 받아 크기가 변함(익스9.0이상 부터 지원)
% 부모 요소의 크기의 영향을 받아 크기가 변함
vw viewport width의 약자 / 80vw="뷰포트 영역의 80%"(익스 9.0이상 부터 지원)
vh viewport heigh의 약자 / 80vh="뷰포트 영역의 80%"(익스 9.0이상 부터 지원)
vmin 뷰포트의 최소값 / 설정한 viewport값에 따라 변함(익스 12.0이상 부터 지원)
vmax 뷰포트의 최대값 / 설정한 viewport값에 따라 변함(익스 12.0이상 부터 지원)