10.1 간단한 그리드
Flexbox는 유연하고 반응형 레이아웃을 만들 수 있게 해줘. 지금부터는 Flexbox를 사용해서 다양한 레이아웃을 만드는 몇 가지 예시를 살펴볼 거야. 여기엔 간단한 그리드, 요소 중심 정렬, 네비게이션 메뉴 및 상품 카드 생성이 포함돼.
Flexbox를 사용해서 간단한 그리드를 만들어 보자. 이 예시는 컨테이너 내부에 고르게 분포된 요소들을 쉽게 생성할 수 있는 방법을 보여줘.
사용 예시:
CSS
.flex-container {
display: flex;
flex-wrap: wrap; /* 요소들이 새로운 줄로 이동할 수 있게 해줌 */
background-color: lightgrey;
padding: 10px;
}
.flex-item {
background-color: deepskyblue;
margin: 10px;
padding: 20px;
color: white;
font-size: 20px;
flex: 1 1 calc(33.333% - 40px); /* 공간의 유연한 분배 */
box-sizing: border-box;
}
HTML
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
<div class="flex-item">Item 4</div>
<div class="flex-item">Item 5</div>
<div class="flex-item">Item 6</div>
</div>
flex-basis: calc(33.333% - 40px): 요소의 초기 크기를 설정하는데, 어느 정도의 스트레칭이나 압축이 이루어지기 전까지는 그대로 유지돼. 이 경우, 요소는 컨테이너의 너비 33.333%에서 40픽셀을 뺀 만큼 차지하게 돼. calc()는 CSS에서 직접 계산을 수행할 수 있게 해줘.
10.2 요소 중심 정렬
Flexbox를 사용하여 컨테이너 내부에서 요소를 수평 및 수직으로 중앙 정렬하기.
사용 예시:
CSS
.flex-container {
display: flex;
justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 */
background-color: lightgrey;
}
.flex-item {
background-color: deepskyblue;
padding: 20px;
color: white;
font-size: 20px;
}
HTML
<div class="flex-container">
<div class="flex-item">Centered Item</div>
</div>
10.3 네비게이션 메뉴
Flexbox를 사용해서 가로형 네비게이션 메뉴를 만들어보자.
사용 예시:
CSS
.nav-container {
display: flex;
justify-content: space-around; /* 동일한 간격으로 요소 배치 */
background-color: #333;
padding: 10px;
}
.nav-item {
color: white;
text-decoration: none;
padding: 10px 20px;
}
.nav-item:hover {
background-color: #575757;
}
HTML
<div class="nav-container">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
10.4 상품 카드
Flexbox를 사용해서 상품 카드 레이아웃을 만들어보자.
사용 예시:
CSS
.product-list {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 1 1 calc(33.333% - 40px);
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
text-align: center;
}
.product-item img {
max-width: 100%;
height: auto;
}
.product-title {
font-size: 1.2em;
margin: 10px 0;
}
.product-price {
font-size: 1.5em;
color: #e74c3c;
}
HTML
<div class="product-list">
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">상품 1</h3>
<p class="product-price">$99.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">상품 2</h3>
<p class="product-price">$79.99</p>
</div>
<div class="product-item">
<img src="https://via.placeholder.com/150" alt="Product Image">
<h3 class="product-title">상품 3</h3>
<p class="product-price">$89.99</p>
</div>
</div>
코드 설명:
.product-list: Flexbox 컨테이너로 줄 바꿈이 가능하며 상품 카드간의 간격 지원.product-item: 고정 너비를 가진 Flexbox 요소들(상품 카드)이 컨테이너 크기에 맞추어 자동으로 조정됨
GO TO FULL VERSION