[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개의 문자열을 포함하고 있다는 뜻이다.