,



최근들어 css의 vw, vh 단위를 쓸 일이 많아졌습니다.


이 단위를 쓸 수 있다는 것을 처음 알게 된 것은, 책 '워드프레스5' 덕분이었는데요, 기술서적으로써는 역대급 책이라고 할 수 있는 강력추천하는 책입니다.




물론 body 또는 body 바로 하위 요소에서 % 단위를 쓰면 vw, vh로 활용할 수 있는 부분의 상당수를 해결할 수 있습니다.


하지만 이미 px, em 단위 등으로 넓이나 높이 등을 조절한 요소의 하위 요소에서 브라우저 넓이나 높이에 따라 자동적으로 조절되는 값을 사용해야 할 때는 %단위를 쓰면 아주 난감해집니다. 잘 조절되지 않으니까요.


이럴 때 vw, vh 단위를 쓰면 아주 편해집니다.




상위 요소의 넓이나 높이에 관계없이, 100vw는 브라우저 화면의 넓이, 100vh는 브라우저 화면의 높이를 뜻합니다.


그럼 50vw는 브라우저 화면 넓이의 절반을 뜻하겠죠.


일반적으로 100vw, 100vh, 50vw 단위 정도가 실전에서 유용합니다.



지금 작업중인 사이트 중 하나입니다.


완성된 사이트가 아니므로 주소를 비공개 처리했습니다.


이 사이트를 보면 vw 단위가 어떻게 쓰이는 지 볼 수 있습니다.


위 캡쳐의 대부분의 공간을 차지하는 슬라이더는 브라우저 사이즈에 따라 슬라이더의 크기가 변하는, 화면 전체 넓이를 차지하는 풀사이즈 슬라이더입니다.


swiper-slide 플러그인의 일종으로, xe에서 기본적으로 내장하고 있는 슬라이더입니다.



이 슬라이더의 height는 고정값입니다.


게다가 꽤 복잡한 플러그인이라서 이 값을 찾아서 바꾸기가 쉽지 않아요.


이런 경우 잘못하면 슬라이더에 들어가는 이미지가 짤리게 됩니다.


이를 방지하기 위해, 슬라이더의 화면 비율에 맞게 height를 정해주기 위해 다음과 같은 방법이 유용합니다.



height를 calc 값으로 화면 전체 넓이 * (이미지 높이 / 이미지 넓이) 값을 주고 !important 속성을 주면 플러그인에서 삽입되는 height값을 무시하고, 화면 전체 넓이에 따라 변하는, 이미지 크기에 비례하는 height 값을 가질 수 있습니다.


height:calc(100vw*(588/1600)) !important;




위 사이트에는 vw 단위를 사용하는 또다른 예가 있습니다.


메인페이지 슬라이더가 아닌 서브페이지에서 볼 수 있는데요



서브페이지의 왼쪽 푸른색 배경을 준 공간이 vw 단위를 준 부분입니다.


float 효과의 부모 div(당연히 overflow:hidden; 속성이 들어가 있습니다) 하위에 배경으로 삽입할 요소를 만든 다음 position:absolute로 띄우고 top:0, bottom:0 값을 동시에 주면 서브페이지에 height에 맞춰져서 꽉 차는 효과를 줄 수 있습니다. 그 다음 z-index 값을 겹쳐서 나타나는 서브메뉴 페이지보다 작게 주면 배경으로 보이는 것과 비슷한 효과를 냅니다.


여기서 주목해 볼 값은 left 값과 height 값입니다.



left:calc((50vw - 600px) * (-1));

width:calc(50vw - 600px + 260px);



값이 위와 같이 들어가야 하는 이유는 첫째로는 브라우저 사이즈에 자동으로 조절되는 배경을 만들기 위해서이며, 둘째로는 부모 요소가 정해진 width값과 margin:0 auto; 기법으로 중앙에 자동정렬되는 값을 가지면서 형제 요소의 왼쪽 메뉴의 width가 260px이기 때문입니다.




물론 위의 요소 중 50vw를 이용한 요소와 같은 브라우저 크기에 따라 자동조절되는 배경색을 넣는 방법은 저 방법 뿐만은 아닙니다. vw, vh 요소는 css3와 지원율이 비슷해서, 익스플로러 구버전 등은 이 값을 지원하지 않을 가능성이 높습니다.


익스플로러 구버전에서 배경색을 넣으면서 활용할 수 있는 방법은 저번에 블로그 레이아웃과 관련된 글에서 이야기한 적이 있습니다. 꽤 오래된 포스팅이군요.


http://blog.koyeseul.net/340


하지만 문제는 위 사이트의 경우 배경색만을 넣는게 최종이 아니라, 배경색이 들어갈 부분에 이미지 배경이 들어가는 것이 최종 결과물이라는 사실입니다.


그런 경우 위의 링크된 글에서 기술된 방법은 활용할 수 없습니다.


그래서 그런 경우 vw를 활용한 값을 사용하는 것이 최선입니다.




물론 vw, vh를 이용한 값이 이렇게 좋은 예만 있는 것은 아닙니다.


vw, vh 값에는 꽤 치명적인 단점이 있는데, 몇일 후의 포스팅으로 그걸 보여드릴 것입니다.


하지만 적절하게만 사용한다면, 아주 유용하게 써먹을 수 있습니다.


특히 css3 속성과 함께 활용한다면, jQuery로도 구현하기 쉽지 않은 효과들을 낼 수 있다는 것이 큰 장점입니다.





댓글을 달아 주세요

  1. 달빛천사7 2016.03.15 10:19 신고  댓글주소  수정/삭제  댓글쓰기

    본격적인 봄이 시작이 되나 봅니다.
    장기렌트카 포스팅하다가 방문했어요.

티스토리 툴바