px
픽셀 단위로 지정한다.
%
부모 태그를 기준으로 %
단위로 지정한다.
rem(root em)
최상위 태그(요소)에 지정한 것을 기준으로 삼으며, 보통 최상위 태그는 html
태그이다.
em
현재의 font-size
를 정의한다.body
태그에 em
값을 이용해 폰트 사이즈를 지정하면 모든 자식 요소들은 body
의 폰트 사이즈에 영향을 받는다.
vw
뷰포트의 너비 값이다.
요소의 너비 값은 100분의 1의 단위이다.
(예: 너비 값이 1000px
일 때 1vw
는 10px
)
vh
뷰포트의 높이 값이다.
요소의 높이 값은 100분의 1의 단위이다.
(예: 높이 값이 900px
일 때 1vh
는 9px
)
vmin & vmax
vh와 vw이 늘 뷰포트의 너비 값과 높이 값에 상대적인 영향을 받는다면 vmin과 vmax는 너비 값과 높이 값에 따라 최대, 최소 값을 지정할 수 있다.
(예: 너비 값이 1100px
, 높이 값이 700px
일 때 1vmin
은 7px
이 되고 1vmax
는 11px
이 된다.)
(예: 너비 값이 800px
, 높이 값이 1200px
일 때 1vmin
은 8px
이 되고 1vmax
는 12px
이 된다.)
ch
제로 문자인 0의 너비 값의 고급 척도로 정의된다.
(예: 너비가 40ch
는 40개의 문자열을 포함하고 있다는 뜻)
ex
현재 폰트의 x (소문자x)의 높이 값이다.