[css] 새로운 뷰포트 사이즈 단위 이해하기

vw,vh 사용시 모바일 주소 표시줄 영역에 의해서 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),dvw

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

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

 

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

div {height:100dvh;}

 

2. svh (Short Viewport Height),svw

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

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

div {height:100svh;}

 

3. lvh (Large Viewport Height),lvw

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

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

div {height:100lvh;}

 

 

위 3가지의 단위를 볼 때

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

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

 

 

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

참고자료: https://yozm.blog/css-new-viewport-svh-etc