HTML에서 플렉스박스(Flexbox) 레이아웃을 만들려면 CSS의 display: flex 속성을 사용하면 됩니다. 웹사이트는 보통 여러 개의 열(column)로 콘텐츠를 구성하는데, 과거에는 CSS Float가 대표적인 다중 컬럼 레이아웃 기법이었지만, 지금은 훨씬 유연하고 강력한 플렉스박스가 표준으로 자리 잡았습니다.
플렉스박스 레이아웃은 CSS3에서 처음 소개되었습니다. 이 레이아웃은 화면 크기에 맞춰 요소를 자동으로 조정해 주기 때문에 데스크톱, 태블릿, 스마트폰 등 다양한 디스플레이 기기에서 콘텐츠가 올바르게 표시되도록 도와줍니다. 또한 일반 블록 요소에서 발생하기 쉬운 마진 병합(margin collapse) 문제와 달리, 플렉스 컨테이너는 레이아웃이 무너지지 않고 화면 크기에 따라 유연하게 반응합니다.
플렉스박스 없이 작성한 일반 레이아웃
먼저 플렉스박스를 적용하지 않은 일반적인 HTML 레이아웃 예제입니다.
<!DOCTYPE html> <html> <head></head> <body> <div class="mycontent"> <header> <h1>Tutorialspoint.com</h1> <h3>Simply Easy Learning</h3> </header> <nav> <ul> <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li> <li><a href="/videotutorials/index.htm">Video Tutorials</a></li> <li><a href="/codingground.htm">Coding Ground</a></li> <li><a href="/tutor_connect/index.php">Tutor Connect</a></li> <li><a href="/online_dev_tools.htm">Tools</a></li> </ul> </nav> <article> <h1>About Us</h1> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> </article> <footer>Add the footer content here</footer> </div> </body> </html>
플렉스박스 레이아웃은 아래와 같이 손쉽게 만들 수 있습니다. 페이지 크기를 조절해 보면, 화면 너비에 따라 레이아웃이 자동으로 재배치되며 다양한 기기의 화면에 맞게 조정되는 것을 확인할 수 있습니다.
플렉스박스를 적용한 반응형 레이아웃
다음 코드를 실행하면 위에서 확인한 것과 같은 유연한 반응형 레이아웃을 직접 만들어 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.flexmycontent {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flexmycontent > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: #FAFAFA;color:green;}
footer {background: #FAFAFA;color:green;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flexmycontent">
<header>
<h1>Tutorialspoint.com</h1>
<h3>Simply Easy Learning</h3>
</header>
<nav class ="nav">
<ul>
<li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
<li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
<li><a href="codingground.htm">Coding Ground</a></li>
<li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
<li><a href="/online_dev_tools.htm">Tools</a></li>
</ul>
</nav>
<article class="article">
<h1>About Us</h1>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
</article>
<footer>Add the footer content here</footer>
</div>
</body>
</html>
핵심 속성 정리
display: flex; – 해당 요소를 플렉스 컨테이너로 지정하여 자식 요소들이 유연하게 배치되도록 합니다.
flex-flow: row wrap; – 항목들이 가로 방향(row)으로 배치되고, 공간이 부족하면 자동으로 줄바꿈(wrap)됩니다.
flex: 1 100%; – 각 항목의 확장 비율과 기본 크기를 설정하여 모바일 화면에서는 세로로 쌓이게 만듭니다.
@media (min-width: 768px) – 화면 너비가 768px 이상일 때 nav, article, footer의 순서(order)와 비율(flex)을 변경하여 데스크톱용 사이드바 레이아웃을 구성합니다.
이처럼 플렉스박스와 미디어 쿼리를 함께 활용하면, 별도의 프레임워크 없이도 모바일부터 데스크톱까지 자연스럽게 대응하는 반응형 웹 레이아웃을 구현할 수 있습니다.