CSS Reference

CSS 단위

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

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

상대단위는 부모요소나 다른 요소의 크기에 영향을 받아 상대적으로 크기가 변합니다. 반응형 웹사이트 작업에 주로 사용되며, em, rem, %가 이에 해당됩니다.

rem은, 현재의 font-size를 정의합니다.

viewport width & viewport height, 이름에서 유추할 수 있듯 뷰포트를 기준으로 한 단위입니다. 뷰포트는 '실제로 보여지는 '영역'입니다. 즉, 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위입니다.

vw - 뷰포트의 폭에 근거하여 1vw는 width의 1%와 같습니다

vh - 뷰포트의 높이에 근거하여 1vh는 height의 1%와 같습니다

vh와 vw가 뷰포트의 너비값과 높이값에 상대적인 영향을 받는다면, vmin과 vmax는 너비값과 높이값에 따라 최대, 최소값을 지정할 수 있습니다.

ex와 ch는 현재 폰트와 폰트 사이즈에 의존한다는 점에서 em과 rem과 비슷합니다. 다른 점은, 이 두 단위가 font-family에 의존한다면, 다른 두 단위는 폰트의 특정 수치에 기반한다는 점입니다.