CSS
-
컬러 렌즈 개발 후기 EP. 1 : 그냥 100vh만으로는 충분치 않다..!프로젝트 개발 후기 2023. 8. 3. 21:11
사건의 발단 컬러 렌즈 프로젝트는 온전히 모바일에서만 동작하는 프로젝트이다. 따라서 모바일에 최적화된 UI를 만드는 것이 이번 프로젝트의 핵심적인 디자인 목표였는데, UI를 구성할 때, header부터 footer까지 딱 첫눈에 보이는 화면에 꽉 차도록 구현하고 싶었다. 하지만, 문제가 발생했다. 처음에 CSS 상에서 나는 단순하게 데스크탑 UI를 만들때처럼 전체 화면의 높이값을 100vh로 설정했다. 왜냐면, 데스크탑 상에서는 이렇게 진행해도 하단에 추가적인 상태바가 존재하지 않았기 때문에, 가려지는 부분이 없었기 때문이다. 하지만, 모바일에서 이러한 방식은 통하지 않았다. 왜냐하면, 모바일 버전에서 크롬 브라우저는 상/하단에 위치한 주소창 및 메뉴 바가 존재했고, 이때 화면을 100vh로 해버리면 하..