안녕하세요. 혀코입니다.
오늘은 기본 메인화면의 레이아웃을 flex의 flex-grow를 사용해서 정리하는 방법을 알아보겠습니다.
HTML 파일을 다음과 같이 작성합니다. body 안에 main-content와 footer 이렇게 두개로 나누었습니다.
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-content">
<header>
<h1>Hello World</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
<ul>
<li>Nulla consequat massa quis enim.</li>
<li>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</li>
</ul>
</div>
<footer>
<p>Created by Hyukho</p>
</footer>
</body>
</html>
CSS 파일은 다음과 같이 작성해서 모든 컨텐츠가 중앙에 놓일 수 있도록 했습니다.
body {
width: 650px;
padding: 15px;
margin: 0 auto;
}
footer {
border-top: 1px solid #888888;
margin-top: 15px;
padding: 15px;
}
현재는 main-content 다음에 바로 footer 가 나오고 있습니다. footer가 의미하는 것에 따라 웹페이지 하단에 위치하려면 다음과 같이 flex와 flex-grow를 통해서 레이아웃을 정리 가능합니다.
body {
width: 650px;
padding: 15px;
margin: 0 auto;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.main-content {
flex-grow: 1;
}
footer {
border-top: 1px solid #888888;
margin-top: 15px;
padding: 15px;
}
display: flex;를 적용하면 기본적으로 다음 블록이 옆으로 row로 붙게 됩니다. 따라서 flex-direction을 column으로 지정했습니다. 그리고 세로의 최소 길이를 100vh로 지정해서 웹페이지 전체를 활용할 수 있게 해줬습니다.
그리고 그 body의 하위 엘레멘트인 .main-content에서 flex-grow를 1로 지정해서 최대한 많이 공간을 차지하도록 했습니다. 이렇게 하면 footer 부분을 제외한 나머지 부분을 .main-content가 차지하게 되어 footer 가 웹페이지 하단에 표시됩니다.
이렇게 기본 메인화면의 레이아웃을 flex와 flex-grow를 사용해서 정리하는 방법에 대해서 알아봤습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다.
댓글