웹페이지를 구성할 때 가장 중요한 것은 레이아웃(Layout) 입니다.
그동안 복잡했던 레이아웃 구현을 Flexbox와 Grid는 간단하고 유연하게 해결해 줍니다.
이번 글에서는 CSS Flexbox와 Grid의 기본 개념, 사용법, 차이점을 실습 예제와 함께 정리해 드릴게요.
Flexbox란?
1차원 레이아웃(가로 또는 세로 한 방향)을 구성할 때 유용한 CSS 모듈입니다.
기본 개념은 주축(main axis)과 교차축(cross axis)을 기준으로 아이템을 정렬합니다.
✅ 핵심 속성
| 속성 | 설명 |
|——|——|
| display: flex | Flexbox 활성화 |
| flex-direction | 주축 방향 설정 (row, column 등) |
| justify-content | 주축 정렬 |
| align-items | 교차축 정렬 |
| flex-wrap | 아이템 줄바꿈 설정 |
Flexbox 실습 예제
“`html
“`
“`css
.flex-container {
display: flex;
justify-content: space-around;
align-items: center;
height: 100px;
background-color: #eee;
}
.flex-container div {
background: #4CAF50;
color: white;
padding: 20px;
}
“`
🧩 Flexbox는 네비게이션 바, 정렬된 버튼 그룹에 적합합니다.
Grid란?
2차원 레이아웃(가로와 세로 동시 구성)에 최적화된 CSS 모듈입니다.
페이지 전체 레이아웃, 격자 기반 디자인에 매우 강력합니다.
✅ 핵심 속성
| 속성 | 설명 |
|——|——|
| display: grid | Grid 레이아웃 활성화 |
| grid-template-columns | 열 구성 설정 |
| grid-template-rows | 행 구성 설정 |
| gap | 셀 간 간격 |
| grid-column, grid-row | 셀 병합 등 위치 지정
Grid 실습 예제
“`html
“`
“`css
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
background-color: #ddd;
}
.grid-container div {
background: #2196F3;
color: white;
padding: 20px;
}
“`
🖼️ 이미지 ALT 위치 예시:
Flexbox vs Grid: 언제 쓸까?
| 상황 | 추천 방식 |
|——|———–|
| 메뉴, 버튼 정렬 | Flexbox |
| 반응형 갤러리, 카드 리스트 | Grid |
| 복잡한 레이아웃 | Grid |
| 간단한 정렬 | Flexbox |
💡 TIP: Flexbox는 콘텐츠 중심, Grid는 레이아웃 중심입니다.
실무 활용 사례
- Flexbox: 헤더 영역 메뉴 정렬, 로그인 폼
- Grid: 포트폴리오 카드 뷰, 블로그 게시판 구조
학습 리소스 추천
마무리
Flexbox와 Grid는 CSS 레이아웃의 양대산맥입니다.
두 개념을 정확히 이해하고 목적에 맞게 활용한다면 깔끔하고 반응형에 강한 UI/UX를 구현할 수 있습니다.
지금 바로 실습해보고 CSS의 진짜 재미를 느껴보세요!
🔎 다음 포스팅 주제 추천
→ 26번: 모바일 반응형 웹페이지 만들기
→ 36번: CSS로 구현하는 버튼 효과 10가지
참고자료
- https://flexboxfroggy.com/
- https://cssgridgarden.com/