vh(Viewport Height)는 매력적인 높이 단위입니다. %와 달리 뷰포트를 기준으로 수치를 제공합니다.
그런데 모바일 브라우저들이 주소 표시줄을 표시했다가 감췄다가 하는 쪽으로 기능을 개발하면서 vh 단위가 개발자들 입장에서는 좀 애매하게 됐습니다. 사파리나 크롬이 vh를 주소 표시줄을 감췄을 때를 기준으로 설정했기 때문입니다.
100vh를 쓰는 경우가 가장 골치아픈 경우였습니다.
사이트가 로딩되자마자 화면 높이 100%를 차지하는 시원한 이미지를 보여 주려고 100vh를 사용하려 했을 텐데요. 사이트가 로딩된 직후엔 주소 표시줄이 감춰지지 않아서 100vh 요소는 하단이 조금 잘리게 됐습니다.
화면 정중앙을 잡기 위해서 컨테이너에 100vh를 주는 경우도 골치아팠습니다. 주소 표시줄이 100vh인 요소의 하단을 가리고 있으니, 정중앙이 살짝 아래로 처진 느낌이 들었습니다.
100vh인 요소의 bottom: 0에 버튼을 달았다면 주소표시줄이 보이는 경우엔 이 버튼이 가려지는 문제가 발생했죠.
그래서 결국 자바스크립트를 이용한 해법을 사용할 수밖에 없었습니다. JS를 이용해 CSS 변수를 세팅하는 식으로 말입니다.
dvh: Dynamic Viewport Height
그래서 dvh, lvh, svh가 나왔습니다. 모바일 브라우저 호환성도 좋아 사실상 사파리 포함 거의 모든 브라우저에서 사용 가능합니다.
dvh는 Dynamic Viewport Height입니다. 주소표시줄 표시 여부에 따라서 단위가 변합니다.
svh는 Small Viewport Height인데요. 주소표시줄이 표시돼 있을 때를 기준으로 하는 단위입니다.
lvh는 Large Viewport Height인데요. 주소표시줄이 감춰져 있을 때를 기준으로 하는 단위입니다
dvh는 여러 곳에 사용하면 화면을 전부 다시 그리게 돼 성능 문제가 있을 수 있습니다. 그럴 때 svh나 lvh를 선택해 사용하면 됩니다.
제가 dvh를 써 보니 스크롤할 때마다 요소의 높이가 달라지니 좀 정신사납긴 했습니다. 그래서 웬만하면 svh를 사용하게 될 것 같습니다.
아마 브라우저들이 vh를 dvh처럼 사용하게 하지 않았던 이유가 성능 문제 때문이었던 것 같습니다. 개발자들이 이미 vh를 여러 요소들에 사용한 상태였을 테니까요. vh를 dvh처럼 구현했다면 스크롤에 따라서 박스가 길어졌다가 줄어들었다가 하는 참사가 벌어질 수도 있었을 겁니다.
모바일 브라우저로 100vh, dvh, svh, lvh를 확인해 보세요.
사용법
사용법은 간단합니다. 아래와 같이 쓰면 됩니다.
.some-container {
height: 100vh; /* 새 단위를 지원하지 않는 소수의 브라우저를 위해 */
height: 100dvh; /* dvh, lvh, svh 중 선택해서 사용 */
}위와 같이 쓰면 CSS 우선순위 규칙에 따라 새로운 단위를 지원하는 브라우저들은 앞의 값을 덮어씁니다. 새로운 단위를 지원하지 않는 브라우저들은 위의 값이 무시되므로 앞의 vh 단위가 적용됩니다.
vw에도 dvw, svw, lvw 단위가 모두 추가됐는데요. 이건 사용할 일이 많을 것 같진 않습니다.
브라우저 호환성
댓글 남기기