반응형 크기값 단위 / Viewport 단위 :vh, vw, vmin, vmax

유튜브에서 웹사이트 제작 튜토리얼을 따라하다가 vh를 처음 봤는데 신기해서 관련 내용을 찾아서 정리해보았다. 

우선 이 단위들에 전부 v(viewport)가 들어가므로 viewport 가 뭔지 알아보자! 

viewport 란 전체 웹페이지 가운데 브라우저 창에 보이는 영역을 말한다. 

창 크기를 조절해서 뷰포트를 크거나 작게 만들 수 있다.

1. vh(viewport height)

    이 단위는 뷰포트 높이값의 100분의 1을 의미하는 값이다.  

    (전체 높이: 1200px 이라면 1vh 는 1/100이니까 12px )

    그러니까 내가 유튭에서 본것처럼 height: 100vh; 라고 하면 화면에 가득차게 되는것이다.

    

2. vw(viewport width)

    vh 도 마찬가지. 얘는 뷰포트 너비값의 100분의 1을 의미하는 값! 
    (전체 너비:960px --> 1vh =  9.6px)

3. vmin (viewport minimum), vmax (viewport maximum)

    vmin 은 웹브라우저 너비와 높이 중에 더 작은 값을 기준으로 하여 100분의 1 한 값.

    vmax 는 웹브라우저 너비와 높이 중에 더 큰 값을 기준으로 하여 100분의 1한 값.

     

    브라우저 너비가 960px , 높이가 1200px 이라면 

    ----> 1vmin = 9.6px(960/100) , 1vmax = 12px(1200/100) 이다.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

*참고로 이 단위들은 아쉽지만 모든 브라우저에 적용되지는 않기때문에 호환성을 확인하고 사용해야한다는 주의사항이 있다!

 호환성 여부확인은 여기서 -->https://caniuse.com/#feat=viewport-units 

출처: https://beyou0123.tistory.com/20 [Rucy 의 개발 공부 블로그]