New Viewport Units - Ahmad Shadeed
Ahmad Shadeed Blog
새로운 뷰포트 단위 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/
다음 내용이 궁금하다면?
이미 회원이신가요?
2023년 7월 16일 오후 11:12
댓글 3
이전엔 innerheight로 바꿨었는데 편하겠네요.
함께 읽은 게시물
제가 리드하고 있는 조직(당근마켓 커뮤니티실)에서 백엔드 엔지니어를 채용 중이에요.
커뮤니티실에는 동네 이웃들의 이야기와 정보를 공유하는 동네생활팀, 이웃 간의 취미와 관심사를 연결하는 모임팀, 그리고 아파트 단지 생활을 더 편리하고 즐겁게 만들어 줄 단지팀이 있어요. 지금 내 동네에서 일어나고 있는 일들을 더 쉽게 즐기고 공유할 방법들을 찾는 일이라면 무엇이든 도전하여 실행에 옮겨요. 만드는 사람이 불편할수록 쓰는 사람은 편하다는 믿음으로 도전적인 문제를 풀어나갈 분과 함께하고자 해요.
... 더 보기혹시 Cursor 채팅만 사용하시나요? Agent 쓰는 방법!
Cursor와 함께라면, 더이상 에디터는 단순한 입력 도구가 아닌
... 더 보기📝무신사 글로벌 전략, 핵심만 쏙 정리했어요!
물
... 더 보기
