모바일에서의 100vh의 문제를 개선할 수 있는 단위들인 dvh, lvh, svh를 알아보자

보통 모바일 반응형 작업 많이 할 때 vw, vh를 많이 사용해오곤 했다.

특히 vh는 %와 달리 뷰포트를 기준으로 수치를 제공한다.

 

이번 실무에서 vh를 사용했었는데 대화창(다이얼로그형식)이 사이즈가 틀어진다는 이슈가 있었다.

 

height:100%, height:100vh

막간을 이용해서,  height:100%이라는 건 부모의 높이값을 100% 채우겠다는 것 이다.

부모요소의 값에 의존하지 않고 값을 설정하고 싶을땐 height:100vh를 사용하면 된다.

 

 

모바일 브라우저에서 height:100vh의 문제점

그런데 요즘, 모바일 브라우저를 보면 스크롤을 내릴때 주소 표시줄이 작아지거나,

감춰지는 쪽으로 추세가 기울어져서 높이값이 유동적으로 변하게 되었다. vh가 사용하기 애매해졌다는 것.

 

heoght:100vh를 사용했을 때 사이트가 로딩 된 직후에는 주소 표시줄이 감춰지지 않는다.

따라서 하단의 내용이 약간 짤린 것 처럼 보인다.

 

이것을 바로 잡기 위해 자바스크립트로 제어하곤 했는데 이를 대신할 만한 단위가 있다.

 

 

dvh, lvh, svh의 등장

위 내용을 대신할 수 있는 수치들은 dvh, lvh, svh 다음과 같다. 모바일 브라우저 호환성이 좋아서 사파리를 포함한 대부분의 브라우저에서 동작이 가능하다.

 

https://caniuse.com/mdn-css_types_length_viewport_percentage_units_dynamic

types: `<length>`: `dvb`, `dvh`, `dvi`, `dvmax`, `dvmin`, `dvw` units | Can I use... Support tables for HTML5, CSS3, etc

 

 

각 수치들의 의미는 다음과 같다.

 

svh ( Small Viewport Height )

주소표시줄이 표시되어 있을 때를 기준으로 하는 최소 단위이다.

 

lvh ( Large Viewport Height )

주소표시줄이 감춰져 있을 때 나타나지는 높이 단위를 말한다.

 

dvh ( Dynamic Viewport Height )

주소표시줄 여부에 따라서 유동적으로 단위가 변한다.

 

---

 

dvh가 유동적이라서 좋긴 하지만 여기저기 사용하게 되면 화면을 계속 다시 그리게 되기때문에 성능적으로의 문제점도 체크가 필요하다. 모든곳에서 꼭 사용해야하는게 아니라면 lvh, svh를 사용하면 될 것 이다.

 

 

높이와 같이 넓이에도 새로운 단위들이 vw, dvw, svw, lvw 다음과 같지만 아직 한번도 써보진 않았다.

 

 

 

https://www.youtube.com/watch?v=pOuE9sgK9jY 

 

단위 관련해서 위 영상이 많이 도움되었는데 영상을 보면 한번에 이해가 될 것이다.