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를 사용하여 해결할 수 있습니다.
'web' 카테고리의 다른 글
[JS][HTML] 브라우저 이미지 캐싱 피하기 (0) | 2017.03.17 |
---|---|
[web][jquery][jquery-ui] jquery color관련 animation 사용하기 jquery-ui.js (0) | 2017.01.13 |
[node][socket.io][redis] cluster사용시 socket.io와 redis (0) | 2016.11.24 |
[JavaScript]2중 반복문, 중첩 반복문에서 break, continue (0) | 2016.11.23 |
[html][JavaScript] localStorage (0) | 2016.11.14 |