본문 바로가기

coding/css

0608 / responsive web design (rwd) 반응형웹 (단위내용)

* vw 단위 : 브라우저의 가로값 전체를 기준으로 크기를 설정하는 단위, 실제로 가로 또는 세로,

    font-size 등 어떠한 크기에 적용하든 관계가 없다.

 

  * vh 단위 : 브라우저의 세로값 전체를 기준으로 실제 해당요소의

    가로, 세로, font-size 등 단위가 설정되는 것은 모두 적용된다.

 

  * 그래서 vw/vh 단위를 사용하면, 부모크기의 기준으로 보는 것이 아니라, 브라우저 크기를 기준으로 한다.

  * 단, 스크롤바의 영역 또한 포함되기 때문

    계산방법 : 요소의 크기 / 기준의 크기 (가로전체 또는 세로전체 ) * 100 = 값(vw)vh