[CSS] vw, vh란?

☺️ vw와 vh란?

CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다.

 

하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다.

 

예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다.

 

%말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자.

 

 

 

v, 뷰포트를 기준으로 하다.

이들의 풀네임은 Viewport Width / Viewport Height 이다.

이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다.

뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다.

 

1vw = 뷰포트 너비의 1%로 계산된다.

그렇다면 500px 너비인 뷰포트에서 1vw의 값은 5px이다.

10vw로 지정한다면 50px로 계산될 것이다. 이때 사용자가 브라우저를 잡고 쭉 늘려서 윈도우 너비가 850px이 됐다고 하자.

그럼 브라우저가 알아서 1vw의 값을 다시 계산해준다.

따로 미디어 쿼리를 써주지 않았음에도 불구하고 1vw = 8.5px / 10vw = 85px으로 값이 커지게 된다.

즉, 저 속성 하나만 써도 브라우저 크기에 반응해 알아서 바뀌게 할 수 있다는 것이다.

 

 

vw와 vh 활용법

이들 단위는 뷰포트 영역 전체를 차지하게 하거나, 그 일부분만 차지하게 하는 데 유용하게 쓸 수 있습니다.

당장 100vw, 100vh만 써도 너비와 높이를 꽉꽉 채울 수 있어요!

사용자가 브라우저 창 크기를 바꾸거나 모바일 화면을 회전시켜도 상관이 없죠.

 

또, 이들을 calc()와 결합하면 좋은 시너지를 낼 수 있습니다. 헤더영역 높이가 50px이고 컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체'로 만들고 싶다면, height: calc(100vh - 50px);을 지정해주면 됩니다.

 

음, height: 100%로 지정해도 100vh처럼 전체 높이를 차지할 수 있지 않나요? 라는 생각이 문득 드네요.

맞습니다. 하지만 %는 부모 요소를 기준으로 계산한다는 점에서 차이가 있습니다.

 

예를 들어, 뷰포트 높이를 꽉 채우는 섹션이 있는 페이지를 만든다고 해봅시다. 이때, height: 100%를 지정하려면 부모에게도 height: 100%을 지정해야 합니다. 그래야 상속받아서 쓸 수 있어요.

반면, height: 100vh를 지정하면 부모의 높이에 무관하게 전체 영역을 차지합니다. vh는 부모가 아닌, 뷰포트를 기준으로 한 단위니까요!

 

 

% 단위일 때

 

vh 단위일 때

 

vw와 vh는 너비나 높이값에만 쓸 수 있는 건 아닙니다. 폰트 사이즈나 여백 등에 다양한 속성에 쓸 수 있어요.

즉, font-size: 10vw;와 같이 지정하면 뷰포트가 넓어지면 폰트 크기도 그에 맞춰 커지게 되겠죠.이런 식으로 모바일 반응형에 유용하게 쓸 수 있는 단위입니다.

 

 

 

참고: https://nykim.work/85