CSS Viewport 간단 정리

Viewport는 웹 브라우저에서 화면이 표시되는 영역의 크기를 의미한다. 즉 Viewport를 가득 채웠다는 말은 브라우저에서 페이지가 표시되는 화면 전체에 해당하는 크기라는 말이다.

간혹 CSS에서 특정 크기 단위로 vw, vh 가 사용되는데 이게 바로 Viewport를 기준으로 한 상대 크기 단위이다.

현대적인 웹 페이지는 웹 브라우저의 모든 영역을 사용하려 하기 때문에 상황에 따라서 상당히 편리한 기준이라 생각된다.

vw 는 뷰포트 기준으로 넓이(width)의 상대 비율을 의미하는 단위이고, 넓이의 1%를 의미하는 1vw 와 동일한 의미이기도 하다.

vh 는 뷰포트 기준으로 높이(height)의 상대 비율을 의미하는 단위이고, 뷰포트 높이의 1%에 해당하는 1vh 와 동일한 의미이기도 하다.

두 단위 모두 백분율로 쓴다. 즉 50vw 는 화면 절반(50%)의 넓이라는 의미다. 그리고 100vw 는 화면 전체(100%) 넓이이다. vh 의 경우도 동일하다.

vmax 는 vw 와 vh 중 크기가 큰 것의 비율을 표현하는 단위다. 즉 데스크탑이라면 보통 vmax 는 vw 를 기준으로 동작한다. 물론 디스플레이 모니터를 세로로 세웠다면 vh 이겠지만 말이다.

반대로 vmin 은 vw 와 vh 중 작은 것의 비율을 표현하는 단위다.

이 단위들도 역시 백분율 기준이다.

앞서 언급한 단위들의 크기는 웹 브라우저에서 주소줄이나 툴바와 같은 컨트롤러가 일시적으로 화면을 가리는 기능이 있는 경우 가려진 부분까지도 포함하는 크기라는 점에 주의하자.

PC용 브라우저는 이런 경우가 잘 없지만 모바일 브라우저는 화면을 스크롤하면 특정 UI 요소가 사라져서 페이지를 더 넓게 보여주기도 한다는 점을 생각해보자.

위에서 vw, vh 두 단위는 컨트롤러가 임시로 화면을 가리는 부분까지 포함하는 크기에서의 비율을 의미한다고 했는데 이 부분은 좀 모호함을 준다. 그래서 이 모호함을 없애기 위해 Small Viewport와 Large Viewport 단위가 제공된다.

Small Viewport는 svw, svh, svmax, svmin 등 s 머릿글자가 붙은 단위로 컨트롤러가 화면을 가릴 경우 이 컨트롤러가 가리는 부분을 제외한 크기에서의 비율을 의미하는 단위로 사용되는 개념이다.

Large Viewport는 lvw, lvh, lvmax, lvmin 등 l 머릿글자가 붙은 단위로 화면을 가리는 컨트롤러가 사라졌을 때의 크기에서의 비율을 의미하는 단위로 사용되는 개념이다.

Small과 Large Viewport를 굳이 가리고 싶지 않다면 Dynamic 즉 동적인 단위를 사용하는 방법이 있다.

dvw, dvh, dvmax, dvmin 처럼 머릿글자로 d 가 붙은 단위는 동적으로 동작한다. 즉 화면을 가리는 컨트롤러가 있을 경우 이 크기를 제외한 크기에서 비율로 지정할 수 있다. 만약 해당 컨트롤러가 화면에서 사라지면 전체 화면 크기에서 비율로 동작한다.

Viewport 단위에는 이 외에도 vi, vb 단위가 있다. 개인적으론 필요가 없는 것 같아서 정리하지는 않았지만 필요하다면 찾아보자.