css 속성 dvh, svh, lvh 란?

1. dvh, svh, lvh?

=> 세 가지 모두 뷰포트의 높이를 측정하는 단위입니다.

기존의 vh는 브라우저의 뷰포트 높이를 기준으로 설정되지만, 모바일 환경에서는 동적으로 변할 수 있어서 정확한 높이를 계산하기 어렵다는 단점이 있습니다. 이를 해결하기 위해 dvh, svh, lvh가 등장했습니다.

 

먼저 dvh는 동적인 뷰포트 높이를 의미합니다. 사용자가 스크롤하거나 UI요소가 나타나거나 사라질 때마다 뷰포트가 변하는 경우, 이를 반영하여 실시간으로 계산된 값을 제공합니다.

 

svh는 뷰포트가 가장 작을 때의 높이를 의미합니다. 일반적으로 모바일 브라우저에서 주소창이 보이는 상태에서의 최소 높이를 기준으로 합니다.

 

lvh는 뷰포트가 가장 클 때의 높이를 기준으로 합니다. 모바일에서 주소창이 사라진 후 전체 화면이 확장된 상태의 최대 뷰포트 높이를 나타냅니다.

 

2. dvh는 가변적이니 svh보다 유용할 것 같은데?

=> dvh는 가변적이기 때문에 일반적으로 더 자연스러운 경험을 제공합니다. 하지만 svh가 필요한 특수 상황이 있습니다.

예를 들어 빠른 스크롤이나 주소창 토글이 자주 발생하는 경우 dvh는 주소창이 움직일 때마다 뷰포트 높이를 재계산하는데 이때 레이아웃이 미세하기 흔들려 보일 수 있습니다.

하지만 svh는 최소 높이로 고정되어 있기 때문에 이런 떨림 현상이 없습니다.

 

+) 성능이 중요한 상황에서도 svh가 유용할 수 있습니다.

dvh는 지속적으로 변하기 때문에 요소의 레이아웃을 변화시켜 리플로우를 자주 유발할 수 있습니다.