[CSS] 단위 - vm, vh, vmin, vmax

vw(viewport width) : 뷰포트 폭 (1vw : 뷰포트 폭의 1%) (100vw : 뷰포트 폭의 100%)

vh(viewport height) : 뷰포트 높이

1vmin : 1vw 혹은 1vh 중 작은값을 기준으로

1vmax : 1vw 혹은 1vh 중 큰값을 기준으로 

 

1vw

vw는 viewport width의 약자입니다.

 

vw를 이해하기 위해 %와 먼저 비교해보겠습니다. p태그 스타일에 width:100%; 로 지정하면 부모인 body가 만들어준 공간의 100%를 사용한다는 뜻입니다. 여기서 body는 고유의 margin값을 가지고 있으므로 이 margin값을 일부러 없애지 않는다면 양 옆에 살짝 공간(body의 margin값)이 있을 것입니다.

 

하지만, vw는 부모가 만들어준 공간을 고려하지 않고, 뷰포트(사용자의 브라우저 화면)에 따릅니다. 즉, width:100vw; 로 지정하면 브라우저 공간 양 끝에서 끝까지 모두를 지정한 것과 같습니다. 50vw라면 브라우저의 끝에서 끝까지 중 딱 절반이겠죠. 그래서 width:100vw; 로 지정하면 브라우저창을 최대로 키워도 밑에 스크롤이 생기는 것을 확인할 수 있습니다. width:100%; 로 했을 때는 스크롤이 생기지 않는데 반해서요. vw는 브라우저의 너비를 다 씁니다.

 

정리하면, 100%로 지정했을 때는 content 너비가 1440px이지만, 100vw로 지정했을 때는 content 너비가 1456px로 16px(즉 양 옆의 8px의 margin값)만큼 너비를 더 차지합니다.

 

%는 부모가 만들어준 공간 안에서의 너비 높이 비율

vw와 vh는 뷰포트(브라우저에 보이는 화면) 대비해서의 너비 높이 비율