CSS의 단위

CSS 단위

CSS에서 사용하는 단위는 font-size, text-indent, line-height, width, height, padding 등 크기를 나타내는 값에 쓰입니다. 크게보면 절대 크기가 변하지 않는 절대단위와 상황에 따라 크기가 변하는 상대단위로 나뉩니다.

절대 단위

고정된 값을 출력하며 절대 크기가 변하지 않습니다. 이 방법은 크기가 가변적인 웹사이트가 아닌 경우에는 유용하나, 반응형 사이트에 적용하기 위해서는 매우 복잡하다는 단점이 있습니다. ※px(픽셀) 값을 주로 사용합니다.

cm (센티미터)	mm (미리미터)	in (인치)
px (픽셀)	pt (포인트)	pc (파이카)

상대 단위

부모 요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다. 반응형 웹사이트를 작업할 때 주로 사용합니다. ※em, rem, % 값을 주로 사용합니다.

em	부모 요소의 크기의 영향을 받아 크기가 변함
rem	최상위 요소인 html요소의 크기의 영향을 받아 크기가 변함
%	부모 요소의 크기의 영향을 받아 크기가 변함
vw	viewport width의 약자 / 80vw = "뷰포트 영역의 80%"
vh	viewport height의 약자 / 80vh = "뷰포트 영역의 80%"
vmin	뷰포트의 최소값 / 설정한 viewport값에 따라 변함
vmax	뷰포트의 최대값 / 설정한 viewport값에 따라 변함

 

em은 부모 크기에 영향을 받기 때문에 파악하기 쉽지 않을 수 있으며 미디어 쿼리 작성시 여러 요소를 수정해야만 합니다. 그러나 rem은 최상위 요소인 html의 요소의 영향을 받기 때문에 미디어쿼리 작성시 이 요소의 크기 하나만 변경하면 나머지는 자동으로 변합니다. 그래서 반응형 웹사이트를 제작할 때 rem을 주로 사용합니다.