모바일에서 100vh를 적용할 때 생기는 문제 해결하기

문제가 생기는 이유

특히 싱글페이지로 웹을 개발하는 경우에 많이 만날 수 있는데, 100vh를 적용하면 모바일에 알맞지 않게 나오는 현상이 있다. 이 이유는 device의 높이를 잡을 때 주소창과 같은 dynamic한 요소들 때문에 생긴다.

해결책?

사실 인터넷을 검색하면, webkit fill이나 100%를 이용해서 해결하는 방법과 자바스크립트를 이용해서 vh를 지속적으로 변화시키는 방법이 있는데, 이 방법들은 너무 번거로워서 항상 귀찮았었는데, 요번에 검색을 하다가 새로운 방법을 찾게되었다.

dvh, svh

https://www.terluinwebdesign.nl/en/css/incoming-20-new-css-viewport-units-svh-lvh-dvh-svw-lvw-dvw/

Incoming: 20 new CSS viewport units: svh, lvh, dvh, svw, lvw, dvw, ...

dvh 혹은 svh를 상황에 맞게 사용하면 된다. 물론, 여기서는 dvh를 이용하는 것이 적당한 것 같지만.. 

 

마무리

글을 좀 더 신경써서 만들고 싶은데.. 새로운 회사에 오니 정신이 없어서 글을 쓸 시간이 없었던 것 같다. 흑..