CSS에서 사용하는 크기 단위에는 absolute, relative 두가지 유형이 있다.
Absolute Lenghts
절대 길이 단위는 고정되어 있다. 화면 크기가 매우 다양하기 때문에 화면에서 사용하는 것보다는 인쇄 레이아웃에 사용된다.
고정 길이 단위 종류로는 cm, mm, in(inches), px(pixels), pt(points), pc(picas) 등이 있다.
px(pixel)
스크린의 픽셀을 기준으로 하는 절대적인 크기를 설정한다.
Relative Lengths
다른 속성 길이에 대해 상대적인 길이를 지정한다.
％(percent)
부모 엘리먼트에 대한 상대적인 크기를 설정한다.
em
부모의 기본 폰트 크기를 1em으로 놓고, 그에 대한 상대적인 크기를 설정한다.
ex) 부모 폰트 크기가 16px이라면, 1.5em은 24px에 해당한다.
rem(root em)
html에서 root element의 폰트 크기를 1rem으로 놓고, 그에 대한 상대적인 크기를 설정한다.
vw
viewport width의 1% 길이에 대한 상대적인 크기를 설정한다.
ex) viewport widhth가 800px이면, 2vw = 16px
viewport
웹페이지에서 사용자가 볼 수 있는 영역이다.
vh
viewport height의 1% 길이에 대한 상대적인 크기를 설정한다.
vmin, vmax
viewport width와 height 최소 길이의 1%가 vmin, 최대 길이의 1%r가 vmax가 된다.
예를 들면 width: 1000px, height: 800px 일 경우, 1vmin = 8px, 1vmax = 10px 이 된다.
width: 500px, height: 1000px 일 경우, 1vmin = 5px, 1vmax = 10px 이다.
ch
주어진 font의 문자 0의 width에 대한 상대적의 크기를 의미한다.
앞에서 본 단위 종류들 예제가 전부 font-size에 대한 것이여서 "왜 폰트 사이즈에 0에 대한 너비를 사용하는거지?" 라는 의문이 생겼다. 예제를 봐보니 역시 폰트 사이즈로 사용하는 것이 아니라 라인의 길이였다.
ex
현재 폰트 문자 x의 height 값이다. 폰트의 중간 지점을 알아내기 위해 자주 사용한다.
