css 작업을 할때 화면을 가득 채우거나 할때 100vh를 사용하여 화면을 가득 채우곤 한다.
이번 프로젝트에서도 100vh를 사용하여 화면을 채웠는데 모바일 환경에서 테스트를 해보니 스크롤이 생기는 문제가 발생 했다.
모바일 환경에서만 저런 스크롤이 되는 문제가 생겨서 찾아보니 주소창때문에 생기는 문제였다.
100vh에 대한 문제를 인지하고 있었던지, 2022년도에 CSS에 새로운 Viewport 단위가 등장했다.
svw, svh 작은 뷰포트 각각의 너비 및 높이 1%.
lvw, lvh 큰 뷰포트 각각의 너비 및 높이 1%.
dvw, dvh 동적인 뷰포트 각각의 너비 및 높이 1%.
Short Viewport : 확장하기 위해 동적으로 확장되고 접히는 모든 UA 인터페이스(예: 주소 표시줄)를 가정한 뷰포트 크기
Large Viewport : 접기 위해 동적으로 확장 및 접히는 UA 인터페이스(예: 주소 표시줄)를 가정한 뷰포트 크기
Dynamic Viewport : 모든 UA 인터페이스를 동적으로 고려하는 뷰포트 크기입니다. 표시되는 UA 인터페이스 요소에 따라 자동으로 조정됩니다. 값은 100lvh(최대) 및 100svh(최소)의 내에 있습니다.
svh는 도구 영역(주소창)이 다 펼쳐져 있을 때의 크기이고, lvh는 도구 영역이 가려졌을 때의 크기, 그리고 dvh는 스크롤에 따라 변하는 영역까지 대응하는 크기이다.
따라서 기존 root container에 height : 100vh; 로 정의 되어있던 컨데이너의 높이를 100dvh로 변경 해주었더니 문제가 해결됬다.
dvh를 사용하게 되면 주소창이 열리고 닫힐 때마다 화면을 계속 다시 그리게 되기때문에 성능적으로의 문제점도 체크가 필요하다고 한다. 모든곳에서 꼭 사용해야하는게 아니라면 lvh, svh를 사용하면 될 것 같다.
