새로운 CSS Viewport Unit : svh, lvh, dvh

(ishadeed.com)

21P by xguru 2023-07-14 | favorite | 댓글 4개

뷰포트 너비/높이 기반으로 설정하는 것은 편하지만, vh 는 모바일에서 버그가 많음
→ 뷰포트 사이즈가 브라우저의 주소바 UI를 포함하지 않기 때문
100vh 는 모바일에서 전체 뷰포트 높이 만큼이 되어야 하지만, 스크롤시에 UI를 숨기는 사파리/크롬(안드로이드) 에서는 문제가 발생
그래서 CSS 워킹 그룹이 새로운 단위를 소개 svh, lvh, dvh
- 'svh' Small Viewport : 주소바 UI가 축소되지 않은 상태의 뷰포트 높이
- 'lvh' Large Viewport : 주소바 UI가 축소된 상태의 뷰포트 높이
- 'dvh' Dynamic Viewport : svh / lvh 사이에서 동적으로 변화
100dvh 를 이용하면 최하단에 있는 버튼이 항상 표시되도록 설정 가능
- 하지만 성능 문제가 있을수 있으니 조심해야함