뷰포트 높이를 측정하는 새로운 단위
기존 vh(viewport height)는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에선 주소창이나 네비게이션 바의 유무에 따라 동적으로 변할 수 있어 정확한 높이를 계산하기 어렵다는 단점이 있음
dvh(Dynamic Viewport Height)는 동적인 뷰포트 높이
사용자가 스크롤하거나 모바일 주소창과 같은 UI 요소가 나타나거나 사라질 때마다 뷰포트의 높이가 변하는 경우, 이를 반영하여 실시간으로 계산된 값을 제공
ex- 모바일에서 주소창이 사라지면 뷰포트의 높이가 증가하는데, 이 변화를 즉시 반영하는 수치
svh(Small Viewport Height)는 뷰포트가 가장 작을 때의 높이
일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준
따라서 svh를 사용시, 화면의 공간이 최대로 제한되는 시나리오에서도 UI가 깨지지 않도록 레이아웃을 설계할 수 있음
lvh(Large Viewport Height)는 반대로 뷰포트가 가장 클 때의 높이를 기준
모바일에서 주소창이 사라진 후 전체 화면이 확장된 상태의 최대 뷰포트 높이를 나타냄
이를 활용하면 전체 화면을 적극적으로 활용하는 UI를 구성할 수 있음
dvh가 가변적이라 svh보다 유용? 꼭 svh를 사용하는 케이스?
dvh가 가변적이라 더 자연스러운 경험 제공
but svh가 필요한 특수 케이스가 있음
ex- 빠른 스크롤, 주소창 토글이 자주 발생하는 상황
이 경우 dvh는 주소창이 움직일 때마다 높이를 재계산하는데, 이때 레이아웃이 미세하게 흔들려보일 수 있음
but
svh는 최소 높이로 고정이 되어 있어 이런 떨림 현상이 없음
성능이 중요한 상황에도 svh가 유용하게 사용될 수 있음
dvh는 지속적 변화가 있어 요소의 레이아웃을 변하ㅗ시켜 리플로우를 자주 유발할 수 있음
모바일과 같이 성능 차이가 민감하게 체감되는 환경에서 부드러운 사용자 경험 제공하기 위해선 svh가 더 안정적임
