[CSS] dvh, svh, lvh (모바일 주소 표시줄 영역) 이란? [9/7 study]

 

 

dvh, svh, lvh (모바일 주소 표시줄 영역) 이란?

 

 

 

 

프로젝트를 하면서 팀원 중 한분의 코드에서 dvh라는 속성을 처음보고 포스팅 하게 되었습니다!

 

모바일 주소 표시줄 영역에 의해서 100vh로 높이 값을 설정했다고 하더라도 화면이 짤리는 경우가 발생합니다.

 

해결방법으로

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

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

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

 

1. svh (short viewport height)

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

 

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

 

2. lvh (large viewport height)

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

 

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

 

 

3. dvh (dynamic viewport height)

dvh는 주소 표시줄이 스크롤을 통해 축소가 되건 노출이 되고 있건 상관 없이 현재 보여지는 뷰포트 높이를 동적으로 가져옵니다.

 

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

 

 

결론

 

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

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

 

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