[CSS] 길이 단위

vw / vh

v = viewport (현재 보여지는 화면 크기)

vw = 뷰포트 너비에 비례

vh = 뷰포트 높이에 비례

예시: 3vw = 뷰포트 너비의 3%

vw, vh는 부모의 너비 / 높이와 무관하다

vmin / vmax

vmin = 뷰포트 너비 / 높이 중 작은 것에 비례

vmax = 뷰포트 너비 / 높이 중 큰 것에 비례

em / rem

em = 부모의 폰트 크기에 비례

rem = 최상위 요소 (대체로 html) 의 폰트 크기에 비례

예시: 부모의 폰트 크기가 12px일 때, 3em = 12 * 3 = 36px

브라우저 기본 폰트 사이즈는 100%에서 16px이다

ex

현재 폰트의 x 높이값 (알파벳 x의 높이 값) 또는 em의 절반

ch

현재 폰트의 0 너비값 (숫자 0의 너비 값)

참고자료

반응형 웹 뚝딱 만들기 (2) - vw, vh, vmin, vmax, em, rem 속성

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch