• 목록

svh는 Small Viewport Height의 약자로, CSS에서 사용하는 단위입니다.
2023년 이후 CSS에 도입된 "동적 뷰포트 단위(Dynamic Viewport Units)" 중 하나입니다.

📌 svh란?
1svh는 **작은 뷰포트 높이(Small Viewport Height)의 1%**를 의미합니다.
모바일 브라우저에서 주소창(탭 바 등)이 표시된 상태의 화면 높이 기준입니다.
반대로:
lvh (Large Viewport Height): 주소창이 사라진 전체 높이 기준
dvh (Dynamic Viewport Height): 상황에 따라 자동으로 조절됨 (vh의 개선 버전)

✅ 예: height: 100svh;[code].main {
  height: 100svh;
}[/code]→ 이 요소는 **주소창이 보이는 상태의 화면 높이 100%**만큼 높이를 가집니다.

🔍 왜 필요한가요?
기존 100vh는 모바일에서 문제를 일으킬 수 있습니다:
주소창이 가려져 있는데도 화면 전체 높이로 계산되어 하단이 잘림.
사용자 경험이 불안정해짐.
이를 보완하기 위해 svh, lvh, dvh가 추가되었습니다.

vh 일반 뷰포트 높이 (문제 발생 가능)
svh 작은 뷰포트 (주소창 있는 상태 기준)
lvh 큰 뷰포트 (주소창 없는 상태 기준)
dvh 상황에 따라 자동 조절 (추천)

어떤 viewport height 단위를 쓰는 게 적합한지는 어디에서, 어떤 요소에 적용할지에 따라 달라집니다. 아래에 환경별 추천을 정리해드릴게요.
✅ 1. 모바일 웹사이트 (스크롤 가능, 주소창 있음)
화면 전체를 덮는 Hero 영역 height: 100dvh; ← 동적으로 적응
주소창 보이는 높이까지만 height: 100svh;
주소창 숨긴 뒤의 전체 높이 height: 100lvh; (특정 상황에서만 사용)
🔸 100vh는 브라우저 주소창 때문에 하단이 잘려 보이는 문제가 있음
🔸 가장 안전한 건 100dvh: 자동으로 상황에 맞춰 svh 또는 lvh를 적용

✅ 2. 데스크탑 웹사이트
일반적으로 100vh 또는 100dvh 사용해도 문제 없음
주소창 크기 변화가 거의 없음

✅ 3. 모바일 앱(WebView 포함)
대부분 100vh 또는 100dvh가 괜찮지만,
일부 브라우저(WebView 기반)에서는 svh, lvh를 활용한 미세 조정이 필요할 수 있음

💡 실전 팁 (CSS 변수로 대응하기)[code]:root {
  --vh: 1dvh;
}

.fullscreen {
  height: calc(var(--vh) * 100);
}[/code]이렇게 하면 상황에 따라 vh, svh, lvh를 바꿔가며 대응 가능해요.