Safari의 100vh 문제
Safari의 100vh 문제 100vh? CSS의 vh 단위는 1% of Viewport Height 이다. vw 는 1% of Viewport Width 이고. 나는 이 단위를 알게 된 시점부터 지금까지 꾸준히 즐겨 사용하고 있었다. 이전에는 html, body 에 width, height 를 각각 100%로 지정하고, 하위 엘리먼트에서 또 적용하고 하는 식으로 페이지가 뷰포트에 꽉 차게 구현해야 했었지만 1 이 단위가 나오고 나서는 간단하게 뷰포트에 꽉 채울거면 너비는 100vw 로, 높이는 100vh 로 지정하면 됐기 때문이다. vw, vh가 만능은 아니다. 하지만 위 이야기는 데스크탑 버전의 웹 페이지를 작업할 때만 해당되는 말이다. 반응형 웹이랍시고 데스크탑과 모바일 모두에서 예쁘게 잘 보여야 제대로 만들어진 페이지란 소리를 듣는 요즘 세상에서는 vw, vh 도 만능은 아니다. 어디까지가 Viewport인가 그 이유는 바로 모바일 브라우저들의 지랄맞은 Address Bar(또는 Navigation Bar) 때문이다. 화면 크기가 제한적인 모바일 브라우저의 특성 때문에 모바일 브라우저의 주소창 영역은 그 높이가 일정하지 않다. 크롬, 사파리, 오페라, 웨일, 파이어폭스, 키위 등 브라우저마다 높이가 다른 것 은 둘째 치더라도, 하나의 브라우저에서도 주소창이 스크롤 중에 위나 아래로 쏙 들어가버리는 경우 가 생기기 때문에 항상 높이가 변한다고 봐도 무방하다. 문제는, 이런 상황에서 vh 유닛을 사용할 때 발생한다. Viewport는 Address Bar 영역도 포함한다. 이게 정말 사람을 미치게 하는 부분이다. 데스크탑용 브라우저에서 뷰포트라 하면 주소창 및 메뉴 영역을 제외한, 실제로 페이지가 렌더링되는 부분을 말한다. 즉 document 가 렌더링될 수 있는 영역만을 뷰포트라고 정의하고 이를 통해 직관적으로 vw, vh 를 사용할 수 있다. 그러나 모바일은 다르다. 일부 모바일 브라우저...
