,



몇일 전의 포스팅에서 vw, vh 단위를 소개하면서 vw, vh 단위를 활용한 좋은 예를 소개시켜 드렸던 적이 있습니다.


http://blog.koyeseul.net/795


그런데 이 단위는 쓰지 말아야 할 때가 있습니다.


그 부분을 같이 살펴보도록 하겠습니다.




위의 vw, vh 단위를 활용한 좋은 예를 소개하면서 보여드린 홈페이지입니다.


이 홈페이지의 메인 슬라이더는 가로 길이가 화면에 꽉 차는 형태입니다.


그래서 100vw 단위를 써서 width를 줘도 될 것 같죠?



width: 100vw !important;


이 값은 실제로는 제대로 동작하지 않습니다.


위 스크린샷만 봐도 왼쪽 공간이 좀 이상함을 알 수 있죠?


왜 이런 현상이 일어날까요?


좀 더 간단한 예제를 통해, 뭐가 문제인지 살펴보도록 합시다.




아래 코드를 따라 적은 후 html 파일을 저장하고 실행시켜 봅니다.


물론 캡쳐로도 보여드리겠습니다만, 직접 보는 것이 가장 정확합니다.


<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<title>Document</title>

<style>

html, body {

padding:0;

margin:0;

}

body {

overflow:scroll;

}

div {

background-color:#2AABD2;

width:100vw;

height:300px;

}

</style>

</head>

<body>

<div></div>

</body>

</html>



뭐가 문제인지 금방 알겠죠?


가로 방향으로 스크롤바가 활성화되는 것을 봤을 때, 100vw 단위는 스크롤바를 인식하지 못하는 문제가 있다는 사실을 알 수 있습니다.


여기서 문제를 해결하기 위해 css의 body에 들어간 속성을 overflow:hidden; 으로 바꿔봅니다.


body {

overflow:hidden;

}


그리고 브라우저를 실행시켜 봅니다.



정상적으로 동작함을 알 수 있습니다.


근데 둘다 hidden 이니까, 제대로 동작하는지 정확히 확인하기 위해서는 다른 방법이 필요합니다.


body {

overflow-x:scroll;

overflow-y:hidden;

}


이렇게 바꿔 보시고 실행시켜 보십시오.


overflow-x 부분의 스크롤이 활성화되지 않는 것을 봤을 때 100vw 단위가 정상적으로 동작함을 알 수 있습니다.







이를 통해 vw, vh 단위는 화면의 스크롤바를 제대로 인식하지 못함을 알 수 있습니다.


더 정확히 말하면 스크롤바에 관계없이 화면 단위를 인식함을 알 수 있습니다.


이 부분은 필요한 상황에서는 장점이 될 수 있지만, 위의 슬라이더 크기를 조절하는 등과 같은 상황에서는 마이너스가 됩니다.


따라서 화면 스크롤이 되어야 하는 페이지에서 화면에 단순히 이미지나 슬라이더 등을 보여주기 위한 목적으로 100vw 단위를 함부로 쓰시면 안됩니다.





댓글을 달아 주세요

티스토리 툴바