반응형
플렉스박스란?
플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 아이템을 쉽게 정렬하고 배치할 수 있게 해줍니다. 플렉스박스는 반응형 디자인을 구현하는 데 매우 유용하며, 다양한 화면 크기와 기기에 맞게 레이아웃을 조정할 수 있습니다.
플렉스 컨테이너와 아이템
- 플렉스 컨테이너:
display: flex
를 설정한 요소입니다. - 플렉스 아이템: 플렉스 컨테이너 안에 있는 모든 직계 자식 요소입니다.
예제:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
}
플렉스박스를 이용한 기본 레이아웃
주축 방향 설정 (flex-direction
)
플렉스 컨테이너의 주축 방향을 설정합니다.
row
: 기본값, 가로 방향column
: 세로 방향
예제:
.container {
display: flex;
flex-direction: row; /* 또는 column */
}
아이템 정렬 (justify-content
)
플렉스 아이템을 주축을 따라 정렬합니다.
flex-start
: 주축의 시작 부분에 정렬 (기본값)flex-end
: 주축의 끝 부분에 정렬center
: 주축의 중앙에 정렬space-between
: 아이템 사이에 동일한 간격을 배치space-around
: 아이템 주위에 동일한 간격을 배치
예제:
.container {
display: flex;
justify-content: space-between; /* 또는 flex-start, flex-end, center, space-around */
}
아이템 정렬 (align-items
)
플렉스 아이템을 교차축을 따라 정렬합니다.
flex-start
: 교차축의 시작 부분에 정렬flex-end
: 교차축의 끝 부분에 정렬center
: 교차축의 중앙에 정렬baseline
: 아이템의 기준선에 정렬stretch
: 아이템을 컨테이너의 높이에 맞게 늘림 (기본값)
예제:
.container {
display: flex;
align-items: center; /* 또는 flex-start, flex-end, baseline, stretch */
}
반응형 레이아웃 예제
2열 레이아웃
화면이 작아질 때 한 열로 변경되는 2열 레이아웃을 구현해보겠습니다.
HTML:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
CSS:
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 50%; /* 아이템이 50% 너비를 차지 */
box-sizing: border-box;
padding: 10px;
}
@media (max-width: 600px) {
.item {
flex: 1 1 100%; /* 화면이 600px 이하일 때 아이템이 100% 너비를 차지 */
}
}
네비게이션 바
반응형 네비게이션 바를 구현해보겠습니다.
HTML:
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #333;
}
.navbar .logo {
color: white;
font-size: 24px;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
}
@media (max-width: 768px) {
.nav-links {
display: none; /* 작은 화면에서는 네비게이션 링크 숨기기 */
}
}
카드 레이아웃
반응형 카드 레이아웃을 구현해보겠습니다.
HTML:
<div class="card-container">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
</div>
CSS:
.card-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.card {
flex: 1 1 calc(33.333% - 10px); /* 카드가 3열로 배치되도록 설정 */
background-color: lightgrey;
padding: 20px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.card {
flex: 1 1 calc(50% - 10px); /* 화면이 768px 이하일 때 카드가 2열로 배치 */
}
}
@media (max-width: 480px) {
.card {
flex: 1 1 100%; /* 화면이 480px 이하일 때 카드가 1열로 배치 */
}
}
결론
플렉스박스를 사용하면 반응형 레이아웃을 쉽게 구현할 수 있습니다. 플렉스 컨테이너와 아이템의 다양한 속성을 활용하여 다양한 화면 크기와 기기에 맞는 레이아웃을 만들 수 있습니다. 이번 글에서는 플렉스박스를 이용한 반응형 레이아웃의 기본 개념과 예제를 다루었습니다.
다음 글에서는 그리드 레이아웃을 이용한 반응형 디자인에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'웹 디자인' 카테고리의 다른 글
[웹 디자인] 19일차: 타이포그래피 디자인 (0) | 2024.08.19 |
---|---|
[웹 디자인] 18일차: 그리드 레이아웃을 이용한 반응형 디자인 (0) | 2024.08.18 |
[웹 디자인] 16일차: 미디어 쿼리 사용법 (0) | 2024.08.16 |
[웹 디자인] 15일차: 반응형 디자인 소개 (0) | 2024.08.15 |
[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout) (0) | 2024.08.14 |