[css 단위] dvh, svh, lvh (모바일 주소 표시줄 영역 대응)

뷰포트 단위로 높이 값을 주고 싶을 때 vh 단위를 사용한다.

2020.04.22 - [Frontend/CSS] - [css 단위] vw, vh, vmin, vmax (Viewport 단위)

 

그치만 모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도

화면이 짤리는 경우가 발생할 수 있다.

이미지 출처 : https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 

그럴 때 해결할 수 있는 방법 중 하나는 

div {height:100vh; height:-webkit-fill-available;}

위와 같이 -webkit-fill-available 값을 height값에 적용하는 방법이 있는데

이 방법은 ios에서만 적용이 되고 안드로이드에서는 적용이 안되는 문제가 있기 때문에 권장하진 않는다.

 

이미지 출처 : https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

 

1. dvh (Dynamic Viewport Height)

dvh는 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이

현재 보여지는 뷰포트 높이를 동적으로 가져온다. 

 

위 이미지의 예시 처럼 100dvh는 주소표시줄의 유무에 따라 값이 달라진다.

div {height:100dvh;}

 

2. svh (Short Viewport Height)

svh는 사용자 화면 기준으로 가장 짧은 뷰포트 값을 가져온다.

주소 표시줄이 없어져도 기존 주소표시줄의 높이 값을 뺀 나머지 값을 가져온다.

div {height:100svh;}

 

3. lvh (Large Viewport Height)

lvh는 svh와는 반대로 사용자 화면 기준으로 가장 긴 뷰표트 값을 가져온다.

주소 표시줄이 있더라도 주소 표시줄이 없을 때의 총 화면의 길이를 가져온다.

div {height:100lvh;}

 

 

위 3가지의 단위를 볼 때

주소 표시줄의 유무에 따라 뷰포트 높이가 가변적으로 변할 때를 고려해서

dvh를 사용하는 것이 가장 무난하고 우리가 원하는 화면을 보여주는데에 좋은 선택이 될 것이다.

 

 

*dvh, svh, lvh는 브라우저(pc, mobile) 하위 버전에서는 제공이 되지 않기 때문에 작업 환경을 고려한 적용이 필요하다.

 

 

---

참고

https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8

https://blanche-toile.com/web/large-small-and-dynamic-viewport-units

https://www.w3.org/TR/css-values-4/#viewport-relative-u'nits