모바일에서 100vh가 원하는대로 작동하지 않는다면? (feat. dvh, svh, lvh)

height가 전체를 차지하는 화면을 개발할 때 100vh를 사용합니다. 하지만 모바일에서 해당 화면을 보면 주소창 때문에 잘려 보여 곤란한 상황이 생깁니다. vh 단위는 주소창이 없는 화면을 기준으로 설정되어 있어 이와 같은 이슈가 발생하게 됩니다. 스크립트로 해결할 수도 있지만 css 단위로 깔끔하게 처리하는 방법을 알아보겠습니다.

 

vh?

css 단위 중 vh는 viewport height로 스크린의 가시 height를 백분율로 나타냅니다. 현재 스크린의 height가 800px일 경우 1vh는 8px이 되며 10vh는 80px이 됩니다. 이처럼 vh는 백분율로 나타내어 사용합니다. 또한 vh 단위는 width에서도 사용이 가능합니다.

 

그러면 100%와 100vh의 차이가 무엇인지 궁금증을 가질 수 있습니다. % 단위는 사용자의 스크린 기준이 아닌 요소의 부모 요소의 크기가 기준이며 부모 요소의 크기의 백분율로 나타냅니다. 그래서 상황에 맞게 두 단위를 구분해서 사용해야 됩니다.

 

dvh, svh, lvh

vh 단위를 사용하면서 생기는 이슈 때문에 dvh, svh, lvh 단위를 찾게 되었습니다.

dvh는 dynamic viewport height로 주소창에 따라 동적으로 변하는 단위입니다. 주소창의 유무에 따라 값이 변하게 되므로 사용자는 주소창의 유무와 상관없이 스크린 전체를 볼 수 있지만 스크롤 도중에 주소창의 유무에 따라 요소의 크기가 변하고 이에 따라 스크린을 다시 그리면서 성능에 이슈가 발생할 수 있습니다.

 

svh는 short viewport height로 주소창이 포함된 스크린 기준으로 전체 가시 크기가 기준인 단위입니다.

 

lvh는 long viewport height로 주소창이 제외된 스크린 기준으로 전체 가시 크기가 기준인 단위입니다.

 

다음 이미지를 보면 좀 더 차이를 명확하게 볼 수 있습니다.

svh, lvh, dvh (출처: https://blanche-toile.com/web/large-small-and-dynamic-viewport-units)

 

마무리

dvh, svh, lvh는 21년도에 나온 단위로 브라우저 호환성을 고려하게 됩니다. dvh, svh, lvh 사용 시 Can I use?에서 확인 후 개발하거나 vh 단위와 같이 사용하여 구 브라우저에 대비하는 것도 좋겠습니다.

.root {
  height: 100vh;
  height: 100dvh;
}

 

CSS에서 지속적으로 새로운 것들이 나오는 만큼 CSS에 대한 공부도 꾸준히 해야겠습니다.

 

---

참고자료

https://stackoverflow.com/questions/37112218/css3-100vh-not-constant-in-mobile-browser

https://mytory.net/archives/14685