em : 부모의 단위에 배수를 더하는 것.
1
2
3
4
5
6
7
8
9
10
11
body {
font-size:14px;
}
div {
font-size:1.2em;
}
면 div엔 16.8px로 들어간다.
이때 부모의 크기에서 배수를 더하는 거라서, 자식마다 em을 써서 내려가면 크기는 계속 배수로 증가하게 된다.
rem
root의 단위에 배수를 더하는 것. 최상위 태그에 대해서 배수로만 구하는 거라, 자식의 깊이가 깊어져도 크기가 기하급수적으로 커지지 않는다.
vh : viewport height, vw : viewport width
뷰포트의 높이값과 너비값에 맞추어 사용한다.
뷰포트의 높이, 너비를 100으로 나누어 1vh, 1vw로 표현한다. 100vh, 100vw는 뷰포트와 크기가 동일해진다.
vmin, vmax
뷰포트의 높이, 너비 값 중 작은 건 vmin에 큰건 vmax에 넣어 100분의 1 단위로 사용한다.
ex) 높이가 700px, 너비가 1100px 이면, 1vmin엔 7px, 1vmax엔 11px가 들어감
뷰포트의 크기에 맞추어, 정사각형을 만들 때 유용하다
ex, ch
둘다 현재 폰트와 폰트사이즈에 의존한다는 점에서 em, rem과 비슷.
하지만 이 두단위는 font-family에 의존함.
ch : 제로문자인 0의 너비값의 고급척도로 정의됨.
ex : 현재폰트의 x높이값 또는 em의 절반값.