[HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리
웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.
HTML과 CSS를 이용하여 다양한 레이아웃을 구성할 수 있으며, 웹사이트의 가독성과 사용자 경험(UX)에 큰 영향을 미친다.
1. 기본적인 HTML 레이아웃 구조
웹사이트는 일반적으로 다음과 같은 기본 레이아웃 구조를 가진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본 HTML 레이아웃</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, nav, main, aside, footer {
border: 1px solid #ddd;
padding: 20px;
margin: 10px;
}
main {
display: flex;
}
article {
flex: 3;
background-color: #f9f9f9;
padding: 20px;
}
aside {
flex: 1;
background-color: #eee;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">연락처</a></li>
</ul>
</nav>
<main>
<article>
<h2>본문 내용</h2>
<p>이곳에 주요 콘텐츠가 들어갑니다.</p>
</article>
<aside>
<h2>사이드바</h2>
<p>부가 정보, 광고 등을 배치할 수 있습니다.</p>
</aside>
</main>
<footer>
<p>© 2025 Website. All Rights Reserved.</p>
</footer>
</body>
</html>
🔹 주요 HTML 레이아웃 태그
태그 | 역할 |
<header> | 웹사이트의 헤더(로고, 제목, 메뉴 등) |
<nav> | 내비게이션(메뉴) |
<main> | 웹사이트의 주요 콘텐츠 영역 |
<article> | 독립적인 콘텐츠 블록 (예: 블로그 글, 뉴스 기사) |
<section> | 주제를 가진 콘텐츠 그룹 |
<aside> | 부가 정보 (광고, 추천 링크, 사이드바) |
<footer> | 웹사이트의 하단(저작권, 연락처 등) |
2. CSS를 활용한 레이아웃 방식
HTML로 기본 구조를 만들었다면, CSS를 활용하여 레이아웃을 조정할 수 있다.
웹 개발에서 주로 사용되는 CSS 레이아웃 기법은 다음과 같다.
1) display: block (기본 블록 레이아웃)
• 기본적으로 <div>, <section>, <article> 등의 요소는 블록(block) 요소로 자동 배치됨.
• width 값을 지정하지 않으면 기본적으로 100% 너비를 가짐.
div {
display: block;
width: 80%;
margin: auto;
padding: 20px;
background-color: lightgray;
}
2) display: inline-block (가로 정렬)
• 블록 요소이지만, 한 줄에 여러 개 배치 가능
• width와 height 조절 가능
.menu-item {
display: inline-block;
padding: 10px 20px;
background-color: lightblue;
margin: 5px;
}
3) float (옛날 방식, 사용 지양)
• 요소를 왼쪽(float: left;) 또는 오른쪽(float: right;)으로 배치
• 하지만 유지보수가 어려워 modern CSS 기술(Flexbox, Grid)로 대체됨.
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
4) flexbox (추천)
• 레이아웃을 쉽게 정렬할 수 있는 최신 CSS 방식
• 가로/세로 방향 정렬이 쉬움
.container {
display: flex;
justify-content: space-between; /* 요소 간 간격을 동일하게 */
}
.box {
flex: 1;
padding: 20px;
background-color: lightcoral;
margin: 10px;
}
5) grid (고급 레이아웃)
• 2차원(가로+세로) 레이아웃을 쉽게 관리 가능
• 복잡한 웹 디자인에 적합
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* 1:2 비율의 컬럼 */
grid-gap: 10px;
}
.box {
background-color: lightgreen;
padding: 20px;
}
3. 반응형(Responsive) 웹 레이아웃
1) 미디어 쿼리 (@media)
화면 크기에 따라 스타일을 다르게 적용할 수 있다.
@media (max-width: 768px) {
.container {
flex-direction: column; /* 작은 화면에서는 세로 정렬 */
}
}
2) 뷰포트 단위 (vw, vh)
• vw(viewport width): 화면 너비의 %
• vh(viewport height): 화면 높이의 %
.container {
width: 80vw; /* 화면 너비의 80% */
height: 50vh; /* 화면 높이의 50% */
}
4. 정리
CSS 레이아웃 기법 | 특징 | 추천 사용 |
block | 기본 블록 요소 | 기본적인 레이아웃 |
inline-block | 블록이면서 가로 정렬 가능 | 간단한 메뉴 배치 |
float | 좌우 정렬 (구식) | 사용 지양 (Flexbox 추천) |
flexbox | 1차원 정렬 (가로/세로) | 일반적인 레이아웃 |
grid | 2차원 정렬 (행+열) | 복잡한 레이아웃 |
@media | 반응형 스타일링 | 모바일 대응 필수 |
➡ 현대 웹 개발에서는 flexbox와 grid를 조합하여 레이아웃을 구성하는 것이 가장 효율적이다.
➡ 반응형 웹을 만들기 위해 @media 미디어 쿼리를 사용하여 화면 크기에 따라 스타일을 조정하는 것이 중요하다.