[css]모바일 대응 시 검색창이 덮는 문제 해결책 -> dvh

반 계절 전 프로젝트 QA가 진행될 때 애를 먹었던 적이 있었다. 아이폰 테스트폰 중 사파리 검색창이 위로 올라와 있는 것을 발견하였는데 사이트의 상단을 꽤나 많이 덮어버렸던 것이었다. 모달로 작업된 영역이었고 도대체 이걸 어떻게 해결해야하나 많은 시간 고민했었다.
다행스럽게도 개발팀을 제외하고도 다른 팀의 아이폰 속 사파리의 검색창은 모두 하단으로 내려와 있었고, 우리가 발견한 단 하나의 테스트 폰만 상단으로 올라와 있었는데, 알고보니 그 케이스는 상단 설정으로 하여 위로 올라와 있었단 것이었다.
여기서 설정이 가능하다는 사실을 바탕으로 불가피하게 설정 혹은 아주 먼 옛날 아이폰 버전을 사용하는 소수까지는 안고 갈 수 없다는 결론을 내렸다.

그런데 오늘 강의를 듣던 와중 dvh 단위를 알게 되었다.
지난 프로젝트의 아쉬움이었을까 dvh 단위의 역할을 알게 된 순간 아! 하고 탄성이 절로 나왔다.
dvh는 모바일같은 화면에서 뷰포트를 읽어 height를 잡아주는 값이다. mdn에 나와있는 바로는 dvh, dvw는 동적인 뷰포트 각각의 너비 및 높이 1%.라고 나와있다.

예를들어 모바일에서 사파리를 통해 스크롤을 내릴 때 주소창이 사라지고, 다시 스크롤을 올릴 때 주소창이 뜨게 될 때 뷰포트는 스크롤 방향에 따라 동적으로 움직인다. 그 값을 dvh가 잡아챌 수 있다는 것. 아무래도 아주 유용하게 사용할 것 같다.