[CSS] vh란? / vw란? / what is vh? ❓ / %와의 차이

<vh와 vx>

 

vh = viewport height

 

vw = viewport width

 

즉, 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻입니다.

 

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

예를들어,

현재 스크린 크기가 height = 1000px, width = 800px 이라면

1vh = 10px  /  1vw = 8px 이 될 것이고

 

height: 50vh;

width: 25vw; 

로 설정한다면

 

height - 500px

width - 200px 

 

실제로 이런식으로 적용이 되겠죠!

 

% 와 차이는?

 

그렇다면 100% 과 100vh 설정하는 것이 무엇이 다르냐 하는 의문이 들 것입니다.

 

첫번째로는, vh 는 width 에서도 사용이 가능합니다.

 

width: 100% 와

width: 100vh 는 엄연히 다른 뜻이지요!

마찬가지로 vw 도 height에서 사용이 가능합니다.

 

두번째로는

 

vh 와 vw 는 열려있는 화면 전체의 상대길이이기 때문에 스크롤바를 포함한 길이를 반환합니다!

반면에 % 는 창이 중심이 아닌, %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환합니다.

또한, 그냥 전체 화면의 %를 쓴다 하더라도 스크롤 바를 포함하지 않은 현재 화면 길이만을 반환하죠.

 

vmin 과 vmax

 

추가적으로는 vmin 과 vmax 가 있습니다.

viewport 의 길이 중 더 긴 길이를 기준으로 삼으면 vmax,

더 짧은 길이를 기준으로 삼는 것은 vmin 입니다.

 

이는 위 사진을 보시면 더 이해가 잘 될 것입니다.

vmin

vmax

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