10.1 반응형 컬럼
Flexbox는 1차원 구성에 사용되며, 이는 요소들을 가로나 세로로 배치하는 데 이상적이란 뜻이야. 여기서는 Flexbox의 기본과 복잡하고 반응형 레이아웃을 만드는 기술을 살펴보자.
Flex-container와 Flex-elements
-
Flex-container: 속성
display: flex가 적용된 요소. 이 컨테이너는 모든 자식 요소(Flex-elements)의 위치를 제어해. - Flex-elements: flex-container의 자식 요소들이야.
1. 반응형 컬럼 만들기
flex-wrap, flex-grow, flex-shrink 및 flex-basis를 사용하여 반응형 컬럼을 만드는 예시:
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.flex-item {
flex: 1 1 200px;
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox로 반응형 컬럼 만들기</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container">
<div class="flex-item">컬럼 1</div>
<div class="flex-item">컬럼 2</div>
<div class="flex-item">컬럼 3</div>
</div>
</body>
</html>
코드 설명:
-
.flex-container: 이 컨테이너는 flex-container로 정의되어 있으며, 공간이 부족할 때 다음 줄로 요소들을 이동시킬 수 있어 (flex-wrap: wrap). -
.flex-item: 요소들은 같은 크기를 가지며, 사용할 수 있는 공간에 적응할 수 있어 (flex: 1 1 200px).
10.2 반응형 이미지 갤러리
화면 크기에 따라 컬럼 수가 변화하는 반응형 이미지 갤러리를 만들어보자:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img data-max-width="256" data-id="ebb06cf3-0e04-45bd-a33e-31fe096fd323" src="https://cdn.javarush.com/images/article/ebb06cf3-0e04-45bd-a33e-31fe096fd323/256.jpeg" alt="image 1">
<img data-max-width="256" data-id="ddbb4085-7a58-44e0-88fe-a2368b777222" src="https://cdn.javarush.com/images/article/ddbb4085-7a58-44e0-88fe-a2368b777222/256.jpeg" alt="image 2">
<img data-max-width="256" data-id="71be962a-10e9-4351-8c27-8846c6ad2e00" src="https://cdn.javarush.com/images/article/71be962a-10e9-4351-8c27-8846c6ad2e00/256.jpeg" alt="image 3">
<img data-max-width="256" data-id="8afd6be8-0f8e-42e9-a64b-8549f12862f7" src="https://cdn.javarush.com/images/article/8afd6be8-0f8e-42e9-a64b-8549f12862f7/256.jpeg" alt="image 4">
<img data-max-width="256" data-id="77241dcb-9b7f-471e-934e-9f7f2a42d369" src="https://cdn.javarush.com/images/article/77241dcb-9b7f-471e-934e-9f7f2a42d369/256.jpeg" alt="image 5">
</div>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Flexbox Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.gallery img {
flex: 1 1 calc(33.333% - 10px);
max-width: calc(33.333% - 10px);
height: auto;
}
@media (max-width: 768px) {
.gallery img {
flex: 1 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 480px) {
.gallery img {
flex: 1 1 100%;
max-width: 100%;
}
}
</style>
</head>
<body>
<div class="gallery">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<img src="image5.jpg" alt="Image 5">
</div>
</body>
</html>
설명:
- 큰 화면에서는 이미지가 컨테이너 너비의 3분의 1을 차지해.
- 768 픽셀 이하의 화면에서는 이미지가 컨테이너 너비의 절반을 차지해.
- 480 픽셀 이하의 화면에서는 이미지가 컨테이너의 전체 너비를 차지해.
10.3 Flexbox로 복잡한 반응형 레이아웃 만들기
다양한 화면 크기에 적응하는 헤더, 사이드바, 메인 콘텐츠 및 푸터를 포함한 복잡한 레이아웃을 Flexbox를 사용해 만들어보자:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Flexbox Layout</title>
<style>
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
header, footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
main {
flex: 1;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
padding: 20px;
background-color: #f4f4f4;
}
aside {
background-color: #ccc;
padding: 20px;
}
@media (min-width: 768px) {
main {
flex-direction: row;
}
.content {
flex: 3;
}
aside {
flex: 1;
}
}
</style>
</head>
<body>
<header>Header</header>
<main>
<aside>Sidebar</aside>
<div class="content">Main Content</div>
</main>
<footer>Footer</footer>
</body>
</html>
설명:
- 작은 화면에서는 레이아웃이 헤더, 메인 콘텐츠, 사이드바, 푸터로 이루어져 수직으로 배치돼.
- 768 픽셀 이상 화면에서는 메인 콘텐츠와 사이드바가 가로로 배치돼.
GO TO FULL VERSION