HTML 독학 가이드 8 - 레이아웃 구성
지금까지 배운 태그들을 어떻게 조합해야 진짜 웹사이트처럼 보일까요? 오늘은 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>다음 단계
다음 글에서는 메타 태그와 SEO를 배웁니다. 검색 엔진에 잘 노출되게 만드는 메타 태그 설정 방법을 알아볼 거예요.
레이아웃은 사용자 경험의 핵심이에요. 깔끔하고 직관적인 레이아웃을 만드세요!
HTML 독학 가이드 시리즈:
← 블로그 목록으로