새로운 CSS 뷰포트 단위: svh, lvh, dvh, svw, lvw, dvw 이해하기

웹 개발에서 뷰포트 단위는 매우 중요한 역할을 합니다. 그러나 기존의 vh와 vw 단위는 모바일 브라우저의 UI 변경에 따른 문제를 해결하지 못했습니다. 이런 문제를 해결하기 위해 2022년에 새롭게 도입된 CSS 뷰포트 단위인 svh, lvh, dvh, svw, lvw, dvw에 대해 알아보겠습니다.

기존의 뷰포트 단위: vh와 vw

vh 단위는 뷰포트의 높이를 기준으로 하며, vw 단위는 뷰포트의 너비를 기준으로 합니다. 이들 단위는 웹페이지의 레이아웃을 조절하는 데 매우 유용하지만, 모바일 브라우저에서는 문제가 발생합니다.

.section {
  height: 100vh;
}

예를 들어, 위와 같이 CSS를 작성하면 섹션의 높이가 뷰포트의 높이와 동일하게 설정됩니다. 그러나 모바일 브라우저에서는 사용자가 스크롤할 때 브라우저의 UI가 변경되면서 vh의 값이 변하게 됩니다. 이로 인해 레이아웃이 예상치 못하게 변경되는 문제가 발생합니다.

svh와 svw (Small Viewport Units)

svh와 svw 단위는 브라우저 UI가 최대로 확장되어 있을 때의 뷰포트 크기를 기준으로 합니다. 예를 들어, 모바일 브라우저에서 주소 표시줄이 보이는 상태를 생각해볼 수 있습니다.

.section {
  height: 100svh; /* 브라우저 UI가 최대로 확장되어 있을 때의 뷰포트 높이 */
  width: 100svw; /* 브라우저 UI가 최대로 확장되어 있을 때의 뷰포트 너비 */
}

lvh와 lvw (Large Viewport Units)

lvh와 lvw 단위는 브라우저 UI가 최소로 축소되어 있을 때의 뷰포트 크기를 기준으로 합니다. 예를 들어, 모바일 브라우저에서 사용자가 스크롤하여 주소 표시줄이 사라진 상태를 생각해볼 수 있습니다.

.section {
  height: 100lvh; /* 브라우저 UI가 최소로 축소되어 있을 때의 뷰포트 높이 */
  width: 100lvw; /* 브라우저 UI가 최소로 축소되어 있을 때의 뷰포트 너비 */
}

dvh와 dvw (Dynamic Viewport Units)

dvh와 dvw 단위는 사용자가 스크롤하면서 뷰포트 크기가 동적으로 변화하는 경우를 대비한 단위입니다. 이 단위는 브라우저 UI의 변화에 따라 실시간으로 업데이트됩니다.

.section {
  height: 100dvh; /* 현재 뷰포트 높이 */
  width: 100dvw; /* 현재 뷰포트 너비 */
}

이렇게 새로운 뷰포트 단위를 사용하면 브라우저 UI의 변화에 따른 레이아웃 변화를 더욱 정확하게 제어할 수 있습니다. 하지만 아직 모든 브라우저에서 지원하지 않는 단위도 있으므로, 사용 전에 반드시 호환성을 확인해야 합니다.