image vh, vw 속성

최근 대부분이 다 반응형 웹이다. 브라우저 창을 어떻게 움직이든 웹의 모든 내용이 그에 맞게 보여줘야 한다. 

하지만 reset.css에 border-box, margin, padding 값을 다 초기화하더라도 100% 차지 않는 경우가 있다. 

이럴 때 사용하는 속성이 image의 vh, vw 값이다. 

 

vh는 vertical height, vw는 vertical width의 의미로 브라우저 높이와 너비값에 맞춰진 단위이다. 

예를 들어 브라우저 창의 높이가 800px이라면 1vh는 8px이고, 너비가 600이라면 1vw는 6px이다. 

 

See the Pen VwvPZbv by howdy-mj (@howdy-mj) on CodePen.

코드를 쳐서 본인의 브라우저 창에서 확인하면 더 빠르게 이해가 갈거라 생각한다.