HTML 입문 8편 - 페이지 레이아웃
처음 레이아웃 잡을 때 float 써서 한참 고생했어요. 요소가 붕 떠버리고, clear 안 하면 레이아웃 망가지고… 그때 Flexbox 배우고 나서 인생이 바뀌었어요. “이걸 왜 이제 알았지?” 싶더라고요.
지금까지 배운 태그들을 어떻게 조합해야 진짜 웹사이트처럼 보일까요? 오늘은 HTML과 약간의 CSS로 레이아웃을 만드는 방법을 배워볼게요.
기본 레이아웃 구조
일반적인 웹사이트는 이렇게 생겼어요:
Header
Navigation
Sidebar
Main Content
Sidebar
Footer
HTML 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내 웹사이트</title>
</head>
<body>
<header>헤더</header>
<nav>내비게이션</nav>
<main>
<article>메인 콘텐츠</article>
<aside>사이드바</aside>
</main>
<footer>푸터</footer>
</body>
</html>이제 CSS로 배치해볼게요!
간단한 CSS 추가
HTML 파일의 <head> 안에 CSS를 넣어요.
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
main {
display: flex;
min-height: 500px;
}
article {
flex: 3;
padding: 20px;
}
aside {
flex: 1;
background-color: #f0f0f0;
padding: 20px;
}
footer {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
</style>전체 예제: 블로그 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 블로그</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
/* 헤더 */
header {
background-color: #2c3e50;
color: white;
padding: 30px 20px;
text-align: center;
}
header h1 {
margin-bottom: 10px;
}
/* 내비게이션 */
nav {
background-color: #34495e;
padding: 0;
}
nav ul {
list-style: none;
display: flex;
justify-content: center;
}
nav li {
margin: 0;
}
nav a {
display: block;
color: white;
text-decoration: none;
padding: 15px 20px;
}
nav a:hover {
background-color: #2c3e50;
}
/* 메인 콘텐츠 */
.container {
display: flex;
max-width: 1200px;
margin: 20px auto;
gap: 20px;
padding: 0 20px;
}
article {
flex: 3;
}
article h2 {
margin-bottom: 10px;
color: #2c3e50;
}
article p {
margin-bottom: 15px;
}
.post {
background-color: white;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.post-meta {
color: #777;
font-size: 14px;
margin-bottom: 10px;
}
/* 사이드바 */
aside {
flex: 1;
}
.sidebar-section {
background-color: #f8f9fa;
padding: 15px;
margin-bottom: 20px;
border-radius: 5px;
}
.sidebar-section h3 {
margin-bottom: 10px;
color: #2c3e50;
}
.sidebar-section ul {
list-style: none;
}
.sidebar-section li {
padding: 5px 0;
}
.sidebar-section a {
color: #3498db;
text-decoration: none;
}
/* 푸터 */
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<!-- 헤더 -->
<header>
<h1>내 블로그</h1>
<p>웹 개발 이야기</p>
</header>
<!-- 내비게이션 -->
<nav>
<ul>
<li><a href="/">홈</a></li>
<li><a href="/blog">블로그</a></li>
<li><a href="/about">소개</a></li>
<li><a href="/contact">연락처</a></li>
</ul>
</nav>
<!-- 메인 콘텐츠 -->
<div class="container">
<article>
<div class="post">
<h2>HTML 레이아웃 만들기</h2>
<p class="post-meta">2025-11-25 | 카테고리: 웹개발</p>
<p>
레이아웃은 웹사이트의 뼈대예요. HTML로 구조를 잡고
CSS로 배치하면 멋진 웹사이트를 만들 수 있어요.
</p>
<p>
오늘은 기본적인 레이아웃 구조를 배워봅시다.
</p>
</div>
<div class="post">
<h2>CSS Flexbox 완벽 가이드</h2>
<p class="post-meta">2025-11-24 | 카테고리: CSS</p>
<p>
Flexbox는 레이아웃을 쉽게 만들 수 있게 해주는 CSS 기능이에요.
</p>
</div>
</article>
<aside>
<div class="sidebar-section">
<h3>카테고리</h3>
<ul>
<li><a href="#">HTML (5)</a></li>
<li><a href="#">CSS (8)</a></li>
<li><a href="#">JavaScript (12)</a></li>
</ul>
</div>
<div class="sidebar-section">
<h3>인기 글</h3>
<ul>
<li><a href="#">HTML 기초 가이드</a></li>
<li><a href="#">CSS 완벽 정리</a></li>
<li><a href="#">JavaScript 입문</a></li>
</ul>
</div>
</aside>
</div>
<!-- 푸터 -->
<footer>
<p>© 2025 내 블로그. All rights reserved.</p>
<p>이메일: contact@myblog.com</p>
</footer>
</body>
</html>
반응형 레이아웃
모바일에서도 잘 보이게 만들어요.
<style>
/* 기본 스타일 */
.container {
display: flex;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
article {
flex: 3;
padding-right: 20px;
}
aside {
flex: 1;
}
/* 모바일 (화면 너비 768px 이하) */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
article {
padding-right: 0;
}
aside {
margin-top: 20px;
}
}
</style>실전 예제: 포트폴리오 사이트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>내 포트폴리오</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* 헤더 */
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 80px 20px;
text-align: center;
}
header h1 {
font-size: 48px;
margin-bottom: 10px;
}
header p {
font-size: 20px;
}
/* 섹션 */
section {
max-width: 1000px;
margin: 60px auto;
padding: 0 20px;
}
section h2 {
font-size: 32px;
margin-bottom: 30px;
text-align: center;
color: #333;
}
/* 프로젝트 그리드 */
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.project-card {
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px;
transition: transform 0.3s;
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.project-card h3 {
margin-bottom: 10px;
color: #667eea;
}
/* 푸터 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 30px;
}
</style>
</head>
<body>
<header>
<h1>홍길동</h1>
<p>웹 개발자 | 프론트엔드 전문</p>
</header>
<section>
<h2>소개</h2>
<p style="text-align: center; font-size: 18px;">
안녕하세요! 3년차 프론트엔드 개발자 홍길동입니다.<br>
사용자 경험을 최우선으로 생각하며 코드를 작성합니다.
</p>
</section>
<section>
<h2>프로젝트</h2>
<div class="projects">
<div class="project-card">
<h3>쇼핑몰 사이트</h3>
<p>React와 Redux를 사용한 전자상거래 플랫폼</p>
<p><strong>기술:</strong> React, Redux, Node.js</p>
</div>
<div class="project-card">
<h3>블로그 플랫폼</h3>
<p>마크다운 기반 블로그 시스템</p>
<p><strong>기술:</strong> Vue.js, Express</p>
</div>
<div class="project-card">
<h3>날씨 앱</h3>
<p>실시간 날씨 정보 제공 애플리케이션</p>
<p><strong>기술:</strong> JavaScript, API</p>
</div>
</div>
</section>
<section>
<h2>연락처</h2>
<p style="text-align: center;">
이메일: hong@example.com<br>
GitHub: github.com/honggildong<br>
LinkedIn: linkedin.com/in/honggildong
</p>
</section>
<footer>
<p>© 2025 홍길동 포트폴리오</p>
</footer>
</body>
</html>CSS Grid 레이아웃
Grid로 더 복잡한 레이아웃도 만들 수 있어요.
<style>
.grid-container {
display: grid;
grid-template-areas:
"header header header"
"nav nav nav"
"sidebar1 main sidebar2"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
header { grid-area: header; }
nav { grid-area: nav; }
.sidebar1 { grid-area: sidebar1; }
main { grid-area: main; }
.sidebar2 { grid-area: sidebar2; }
footer { grid-area: footer; }
</style>운영자 실전 노트
실제 프로젝트 진행하며 겪은 문제
- div 남용 → 의미 없는
<div class="wrapper">가 5단 중첩. 시맨틱 태그로 평탄화했다 - 레이아웃 구조화 실패 → header/nav/main/footer 없이 div만 사용. 나중에 전체 리팩토링 필요했다
- Flexbox vs Grid 선택 혼란 → 2컬럼에 Grid 써서 복잡해짐. 용도별로 적절히 선택한다
이 경험을 통해 알게 된 점
- 2컬럼은 Flexbox, 3컬럼 이상은 Grid가 효율적이다
- 반응형 브레이크포인트 768px(모바일/태블릿), 1024px(태블릿/데스크톱)이 일반적이다
다음 단계
다음 글에서는 메타 태그와 SEO를 배운다. 검색 엔진에 잘 노출되게 만드는 메타 태그 설정 방법을 알아볼 예정이다.
레이아웃 도구는 용도에 맞게 선택하자. 시맨틱 태그를 먼저 쓰고, CSS로 배치하면 코드 구조가 명확해진다.
HTML 독학 가이드 시리즈:
← 블로그 목록으로