뷰포트 단위: vw, vh, dvh

뷰포트 단위는 브라우저 뷰포트의 크기, 즉 브라우저 창에서 보이는 영역을 기준으로 합니다. 사용 가능한 화면 공간에 따라 크기가 조정되는 레이아웃과 글자 스타일을 만들 수 있습니다.

1vw는 뷰포트 너비의 1%입니다. 100vw는 뷰포트 전체 너비를 채웁니다. 백분율 사용으로 인한 복잡함 없이 전체 너비 요소를 만들 때 유용합니다.

1vh는 뷰포트 높이의 1%입니다. 100vh는 뷰포트 전체 높이를 채웁니다. 전체 화면 영웅 섹션과 모달에 전통적으로 사용됩니다.

모바일 브라우저에서는 스크롤하는 동안 브라우저 인터페이스(주소 표시줄)가 나타나거나 사라지면서 뷰포트 높이가 변합니다. 100vh가 브라우저 인터페이스를 일관되지 않게 포함하거나 제외할 수 있어 콘텐츠 일부가 가려질 수 있습니다.

dvh(동적 뷰포트 높이)는 브라우저 인터페이스가 조정된 후 실제로 보이는 높이를 반영하도록 동적으로 업데이트됩니다. 모바일의 100vh 문제를 해결합니다.

CSS는 svh(작은 뷰포트 높이 — 항상 브라우저 인터페이스를 제외)와 lvh(큰 뷰포트 높이 — 인터페이스가 숨겨져 있다고 가정)도 제공합니다. 이를 통해 모바일 뷰포트 동작을 세밀하게 제어할 수 있습니다.

글꼴 크기에 vw를 사용하면 화면에 따라 크기가 조정되는 글자를 만들 수 있습니다:

100vw에는 데스크톱의 스크롤 막대 너비가 포함됩니다. 부주의하게 사용하면 가로 넘침이 발생합니다. 블록 요소에는 width: 100%를 우선 사용하고, 특정한 경우에만 vw를 사용하세요.

1vmin은 뷰포트의 더 작은 치수(너비 또는 높이)의 1%입니다. 1vmax는 더 큰 치수의 1%입니다. 방향이 바뀌어도 조정되는 정사각형 컨테이너에 유용합니다.

CSS는 높이 변형과 마찬가지로 너비에 사용할 svw, lvw, dvw를 제공합니다. 동적 변형(dvw, dvh)은 모바일에서 가장 유용합니다.

일반적인 뷰포트 단위 패턴:

• min-height: 100dvh — 모바일에서도 안전한 전체 화면 섹션
• height: 100svh — 고정 사용자 인터페이스 패널
• font-size: clamp(1rem, 2.5vw, 2rem) — 유동적인 제목
• width: min(800px, 90vw) — 안전한 너비의 컨테이너

vw와 vh는 각각 뷰포트 너비와 높이의 1%입니다. 모바일에서는 브라우저 인터페이스 때문에 vh를 신뢰하기 어렵습니다. 동적이고 모바일 화면에 정확한 전체 화면 레이아웃에는 dvh를 사용하세요. vmin과 vmax는 뷰포트의 더 작은 치수와 더 큰 치수에 따라 반응합니다.