티스토리 뷰
CSS 레이아웃, 아직도 float 쓰세요? Flexbox와 Grid로 신세계 맛보기
웹 페이지 레이아웃 잡는 거, 예전에는 float 가지고 씨름 좀 했었죠? 😅 요소들이 제멋대로 움직이거나 깨지는 현상 때문에 골치 아팠던 기억, 다들 한 번쯤 있으실 거예요. 하지만 이제 우리에겐 강력한 두 가지 무기가 있습니다. 바로 Flexbox와 CSS Grid! 이 둘 덕분에 복잡한 레이아웃도 훨씬 쉽고 유연하게 만들 수 있게 되었어요.
그런데 여기서 또 다른 고민이 생깁니다. "둘 다 좋다는데... 그럼 난 뭘 써야 하지?" 🤔 맞아요, 둘 다 강력하지만 각자 잘하는 역할이 조금 다르거든요. 오늘은 이 두 녀석의 특징을 확실히 비교해 보고, 어떤 상황에서 어떤 걸 선택해야 최고의 효율을 뽑아낼 수 있는지, 속 시원하게 알려드리겠습니다!
1. 한 줄 정렬의 달인, Flexbox 파헤치기
Flexbox는 이름 그대로 '유연한(Flexible)' 박스 모델이에요. 주로 한 방향(가로 또는 세로)으로 아이템들을 정렬하고 배치하는 데 탁월한 능력을 보여줍니다. 마치 책꽂이 한 칸에 책들을 나란히 꽂거나, 위아래로 쌓는 모습을 상상하면 이해하기 쉬워요.
핵심 컨셉:
- 한 방향(1차원) 레이아웃: 가로(row) 또는 세로(column) 중 하나의 축을 기준으로 아이템들을 정렬하고 배치합니다.
- 아이템 간 간격 조절: 아이템들 사이의 공간을 균등하게 나누거나 특정 위치에 정렬하는 것이 매우 편리해요. (justify-content, align-items 속성이 효자죠!)
Flexbox는 언제 쓰면 좋을까? (강점 & 활용 사례)
- 컴포넌트 내부 정렬: 버튼 그룹, 내비게이션 메뉴, 카드 UI 안의 텍스트와 이미지 정렬 등 작은 단위의 UI 요소를 한 줄로 정렬할 때 아주 강력합니다.
- 수직 중앙 정렬: 예전엔 정말 까다로웠던 세로 방향 가운데 정렬을 너무나 쉽게 해결해 줍니다. (align-items: center; 한 줄이면 끝!)
- 아이템 순서 변경: HTML 구조를 바꾸지 않고 CSS만으로 아이템 표시 순서를 바꿀 수 있어요 (order 속성).
간단 예시 코드:
.flex-container {
display: flex; /* Flexbox 시작! */
flex-direction: row; /* 아이템을 가로로 배치 (기본값) */
justify-content: space-around; /* 아이템들 사이에 공간을 균등하게 배분 */
align-items: center; /* 아이템들을 세로 중앙에 정렬 */
border: 2px solid dodgerblue;
padding: 10px;
}
.flex-item {
background-color: lightblue;
padding: 20px;
margin: 5px;
text-align: center;
}<div class="flex-container">
<div class="flex-item">아이템 1</div>
<div class="flex-item">아이템 2</div>
<div class="flex-item">아이템 3</div>
</div>(결과 예측) 위 코드는 3개의 아이템을 파란색 테두리 안에 가로로 배치하고, 서로 적당한 간격을 두며, 세로로는 가운데에 오도록 정렬할 거예요.
2. 2차원 격자 마법사, CSS Grid 파헤치기
CSS Grid는 말 그대로 '격자(Grid)' 모양의 레이아웃을 만드는 데 특화되어 있어요. 행(row)과 열(column)을 모두 사용하여 2차원 공간에 아이템들을 자유롭게 배치할 수 있습니다. 마치 엑셀 시트나 바둑판 위에 요소들을 원하는 칸에 착착 놓는 느낌이죠.
핵심 컨셉:
- 두 방향(2차원) 레이아웃: 가로(column)와 세로(row)를 동시에 고려하여 복잡한 격자 구조를 설계하고 아이템을 배치합니다.
- 명확한 구조 설계: grid-template-columns, grid-template-rows 속성으로 레이아웃의 큰 틀을 먼저 정의하고 그 안에 아이템을 배치하는 방식입니다.
Grid는 언제 쓰면 좋을까? (강점 & 활용 사례)
- 페이지 전체 레이아웃: 헤더, 사이드바, 본문, 푸터 등 웹 페이지의 전체적인 큰 구조를 잡을 때 매우 유용하고 직관적입니다.
- 복잡한 격자 디자인: 뉴스 웹사이트의 기사 배치나 갤러리처럼 행과 열이 복잡하게 얽힌 디자인을 구현할 때 최고의 선택입니다.
- 아이템 겹치기: 아이템들을 특정 그리드 영역에 겹쳐서 배치하는 것도 가능합니다.
- 간격 조절: 아이템 사이의 간격(Gutter)을 gap 속성 하나로 손쉽게 제어할 수 있습니다.
간단 예시 코드:
.grid-container {
display: grid; /* Grid 시작! */
grid-template-columns: auto auto auto; /* 3개의 열을 동일한 비율로 생성 */
grid-template-rows: 100px 100px; /* 2개의 행을 각각 100px 높이로 생성 */
gap: 10px; /* 아이템 사이 간격을 10px로 설정 */
border: 2px solid tomato;
padding: 10px;
}
.grid-item {
background-color: lightcoral;
padding: 20px;
text-align: center;
border: 1px solid white;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>(결과 예측) 위 코드는 6개의 아이템을 빨간색 테두리 안에 3열 2행의 격자 형태로 배치하고, 각 아이템 사이에는 10px의 간격을 둘 거예요.
그래서 결론은? 언제 무엇을 써야 할까? (핵심만 콕!)
자, 이제 가장 중요한 질문에 답할 시간입니다. Flexbox와 Grid, 언제 어떤 것을 선택해야 할까요?
정답은 "상황에 따라 다르지만, 명확한 기준은 있다!" 입니다.
- Flexbox는 주로 1차원(한 줄) 정렬이 필요할 때:
- 작은 컴포넌트 내부의 요소들을 가로나 세로로 정렬할 때 (예: 버튼 모음, 카드 안 내용)
- 콘텐츠의 흐름에 따라 아이템 간 간격을 유연하게 조절하고 싶을 때
- 수직 중앙 정렬이 필요할 때
- Grid는 주로 2차원(행과 열) 구조가 필요할 때:
- 웹 페이지의 전체적인 레이아웃 (Header, Main, Sidebar, Footer 등) 뼈대를 잡을 때
- 행과 열 모두를 고려해야 하는 복잡한 격자 디자인을 만들 때
- 레이아웃의 큰 틀을 먼저 정의하고 내용을 채우고 싶을 때
꿀팁: Flexbox와 Grid는 서로 대체하는 관계가 아니라, 함께 사용하면 더욱 강력한 시너지를 낼 수 있습니다! 예를 들어, Grid로 페이지 전체 구조를 잡고, 각 Grid 아이템 안의 내용물은 Flexbox를 사용해 정렬하는 방식이죠. 이게 바로 현대적인 CSS 레이아웃 설계의 핵심입니다.
마무리하며
Flexbox와 Grid, 이제 조금 감이 잡히시나요? Flexbox는 한 줄 정렬의 달인, Grid는 2차원 격자 마법사라고 기억해두시면 좋습니다. 어떤 레이아웃을 만들고 싶은지 먼저 생각해보고, 그 목적에 더 잘 맞는 도구를 선택하는 것이 중요해요.
물론 처음에는 조금 헷갈릴 수 있지만, 직접 코드를 짜보면서 이것저것 시도해 보는 것이 가장 좋은 학습 방법입니다. 오늘 배운 내용을 바탕으로 여러분의 웹사이트 레이아웃을 한 단계 업그레이드해 보세요. 더 이상 레이아웃 때문에 밤새 씨름하는 일은 없을 거예요! 😉