CSS의 height 속성은 요소의 높이를 지정하는 데 사용됩니다. 이 속성을 적절히 활용하면 DIV 요소를 브라우저 창(뷰포트) 전체 높이에 맞춰 꽉 차게 표시할 수 있습니다.
기본 문법
CSS height 속성의 기본적인 사용 문법은 다음과 같습니다.
Selector {
height: /*값*/
}핵심 포인트: vh 단위와 부모 요소의 높이
DIV를 화면 전체 높이로 만들려면 두 가지 방법을 주로 사용합니다. 첫 번째는 100vh(viewport height) 단위를 직접 사용하는 것이고, 두 번째는 html과 body 요소의 높이를 먼저 100%로 설정한 후 자식 요소에 height: 100%를 적용하는 것입니다. 부모 요소의 높이가 정의되어 있지 않으면 자식 요소의 백분율(%) 높이는 제대로 작동하지 않는다는 점을 기억하세요.
예제 1: height: 100% 적용하기
다음 예제는 html과 body에 100vh 높이를 지정하고, 그 안의 DIV에 height: 100%를 적용하여 화면 전체를 채우는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
margin: 0px;
height: 100vh;
}
div {
height: 100%;
text-align: center;
background: mistyrose;
}
</style>
</head>
<body>
<div>100% 높이!!</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: Flexbox와 함께 여러 DIV를 화면 높이에 맞추기
다음 예제에서는 Flexbox 레이아웃을 활용하여 여러 개의 DIV를 가로로 배치하고, 각 DIV를 뷰포트 높이(100vh)만큼 늘려 화면 전체를 채우는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
html, body {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0px;
height: 100vh;
box-shadow: inset 0 0 40px lightblue;
}
div {
width: 40%;
height: 100vh;
text-align: center;
box-shadow: inset 0 0 20px lightcoral;
}
</style>
</head>
<body>
<div>잘 보세요!</div>
<div>프로가 어떻게 하는지 보여드리죠!!</div>
<div>하늘을 열어라!!</div>
<div>가자! 가자! 가자!!</div>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
DIV를 창 높이의 100%로 만드는 가장 간단한 방법은 height: 100vh를 사용하는 것이며, 백분율 방식을 쓸 경우에는 반드시 상위 요소(html, body)의 높이도 함께 지정해야 합니다. 모바일 환경에서는 주소창으로 인한 뷰포트 변화를 고려하여 dvh(dynamic viewport height) 단위를 함께 검토해 보는 것도 좋습니다.