새로운 뷰포트 단위 CSS svh, lvh, dvh

뷰포트를 설정할 때 너비/높이 기반으로 설정하는 것은 편리하고 유용한 방법입니다. 웹 페이지의 레이아웃이 다양한 기기의 화면 크기에 잘 맞게 조정되기를 원하는 웹 개발자들에게 뷰포트는 필수적인 도구입니다. 그렇지만, 모바일 브라우저에서는 스크롤 시 주소창이 숨겨지거나 나타나는 동작으로 인해 뷰포트 높이가 변할 수 있습니다. 가령 사파리/크롬(안드로이드)에서는 스크롤 시에 주소창 UI를 숨겨 레이아웃에 문제가 발생할 수 있습니다. 이러한 문제점을 기반으로 CSS 워킹 그룹에서 뷰포트에 대한 새로운 단위를 소개하였습니다. 1. 'svh' Small Viewport : 주소바 UI가 축소되지 않은 상태의 뷰포트 높이 2. 'lvh' Large Viewport : 주소바 UI가 축소된 상태의 뷰포트 높이 3. 'dvh' Dynamic Viewport : svh / lvh 사이에서 동적으로 변화 따라서 100dvh를 이용하면 최하단에 있는 버튼이 항상 표시되도록 설정 가능합니다. 그렇지만 동적 뷰포트 단위는 사용자가 위 또는 아래로 스크롤 하는 스타일을 브라우저에서 다시 계산하는 데 많은 작업이 필요하므로 페이지의 성능에 영향을 미칠 수 있습니다. 새로운 뷰포트 유닛은 IOS는 15.4부터, 안드로이드는 114부터 지원한다고 합니다. 앞으로 뷰포트에 대해 더욱 더 유연한 대응이 가능할 것 같습니다. https://ishadeed.com/article/new-viewport-units/