[CSS] 브라우저 창의 너비나 높이에 따라 크기가 변하는 가변 폰트 단위 vw, vh, vmin, vmax

em과 rem을 사용하면 기준이 되는 폰트 크기를 바꾸었을 때,

다른 폰트의 크기들도 지정해둔 것에 따라 차등적으로 바뀌어 적용되기 때문에 편리하다.

하지만 em과 rem은 브라우저의 창의 크기와는 상관이 없는 단위이다.

이와 달리 vw, vh, vmin, vmax는 브라우저 창의 가로 또는 세로 크기에 따라 변하는 폰트 단위이다.

vw : viewport width

---

vw단위는 웹 브라우저의 가로폭 (너비)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 너비가 1280이고, 폰트 크기를 10vw라고 한다면

이 때 10vw의 크기는 1280의 1%인 12.8px이 되는 것이다.

vw단위를 지정한 예제는 이곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.

body{
    font-size: 2vw;
}

p{
    line-height: 4vw;
}




vh : viewport height

---

vh단위는 웹 브라우저의 세로폭 (높이)를 기준으로 결정되는 크기다.

만약 웹 브라우저의 높이가 600이고, 폰트 크기를 10vh라고 한다면

이 때 10vh의 크기는 600의 1%인 6px이 되는 것이다.

vh단위를 지정한 예제는 이곳을 클릭하면 볼 수 있다.

브라우저 창의 세로 크기를 늘렸다 줄였다 하면서 보면 글자 크기가 달라지는 것을 확인할 수 있다.

위의 예제에서 적용한 CSS 코드는 아래와 같다.

body{
    font-size: 2vh;
}

p{
    line-height: 4vh;
}

vmin : viewport minimum

---

vmin 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 작은 값을 기준으로 한다.

vmin단위를 지정한 예제는 이곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.

body{
    font-size: 2vmin;
}

p{
    line-height: 4vmin;
}




vmax : viewport maximum

---

vmax 단위는 웹브라우저의 가로폭(너비)과 세로폭(높이) 중에 더 큰 값을 기준으로 한다.

보통 창의 크기에 관계 없이 글자가 화면의 가로로 꽉 차게 만들고 싶을 때 사용한다.

vmax 단위를 지정한 예제는 이곳을 클릭하면 볼 수 있다.

브라우저 창의 가로 / 세로 크기를 늘렸다 줄였다 하면서 보면

가로 / 세로의 크기 관계에 따라 글자 크기가 그대로이기도 하고 달라지기도 하는 것을 확인할 수 있다.

body{
    font-size: 2vmax;
}

p{
    line-height: 4vmax;
}




Can I use Viewport units ?

가변 폰트 단위의 브라우저 호환성

---

아래에서 볼 수 있듯, 인터넷 익스프로러 8 (IE 8) 이하나 오페라 미니 Opera Mini에서 사용이 지원이 안되는 기능이다.

IE8은 전세계에서 0.55%의 유저가 사용하고 있고, 오페라 미니는 4.88%의 유저가 사용하고 있다.

사용할 때 몇몇 주의점들이 있다.

IE9에서는 vmin 대신 vm이라고 명명하여 지원하고 있다.

그리고 IE11, Edge13, Edge14에서는 vmax 단위를 지원하지 않는다.