[wed][HTML/CSS] vh/vw와 %의 차이

vh / vw와 %의 차이

요약 : vw와 vh는 스크롤바 포함, %는 미포함

안녕하세요. 

부끄럽지만, vh/vw라는 css단위를 최근에서야 알게 되었습니다.

기본적으로 vh와 vw는 각각 view port의 높이와 너비를 의미합니다.

즉 body의 width를 100vw, height를 100vh로 지정하면 body의 부피는 화면 전체를 차지하게 됩니다.

그렇다면, body의 width와 height를 100%로 지정하는 것과는 어떤 차이가 있을까요?

vw와 vh를 사용한 경우

%를 사용한 경우

위 두 사진의 차이점은 스크롤 바가 발생했느냐 아니냐의 차이입니다.

vw와 vh를 사용하여 body의 크기를 설정한 경우(100으로), 스크롤바가 발생되게 됩니다.

%의 경우는 그렇지 않고요.

vw와 vh에서 스크롤바가 발생한 이유는 viewport가 스크롤바의 영역을 포함하기 때문입니다.

vw와 %의 차이

이러한 차이 때문에 프로젝트 진행중에 화면 변경시 UI가 흔들리는 문제가 있었습니다.

box의 position(top, left...)을 %를 사용해서 지정해 두었습니다. 

이때 화면에 스크롤이 발생하면 1%의 값이 스크롤이 발생하기 전과 달리지기 때문에, %로 포지셔닝된 box들이 흔들리는 문제였습니다.

이는 vw / vh를 사용하여 해결할 수 있습니다.