vw와 vh 그리고 %

안녕하세요! 이번에는 CSS에서 자주 사용되는 단위인 vw, vh, 그리고 %에 대해 알아보겠습니다. 이 세 가지 단위는 반응형 웹 디자인에서 중요한 역할을 하는데, 각각 어떤 특징을 가지고 있고 언제 사용하는지에 대해 이해하면 더욱 효과적인 웹 디자인을 할 수 있습니다.

vw (Viewport Width)

vw는 뷰포트 너비에 상대적인 단위로, 현재 뷰포트의 너비에 대한 백분율로 계산됩니다. 예를 들어, 1vw는 현재 뷰포트 너비의 1%에 해당합니다. 이 단위는 뷰포트의 크기에 따라 상대적으로 사이즈를 조정할 수 있습니다. 반응형 웹 디자인에서 요소의 크기나 여백을 조정할 때 유용하게 사용됩니다.

vh (Viewport Height)

vh는 뷰포트 높이에 상대적인 단위로, 현재 뷰포트의 높이에 대한 백분율로 계산됩니다. 예를 들어, 1vh는 현재 뷰포트 높이의 1%에 해당합니다. vw와 마찬가지로, vh 단위도 반응형 웹 디자인에서 요소의 크기나 여백을 조정하는 데에 유용합니다.

% (Percentage)

% 단위는 부모 요소에 상대적인 백분율로 계산됩니다. 예를 들어, 부모 요소의 너비가 200px이고 자식 요소의 너비를 50%로 설정하면, 자식 요소의 너비는 100px가 됩니다. % 단위는 요소를 상대적으로 배치하거나 크기를 조정할 때 사용됩니다.

실습

결론

vw, vh, 그리고 %는 각각 뷰포트 너비, 뷰포트 높이, 그리고 부모 요소에 대한 상대적인 크기 조정에 사용되는 단위입니다. 각각의 특성을 이해하고 적절히 활용하면 반응형 웹 디자인을 통해 다양한 화면 크기에 대응하는 웹 페이지를 구현할 수 있습니다.