웹 페이지의 요소를 배치하고 정렬하는 데 가장 효율적인 방법 중 하나가 CSS 플렉스박스(Flexbox)입니다. 이 글에서는 플렉스박스의 기초부터 고급 활용법까지 단계적으로 설명하며, 실전에서 바로 사용할 수 있는 예제 코드도 제공합니다.
1. CSS 플렉스박스란?
플렉스박스(Flexbox)는 CSS의 레이아웃 모델로, 컨테이너 안의 요소를 배치하고 정렬하는 데 최적화된 방식입니다. 요소를 가로 또는 세로로 정렬하며, 공간 분배와 정렬을 효율적으로 처리할 수 있습니다.
플렉스박스를 사용하면 다음과 같은 작업이 쉬워집니다:
• 가로 및 세로 중앙 정렬
• 동적인 공간 분배
• 반응형 레이아웃 구현
2. 플렉스 컨테이너와 아이템
플렉스박스를 사용하려면 플렉스 컨테이너(flex container)와 플렉스 아이템(flex item)을 이해해야 합니다.
• 플렉스 컨테이너: display: flex;를 설정한 부모 요소.
• 플렉스 아이템: 플렉스 컨테이너 안에 포함된 자식 요소들.
.container {
display: flex;
}
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
3. 플렉스 컨테이너의 주요 속성
3-1. flex-direction (플렉스 방향)
플렉스 아이템의 배치 방향을 설정합니다.
• row (기본값): 가로 방향 (왼쪽에서 오른쪽)
• row-reverse: 가로 방향 (오른쪽에서 왼쪽)
• column: 세로 방향 (위에서 아래)
• column-reverse: 세로 방향 (아래에서 위)
.container {
display: flex;
flex-direction: column;
}
3-2. justify-content (주축 정렬)
플렉스 아이템을 주축(main axis) 기준으로 정렬합니다.
• flex-start (기본값): 시작 지점에 정렬
• flex-end: 끝 지점에 정렬
• center: 중앙 정렬
• space-between: 아이템 간 동일한 간격
• space-around: 아이템 주위 동일한 간격
.container {
display: flex;
justify-content: center;
}
3-3. align-items (교차축 정렬)
플렉스 아이템을 교차축(cross axis) 기준으로 정렬합니다.
• stretch (기본값): 아이템을 컨테이너 높이에 맞춤
• flex-start: 교차축 시작 지점에 정렬
• flex-end: 교차축 끝 지점에 정렬
• center: 중앙 정렬
• baseline: 텍스트 기준선 정렬
.container {
display: flex;
align-items: center;
}
3-4. flex-wrap (줄바꿈)
아이템이 컨테이너를 넘어갈 때 줄바꿈 여부를 설정합니다.
• nowrap (기본값): 줄바꿈 없음
• wrap: 줄바꿈
• wrap-reverse: 줄바꿈 (반대 방향)
.container {
display: flex;
flex-wrap: wrap;
}
4. 플렉스 아이템의 주요 속성
4-1. flex (크기 비율)
플렉스 아이템의 크기를 비율로 설정합니다.
flex: [grow] [shrink] [basis]
• flex-grow: 남은 공간을 차지하는 비율
• flex-shrink: 공간이 부족할 때 줄어드는 비율
• flex-basis: 아이템의 기본 크기
.item {
flex: 1; /* 모든 아이템이 동일한 비율로 크기 조정 */
}
4-2. align-self (개별 정렬)
플렉스 컨테이너 안에서 특정 아이템만 교차축 기준으로 정렬합니다.
• auto (기본값): align-items 값 상속
• flex-start: 교차축 시작
• flex-end: 교차축 끝
• center: 중앙
• baseline: 텍스트 기준선
• stretch: 컨테이너 높이에 맞춤
.item {
align-self: flex-end;
}
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>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 80%;
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
font-size: 1.2em;
font-weight: bold;
}
결과: 가로로 정렬된 3개의 박스가 균등하게 공간을 차지합니다. 박스는 중앙 정렬되고, 반응형으로 레이아웃이 유지됩니다.
6. 플렉스박스 활용 팁
1. 가로 및 세로 중앙 정렬:
플렉스 컨테이너에 justify-content: center;와 align-items: center;를 결합하면 간단히 중앙 정렬이 가능합니다.
2. 반응형 레이아웃:
flex-wrap을 활용해 화면 크기에 따라 아이템이 줄바꿈되도록 설정하세요.
3. 정렬 및 간격 문제 해결:
gap 속성을 사용하면 아이템 간 간격을 쉽게 설정할 수 있습니다.
.container {
gap: 20px;
}
CSS 플렉스박스는 간단하면서도 강력한 레이아웃 도구로, 가로 및 세로 정렬, 공간 분배, 반응형 디자인 등 다양한 레이아웃 요구를 충족합니다. 이 글에서 소개한 개념과 예제를 실습하며 플렉스박스를 완벽히 이해해 보세요.
다음 글에서는 CSS Grid를 활용한 고급 레이아웃 설계를 다룰 예정입니다.
'CSS' 카테고리의 다른 글
CSS 애니메이션 완벽 가이드: 트랜지션과 키프레임 활용법 (0) | 2024.12.08 |
---|---|
CSS 미디어 쿼리 완벽 가이드: 반응형 웹 디자인의 핵심 (0) | 2024.12.08 |
CSS 위치 설정 완벽 가이드: Static, Relative, Absolute, Fixed, Sticky (0) | 2024.12.07 |
CSS 박스 모델 완벽 정리: 마진, 패딩, 보더를 이해하자 (0) | 2024.12.07 |
CSS로 텍스트 스타일링 완벽 가이드: 글꼴, 정렬, 꾸미기까지 (0) | 2024.12.06 |