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
- 화면에 스크롤이 생기더라도 UI 잘림 없이 최대 화면 크기 기준으로 디자인하고 싶을 때
- 초기 로딩 후 화면이 확장되는걸 고려할 필요가 없을 때
- 풀 스크린 모드에 맞춘 UI
svh
- 화면 잘림이 절대 일어나면 안되는 레이아웃
- 버튼, 폼 같은 접근성이 중요한 UI
- 모바일 첫 화면에서 주소창 때문에 가려지면 안되는 경우