[TIL] *vh unit (dvh, lvh, svh)

TIL

rubato.dev 2025. 7. 30. 11:52

1vh(viewport height)는 뷰포트의 초기 컨테이닝 블록 (Initial Containing Block)의 1%를 의미한다.

뷰포트란 사용자가 서비스를 볼 수 있는 영역을 의미한다.

개발자들은 화면에 가득찬 서비스를 보여주기 위해 100vh를 사용했다.

하지만 모바일 브라우저가 핸드폰 화면 공간을 최대화하기 위해 트릭을 사용하면서 애매하게 되었다.

그 트릭은 "스크롤을 할 때 주소표시줄을 감추는 것"이다.

이 문제를 해결하기 위해 새로운 css unit이 나왔다.

Large Viewport Units

lvh, lvw

브라우저 UI가 가장 작고 웹사이트 콘텐츠가 가장 클 때의 크기

-> 주소표시줄이 감춰져 있을 때를 기준

Small Viewport Units

svh, svw

브라우저 UI가 가장 크고 웹사이트 콘텐츠가 가장 작을 때의 크기

-> 주소표시줄이 노출되어 있을 때를 기준

Dynamic Viewport Units

dvh, dvw

동적으로 확장 및 축소 가능한 모든 UA 인터페이스를 고려하여 뷰포트 크기를 조정

-> 주소표시줄 표시 여부에 따라 단위가 변함.

Dynamic Viewport Unit을 사용하면 사용자가 페이지를 스크롤 하는 동안 콘텐츠 크기가 조정될 수 있기 때문에 성능적으로 비용이 많이 들 수 있다.

*vh들은 모바일 브라우저 UI (주소창, 툴바)가 보였다 사라지는 문제를 해결하기 위해 나온 단위들이라, 어떤 사용자 경험을 주고 싶으냐에 따라 선택이 달라진다.

lvh

svh