CSS 뷰포트 단위(dvh, dvw, svh, svw, lvh, lvw)의 필요성

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

프론트엔드 개발자 및 반응형 디자인을 다루는 웹 개발자

핵심 요약

• dvh, dvw 등 새로운 뷰포트 단위는 기존 vh, vw의 한계를 극복하기 위해 도입되었다.
• dvh(Device Height), svh(Screen Height) 등은 기기/스크린의 실제 크기를 기준으로 계산한다.
• 반응형 레이아웃 구축에 있어 정확한 뷰포트 크기 기반의 계산이 가능해졌으며, 모바일 최적화에 유리하다.

섹션별 세부 요약

1. 기존 뷰포트 단위의 한계

• vh, vw는 브라우저 창 크기를 기준으로 계산되며, 스크린의 실제 크기와 차이가 발생할 수 있다.
• 네비게이션 바, 상태표시줄 등 UI 요소가 뷰포트 계산에 포함되지 않아, 레이아웃 오류 발생 가능.
• 예: 100vh는 브라우저 창 높이를 기준으로 하되, 실제 스크린의 높이와 다를 수 있다.

2. 새로운 뷰포트 단위의 도입

• dvh(Device Height): 기기의 전체 높이를 기준으로 계산 (네비게이션 바/상태표시줄 포함).
• svh(Screen Height): 스크린의 높이를 기준으로 계산 (기기의 물리적 크기 기준).
• lvh(Large Viewport Height): 뷰포트의 높이를 기준으로 계산 (기기의 실제 크기와 동일).

결론

• dvh, svh 등 새로운 단위는 반응형 디자인의 정확성을 높이고, 모바일/데스크탑 환경에서 일관된 레이아웃 구현이 가능하다.
• CSS 레이아웃 개발 시 dvh, svh를 사용하여 브라우저 창과 스크린 크기 차이를 보완하는 것이 권장된다.