3-3. 전체 페이지 레이아웃
■ 전체 페이지 레이아웃
다음의 웹 페이지는 Flexbox를 중심으로 반응형 레이아웃을 구현한 전형적인 구조이며, 주요 섹션(features, about)에서
Flexbox의 다양한 기능이 사용되고 있습니다.
ex3-7.html의 실행 결과
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flexbox 반응형 웹 페이지</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
line-height: 1.6;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #003566;
color: white;
padding: 30px;
text-align: center;
}
.hero {
background-image: url('img/image_bg.jpg');
background-size: cover;
background-position: center;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
text-shadow: 1px 1px 5px black;
}
.features {
display: flex;
justify-content: space-around;
padding: 40px 20px;
flex-wrap: wrap;
background-color: #f0f0f0;
}
.feature {
flex: 1 1 250px;
max-width: 300px;
text-align: center;
padding: 20px;
}
.feature i {
font-size: 40px;
color: #0077b6;
margin-bottom: 15px;
}
.about {
display: flex;
flex-wrap: wrap;
padding: 40px 20px;
background-color: white;
align-items: center;
gap: 30px;
}
.about img {
flex: 1 1 300px;
max-width: 500px;
width: 100%;
border-radius: 10px;
}
.about-text {
flex: 1 1 300px;
}
.about-text h2 {
margin-bottom: 15px;
color: #003566;
}
footer {
background-color: #001d3d;
color: white;
text-align: center;
padding: 20px;
margin-top: auto;
}
@media (max-width: 768px) {
.features {
flex-direction: column;
align-items: center;
}
.about {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<h1>플렉스 박스를 이용한 반응형 웹 페이지</h1>
</header>
<section class="hero">
이미지 영역
</section>
<section class="features">
<div class="feature">
<i class="fas fa-rocket"></i>
<h3>빠른 성능</h3>
<p>빠르고 반응성 좋은 웹 페이지로 사용자 경험 향상</p>
</div>
<div class="feature">
<i class="fas fa-shield-alt"></i>
<h3>보안 강화</h3>
<p>철저한 데이터 보호와 보안 기능 제공</p>
</div>
<div class="feature">
<i class="fas fa-heart"></i>
<h3>사용자 친화적</h3>
<p>누구나 쉽게 사용할 수 있는 인터페이스 설계</p>
</div>
</section>
<section class="about">
<img src="img/image2.jpg" alt="소개 이미지">
<div class="about-text">
<h2>우리는 누구인가요?</h2>
<p>우리는 사용자 중심의 디자인과 기술을 바탕으로 최고의 웹 경험을 제공합니다. 반응형 디자인, 접근성, 그리고 성능을 중요하게 생각하며, 항상 최신 기술을 적용합니다.</p>
</div>
</section>
<footer>
<p>© 2025 반응형 웹 페이지 </p>
</footer>
</body>
</html>
전체 페이지를 의미하는 body 요소 자체가 Flex 콘테이너입니다.
전체 페이지를 세로 방향으로 쌓는 구조입니다.
min-height: 100vh 덕분에 화면 전체를 차지하며 footer가 항상 맨 아래로 밀리게 됩니다 (margin-top: auto).
.features 섹션 - Flexbox로 카드 나열
.features: 수평 정렬(space-around), 필요 시 줄바꿈(wrap)
.feature: 카드 하나 하나를 Flex 아이템으로 지정하고,
flex: 1 1 250px
- 1 : 남은 공간 분배
- 1 : 줄어들 수 있음
- 250px : 최소 너비
따라서 가로폭이 충분할 땐 가로로 3개 정렬, 화면이 좁아지면 자동 줄바꿈이 됩니다.
미디어 쿼리 (@media)
Flexbox로 이미지와 텍스트를 좌우로 배치하되, flex-wrap으로 작은 화면에서는 아래로 줄 바꿈이 가능
flex: 1 1 300px: 최소 300px이 확보되면 좌우 배치, 그 이하에서는 세로로 쌓임
.about 섹션 - 이미지와 텍스트 좌우 배치
화면 폭이 768px 이하일 때:
.features: 세로 방향으로 카드 정렬
.about: 이미지와 텍스트를 세로로 스택
