3-2. 메인 콘텐츠 모듈
■ 메인 콘텐츠 모듈 – 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 레이아웃)
■ 메인 콘텐츠 모듈 - 이미지 + 텍스트 2단 구조
ex3-5.html의 실행 결과
메인 콘텐츠 모듈 - 이미지 + 텍스트 2단 구조
ex3-5.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: #fefefe;
line-height: 1.6;
}
.feature-section {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
display: flex;
flex-direction: column;
gap: 4rem;
}
.feature {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 2rem;
}
.feature:nth-child(even) {
flex-direction: row-reverse;
}
.feature-image {
flex: 1 1 300px;
}
.feature-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.feature-text {
flex: 1 1 300px;
}
.feature-text h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #333;
}
.feature-text p {
color: #555;
}
@media (max-width: 768px) {
.feature {
flex-direction: column;
}
.feature:nth-child(even) {
flex-direction: column;
}
}
</style>
</head>
<body>
<section class="feature-section">
<div class="feature">
<div class="feature-image">
<img src="img/image1.jpg" alt="코딩 학습 이미지">
</div>
<div class="feature-text">
<h2>체계적인 코딩 커리큘럼</h2>
<p>입문부터 실전까지 단계별로 구성된 강의로 누구나 쉽게 코딩을 배울 수 있습니다.</p>
</div>
</div>
<div class="feature">
<div class="feature-image">
<img src="img/image1.jpg" alt="협업 이미지">
</div>
<div class="feature-text">
<h2>실시간 협업과 피드백</h2>
<p>실시간 프로젝트 협업과 전문가 피드백으로 성장의 속도를 높여드립니다.</p>
</div>
</div>
</section>
</body>
</html>
✅ 반응형 작동 방식
.feature : 이미지와 텍스트가 나란히 배치되는 블록
nth-child(even) : 짝수 섹션은 이미지와 텍스트 순서를 반대로
미디어 쿼리 : 모바일에서는 세로 방향으로 전환
■ 메인 콘텐츠 모듈 - 아이콘/이미지 기반
ex3-6.html의 실행 결과
메인 콘텐츠 모듈 - 이미지 + 텍스트 2단 구조
ex3-6.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: #f8f8f8;
line-height: 1.6;
}
.features-grid {
max-width: 1200px;
margin: 0 auto;
padding: 4rem 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-box {
background-color: white;
border-radius: 12px;
padding: 2rem;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.feature-box img {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.feature-box h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
color: #333;
}
.feature-box p {
color: #666;
font-size: 0.95rem;
}
</style>
</head>
<body>
<section class="features-grid">
<div class="feature-box">
<img src="img/icon1.png" alt="아이콘 1">
<h3>간편한 시작</h3>
<p>회원가입만 하면 누구나 즉시 학습을 시작할 수 있습니다.</p>
</div>
<div class="feature-box">
<img src="img/icon2.png" alt="아이콘 2">
<h3>실습 중심</h3>
<p>이론보다 실습! 직접 코딩하며 실력을 키워보세요.</p>
</div>
<div class="feature-box">
<img src="img/icon3.png" alt="아이콘 3">
<h3>전문가 피드백</h3>
<p>강사진의 1:1 피드백으로 실력 향상을 도와드립니다.</p>
</div>
<div class="feature-box">
<img src="img/icon4.png" alt="아이콘 4">
<h3>커뮤니티</h3>
<p>함께 배우는 커뮤니티에서 질문하고 소통하세요.</p>
</div>
</section>
</body>
</html>
✅ 반응형 작동 방식 및 디자인
.features-grid : 반응형 CSS Grid로 배치 (3~4개씩 자동 줄바꿈)
.feature-box : 아이콘, 제목, 설명으로 구성된 개별 블록
반응형 : 모바일에선 1~2열로 자동 전환
