■ 메인 콘텐츠 모듈 – 3단 카드형 레이아웃
화면 크기에 따라 레이아웃이 적절하게 수평 → 수직으로 변합니다.
ex3-4.html의 실행 결과
메인 콘텐츠 모듈 – 3단 카드형 레이아웃
ex3-4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>반응형 웹 페이지</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
.main-content {
padding: 4rem 2rem;
}
.content-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.card {
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
padding: 2rem;
flex: 1 1 300px;
max-width: 350px;
transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.card h2 {
margin-bottom: 1rem;
font-size: 1.5rem;
color: #333;
}
.card p {
color: #666;
}
</style>
</head>
<body>
<section class="main-content">
<div class="content-container">
<div class="card">
<h2>서비스 1</h2>
<p>우리의 첫 번째 서비스는 사용자의 편의를 극대화합니다.</p>
</div>
<div class="card">
<h2>서비스 2</h2>
<p>두 번째 서비스는 창의적인 아이디어를 실현합니다.</p>
</div>
<div class="card">
<h2>서비스 3</h2>
<p>세 번째 서비스는 신뢰성과 확장성을 갖추고 있습니다.</p>
</div>
</div>
</section>
</body>
</html>
✅ 반응형 작동 방식
- 큰 화면에서는 3단 배치
- 화면이 좁아지면 자동으로 2단 → 1단으로 줄어듬
- 카드 크기는 flex: 1 1 300px 으로 자연스럽게 조정됨
✅ 구성 요약
header : 로고 + 메뉴 + 로그인 버튼 (Flexbox + 반응형)
main-banner : 풀스크린 배경 이미지 + 중앙 텍스트
main-content : 카드형 콘텐츠 3개 (반응형 Flex 레이아웃)
