vw와 vh의 차이는?

vw와 vh의 차이는?

 

`vw`와 `vh`는 뷰포트의 너비와 높이를 기준으로 하는 상대적인 단위입니다. 뷰포트(Viewport)란 사용자가 웹 페이지를 볼 때 실제로 보이는 영역을 말합니다.

 

- `vw` (Viewport Width): 뷰포트의 가로 너비를 1로 기준으로 한 상대적인 단위입니다. 1vw는 뷰포트의 가로 너비의 1%에 해당합니다. 예를 들어, 뷰포트의 가로 너비가 1000px이라면 1vw는 10px이 됩니다.

 

- `vh` (Viewport Height): 뷰포트의 세로 높이를 1로 기준으로 한 상대적인 단위입니다. 1vh는 뷰포트의 세로 높이의 1%에 해당합니다. 예를 들어, 뷰포트의 세로 높이가 800px이라면 1vh는 8px이 됩니다.

 

이러한 상대적인 단위인 `vw`와 `vh`는 반응형 웹 디자인에서 뷰포트의 크기에 따라 요소들의 크기와 위치를 조정하는 데 유용하게 사용됩니다. 뷰포트의 크기가 변하면 `vw`와 `vh`로 설정된 요소들의 크기도 함께 변화하므로 자연스러운 반응형 레이아웃을 구성할 수 있습니다.