vh와 vw

vh, vw: 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환하겠다는 뜻

스크린 크기가 height = 1000px, width = 800px 이라면 1vh= 10px/ 1vw = 8px이 될 것이고

{ height - 50vh, width - 25vw } = { height - 500px, width - 200px }

 

100%와 100vh 의 차이

 

vw, vh: 열려있는 화면 전체의 상대길이를 뜻하며, 스크롤바를 포함한 길이!

% : %를 쓰고 있는 요소의 부모 요소의 길이에 맞게 반환. 전체 화면의 %를 쓴다 하더라도 스크롤바를 포함하지 않은 화면 길이만을 반환. 

 

vmin과 vmax

viewport의 길이를 기준으로 더 긴 길이를 기준으로 삼으면 vmax, 더 짧은 길이를 기준으로 삼으면 vmin