Day 4: CSS 레이아웃 (Flexbox & Grid)
좋습니다 👍 이제 **Day 4 학습 플랜 (CSS 레이아웃)**을 실습 예제까지 포함해서 정리해드릴게요.
🗓️ Day 4: CSS 레이아웃 (Flexbox & Grid)
1. 학습 목표
- Flexbox로 요소를 가로/세로 정렬하는 방법 익히기
- CSS Grid로 복잡한 레이아웃 구성하기
- 반응형 디자인(Media Query) 적용해 화면 크기에 따라 레이아웃 변경하기
2. 프로젝트 구조
my-first-web/
├── index.html
└── style.css
3. 실습 예제: 반응형 랜딩 페이지 만들기
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>반응형 랜딩 페이지</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Web Project</h1>
<nav>
<a href="#">홈</a>
<a href="#">서비스</a>
<a href="#">연락처</a>
</nav>
</header>
<main>
<section class="hero">
<h2>웹 개발 배우기</h2>
<p>HTML, CSS, JS로 멋진 웹사이트를 만들어보세요!</p>
<button>시작하기</button>
</section>
<section class="features">
<div class="card">빠른 학습</div>
<div class="card">실습 중심</div>
<div class="card">프로젝트 완성</div>
</section>
</main>
<footer>
<p>&copy; 2026 My Web Project</p>
</footer>
</body>
</html>
style.css
/* 기본 스타일 */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* 헤더: Flexbox */
header {
display: flex;
justify-content: space-between;
align-items: center;
background: #2c3e50;
color: white;
padding: 10px 20px;
}
nav a {
color: white;
margin-left: 15px;
text-decoration: none;
}
/* Hero 섹션 */
.hero {
text-align: center;
padding: 50px;
background: #ecf0f1;
}
.hero button {
padding: 10px 20px;
background: #16a085;
color: white;
border: none;
cursor: pointer;
}
/* Features: Grid */
.features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
.card {
background: #bdc3c7;
padding: 30px;
text-align: center;
border-radius: 8px;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.features {
grid-template-columns: 1fr;
}
}
4. 실행 방법
- VS Code에서
index.html열기 - Live Server로 실행 → 브라우저에서 랜딩 페이지 확인
- 화면 크기를 줄여보며 Grid가 3열 → 1열로 바뀌는 반응형 동작 확인
5. 학습 포인트
- Flexbox로 헤더 정렬 및 네비게이션 배치
- Grid로 카드형 레이아웃 구성
- Media Query로 반응형 디자인 구현
👉 Day 5에서는 JavaScript 기초를 배우면서 버튼 클릭 이벤트와 DOM 조작을 실습하게 됩니다. 원하시면 Day 5 예제도 바로 이어서 정리해드릴 수 있습니다.
