본문 바로가기
Web/CSS

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

by 사용자 서상혁 2020. 1. 7.

<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

 

 

 

 

728x90

댓글3

  • 어후 2021.04.08 04:13

    어후쑤ㅣ,,넘조아,,검색후 첫글인데
    웹디도 아니고 백개인데 딱 지금 필요한 깊이에서 피로하지 않게 얻을수있는 글이라 넘조타
    첫클릭 검색 운이 따라줘서 시간낭비 덜고
    댓글 도 남기고 예아

    요즘 쓰레기글 올리는 블로그가 많아서
    삽질할 시간만 늘리는 ♩♩♬글들 천지인데

    어후,,쒸,,뿔,,ㅎ 기분너무 좋아
    답글

  • 2021.04.08 14:15

    비밀댓글입니다
    답글