[CSS] vw와 vh이 무엇인가? %와의 차이점은?

1. 개요

때는 웹사이트를 개발할 때였다. 

 

데스크탑 환경에서는 잘 보이던 글씨가, 모바일 환경에서는 너무 크게 보이는 문제가 있었다.

 

 

이를 해결하기 위해 font-size의 단위를 vw로 바꾸어주었더니, 글씨가 다음과 같이 보여지게 되었다.

 

당연하게도, 고정값을 지정하는 em단위를 상대적 크기 단위인 vw로 지정하니,

위와 같이 작아진 mobile해상도에서는 글씨가 알맞게 작게 보여지게 되었다.

 

그렇다면 오늘은 크기를 지정하는 단위 중 vw, wh가 무엇인지 알아보자.

 

 

 

2. vw와 vh

• vw = viewport width
• vh = viewport height

viewport란 화면 Display상의 표시 영역을 뜻한다.

즉, vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다.

 

100vw, 100vh가 전체 화면의 기준이 된다.

예를 들어, 현재 스크린 크기가 width: 1200px, height: 900px 이라면,

 

1vw = 12px / 1vh = 9px이 될 것이고,

 

한 div의 영역을 아래와 같이 설정한다면,

div {
	width: 25vw;
    height: 50vh;
}

실제로는 width: 300px; height: 450px; 와 같이 계산이 되어 적용이 될 것이다.

 

 

 

3. %와의 차이

그렇다면 100%와 100vw 설정의 차이는 무엇일까?

 

첫번째로, vw는 height에서도 사용이 가능하다.

height: 100%와 height: 100vw는 엄연히 다른 뜻이다. 마찬가지로 vh도 width에서 사용이 가능하다.

 

두번째로는

vw와 vh는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 기준으로 계산된다. 반면에 %는 창의 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이를 기준으로 계산되어 반환된다. 또한 그냥 전체 화면의 %를 쓴다고 하더라도 스크롤바를 포함하지 않은 현재 화면 길이를 기준으로 계산된다는 차이점이 있다.

 

 

 

4. vmin과 vmax

추가적으로는 vmin과 vmax가 있는데, viewport의 길이 중 더 짧은 길이를 기준으로 삼는 것은 vmin, 더 긴 길이를 기준으로 삼으면 vmax이다.

 

아래의 사진을 보면 이해하기 좋다.

출처: https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

 

 

 

---

#References

https://jw910911.tistory.com/24

https://programming119.tistory.com/93