[CSS] CSS에서 사용하는 단위들

 

 

 rem(root em)

em은 현재 font-size를 정의한다. 자식 요소는 부모의 폰트 사이즈를 상속 받아 커진다.

rem은 단일 사이즈로 표현하고 싶을 경우 사용하며 최상위  요소를 기준으로 삼는다.

 

 vh(vertical height), vw(vertical width)

vh, vw는 타겟 요소의 값을 뷰포트의 너비값과 높이값에 맞게 사용하는 단위이다.

vh요소는 높이값의 1/100(1%) 이다.

 

 vmin, vmax

 vmin, vmax는 뷰포트의 너비값과 높이값에 따라 최소, 최대값을 지정할 수 있다.

브라우저의 크기가 1280 x 700 이라면 1vmin은 7px, 1vmax는 12px이 된다.

 

 ex, ch

ex, ch는 현재 폰트 사이즈에 의존한다. em, rem과 다른 점은 두 단위가 폰트의 특정 수치에 기반한다는 점이다.

ex 단위는 현재 폰트의 x-높이값 또는 em의 절반값이다. 폰트의 중간 지점을 알아내기 위해 사용한다.

ch 단위는 제로 문자인 0의 너비값의 고급 척도로 정의된다. width: 20ch; 는 20개의 문자열을 포함하고 있다는 뜻이다.