CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이는 브라우저의 화면에 맞춰야 할 때가 있다.
예를들면, 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이거나 네비게이션 버튼을 화면 하단에 두어야 할때가 있다.
CSS의 heigh에 대해서 알아보았다.
1. height: 100% 의 의미
HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있다. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거라고 기대하는 것이다.
.screen-height {
height: 100%;
}
사실 이렇게 해주면 대부분의 경우 아무런 변화도 일어나지 않는다. 왜냐하면 %는 '부모 요소 기준'으로 결정이 되는 상대 단위이며, 부모 요소의 height 속성은 기본으로 auto로 설정되어 있을 확률이 높기 때문이다.
height 속성값이 auto인 HTML 요소는 담고 있는 컨텐츠가 빠져나오거나 짤리지 않을 만큼만 최소한의 높이가 자동으로 주어진다. 이 기본값 덕분에 대부분의 HTML 요소의 높이는 현재 브라우저 화면 너비와 담고 있는 컨텐츠 양에 따라서 자동 조절되는 것이며, 그래서 보통 HTML 요소의 높이를 명시적으로 스타일해 줄 일이 많지 않은 것이다.
그런데 여기서 문제는 이 height의 기본값 auto가 HTML 문서의 최상위 요소인 <html>과 <body>에도 예외없이 적용된다는 것인데 그래서 그 아래에 있는 HTML 요소의 height 속성을 100%로 스타일하더라도, 결국에는 auto에 의해서 최소한으로 부여된 <body> 높이에 제한을 받게 된다.
2. html과 body 요소의 높이도 100%로 설정
위에서 설명한 문제를 해결하기 위해서 가장 오랫동안 사용되온 방법은 <html> 요소와 <body> 요소의 높이를 100%로 설정하는 것이였다.
이렇게 스타일해주면 <html> 요소가 브라우저의 화면 높이의 100%를 차지하고, 그 바로 아래에 있는 <body> 요소의 높이가 연달아 100%를 차지하게 된다. 따라서 <body> 요소 아래에서 height 속성을 % 단위를 사용하여 설정해줄 때 브라우저의 화면 높이가 기준이 된다.
html,
body {
height: 100%;
}
이 방법 원래 높이를 지정해주고 싶은 요소 뿐만 아니라 <html> 요소와 <body> 요소의 높이도 100%로 지정을 해줘야하고, 만약에 해당 요소와 <body> 요소 사이에 다른 요소가 있다면 그 요소의 height 속성도 100%로 해줘야하는 번거로움이 있습니다.
3. 뷰포트 높이 단위 사용
CSS의 뷰포트(viewport) 높이(height) 단위, 즉 vh를 사용하면 부모 요소의 높이에 구애받지 않고 특정 요소의 높이를 브라우저 화면 높이에 맞출 수 있는데 1vh가 뷰포트의 높이의 1%를 의미하므로 높이로 100vh를 설정해주면 된다.
.screen-height {
height: 100vh;
}
그런데 이 방법은 모바일에서 문제의 소지가 있는데 대부분 주소 표시줄이 고정되어 있는 데스크탑 브라우저와 달리, 모바일 브라우저는 주소 표시줄이 유동적인 경우가 있기 때문이다. 예를 들어, iOS의 사파리(Safari) 브라우저나 안드로이드의 크롬(Chrome) 브라우저에서는 주소 표시줄이 처음에 페이지를 열었을 때는 나타났다가 스크롤을 시작하면 사라집니다.
이러한 모바일 브라우저에서 100vh는 주소 표시줄이 숨어있을 때의 브라우저 화면 높이, 즉 100lvh를 의미하기 때문에, height 속성값이 100vh인 요소의 아랫 부분이 뜻하지 않게 스크롤하지 않으면 화면에서 보이지 않는 문제가 나타난다. 만약에 거기에 중요한 버튼이 있다면 사용자가 클릭하는데 어려움을 겪거나 미처 보지 못할 수도 있다.
4. 동적 뷰포트 높이 단위 사용
위와 같은 문제를 해결하기 위해서 CSS에는 비교적 최근에 동적(dynamic) 뷰포트(viewport) 높이(height) 단위, 즉 dvh가 도입되었다. 그래서 이 새로운 단위를 사용하면 스크롤 시 주소창이 사라지는 모바일 브라우저에서도 문제없이 특정 요소의 높이를 브라우저의 화면 높이와 맞출 수 있게 된다.
.screen-height {
height: 100dvh;
}
dvh 단위를 사용하면 자동으로 모바일 브라우저의 화면 높이에 최적화가 되는데 주소창 보이는 경우에는 svh 단위(Short Viewport Height)가 적용되고 주소창이 사라진 경우에는 lvh 단위(Long Viewport Height)가 적용된다.
현재 CSS의 dvh 단위는 대부분의 모던 브라우저의 지원되고 있지만 사용자가 최신 버전을 쓴다는 보장이 없고 인터넷 익스플로러에서는 아예 지원이 되지 않는다. 따라서 다음과 같이 height 속성으로 dvh 단위를 사용하실 때는 바로 위에 vh 단위도 함께 설정해서, dvh가 지원되지 않는 브라우저에서는 vh로 대체되도록 해주는 게 안전하다.
.screen-height {
height: 100vh;
height: 100dvh;
}
