CSS로 화면 높이의 HTML 요소 만들기

CSS로 웹사이트의 레이아웃을 잡다보면 어떤 HTML 요소의 높이를 브라우저의 화면에 맞추고 싶을 때가 있죠? 웹 페이지의 풋터(footer) 영역을 화면 하단에 붙이고 싶을 때도 그렇고 모바일에서는 네비게이션 버튼을 화면 하단에 두기도 하니까요.

이번 글에서는 CSS로 화면 높이의 HTML 요소 만드는 다양한 방법에 대해서 알아보겠습니다.

흔히 범하는 실수

CSS 초보자들이 HTML 요소의 높이를 스타일할 때 하기 쉬운 실수가 있는데요. 바로 무작정 height 속성을 100%로 설정하고 해당 요소의 높이가 화면 높이만큼 커질 거라고 기대하는 것인데요.

.screen-height {
  height: 100%;
}

사실 이렇게 해주면 대부분의 경우 아무런 변화도 일어나지 않습니다. 왜냐하면 %는 부모 요소에 기준으로 결정이 되는 상대 단위이며, 부모 요소의 height 속성은 기본값인 auto로 설정되어 있을 확률이 높기 때문입니다.

height 속성값이 auto인 HTML 요소는 담고 있는 컨텐츠가 빠져나오거나 짤리지 않을 만큼만 최소한의 높이가 자동으로 주어집니다. 이 기본값 덕분에 대부분의 HTML 요소의 높이는 현재 브라우저 화면 너비와 담고 있는 컨텐츠 양에 따라서 자동 조절되는 것이며, 그래서 우리는 HTML 요소의 높이를 명시적으로 스타일해 줄 일이 많지 않은 것이지요.

그런데 여기서 문제는 이 height 속성의 기본값 auto가 HTML 문서의 최상위 요소인 <html>과 <body>에도 예외없이 적용된다는 것인데요. 그래서 우리가 그 아래에 있는 HTML 요소의 height 속성을 100%로 스타일하더라도, 결국에는 auto에 의해서 최소한으로 부여된 <body> 높이에 제한을 받게 됩니다.

CSS의 height 속성에 대해서는 별도 글에서 자세히 다루고 있으니 참고 바랍니다.

html과 body 요소의 높이도 100%로 설정

위에서 설명드린 문제를 해결하기 위해서 가장 오랫동안 사용되온 방법은 <html> 요소와 <body> 요소의 높이를 100%로 설정하는 것인데요.

이렇게 스타일해주면 <html> 요소가 브라우저의 화면 높이의 100%를 차지하고, 그 바로 아래에 있는 <body> 요소의 높이가 연달아 100%를 차지하게 됩니다. 따라서 <body> 요소 아래에서 height 속성을 % 단위를 사용하여 설정해줄 때 브라우저의 화면 높이가 기준이 됩니다.

html,
body {
  height: 100%;
}

이 방법 원래 높이를 지정해주고 싶은 요소 뿐만 아니라 <html> 요소와 <body> 요소의 높이도 100%로 지정을 해줘야하고, 만약에 해당 요소와 <body> 요소 사이에 다른 요소가 있다면 그 요소의 height 속성도 100%로 해줘야하는 번거로움이 있습니다.

하지만 예전부터 데스크탑이나 모바일을 가리지 않고 작동하는 가장 안정되고 검증된 방법이기도 합니다.

뷰포트 높이 단위 사용

CSS의 뷰포트(viewport) 높이(height) 단위, 즉 vh를 사용하면 부모 요소의 높이에 구애받지 않고 특정 요소의 높이를 브라우저 화면 높이에 맞출 수 있는데요. 1vh가 뷰포트의 높이의 1%를 의미하므로 높이로 100vh를 설정해주면 됩겠습니다.

.screen-height {
  height: 100vh;
}

그런데 이 방법은 모바일에서 문제의 소지가 있는데요. 대부분 주소 표시줄이 고정되어 있는 데스크탑 브라우저와 달리, 모바일 브라우저는 주소 표시줄이 유동적인 경우가 있기 때문입니다. 예를 들어, iOS의 사파리(Safari) 브라우저나 안드로이드의 크롬(Chrome) 브라우저에서는 주소 표시줄이 처음에 페이지를 열었을 때는 나타났다가 스크롤을 시작하면 사라집니다.

이러한 모바일 브라우저에서 100vh는 주소 표시줄이 숨어있을 때의 브라우저 화면 높이, 즉 100lvh를 의미하기 때문에, height 속성값이 100vh인 요소의 아랫 부분이 뜻하지 않게 스크롤하지 않으면 화면에서 보이지 않는 문제가 나타납니다. 만약에 거기에 중요한 버튼이 있다면 사용자가 클릭하는데 어려움을 겪거나 최악의 경우 미처 보지 못할 수도 있죠.

동적 뷰포트 높이 단위 사용

위와 같은 문제를 해결하기 위해서 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;
}

마치면서

지금까지 HTML 요소의 높이를 브라우저 화면에 맞추는 3가지 방법에 대해서 살펴보았습니다.

참고로 height 속성을 사용할 때는 컨텐츠가 삐져나오거나 짤리지 않도록 특히 모바일 환경에서 주의가 필요하며 이 때문에 일반적으로 CSS에서는 height 속성보다는 min-height 속성을 사용하는 것이 권장됩니다. 이 부분에 대해서는 별도 포스팅에서 자세히 다루고 있으니 같이 읽어보시면 도움이 될 것 같습니다.

This work is licensed under CC BY 4.0