css · medium priority
CSS Flexbox & Grid 완전 정복
레이아웃의 모든 것: 언제 무엇을 쓸지
intermediate 난이도3시간토스카카오배민당근네이버
시작 전
이해도
매우 낮음
학습 개요
탄생 배경
쉬운 설명
복잡한 개념을 실생활 비유로 설명합니다.
“책상 배치”
Flexbox는 한 줄에 책들을 나란히 세우는 것입니다. 책의 두께에 따라 자동으로 공간을 나눕니다. Grid는 서재에 칸을 정확히 나눠 각 칸에 무엇을 놓을지 계획하는 것입니다. 소수의 아이템을 일렬로 정렬 → Flexbox, 복잡한 2D 배치 → Grid.
핵심 개념
Flexbox vs CSS Grid
Flexbox
- 1차원 레이아웃 (행 OR 열)
- 콘텐츠 크기 기반 배치
- 네비게이션 바, 버튼 그룹
- 수평/수직 정렬이 주 목적
1.nav { display: flex; gap: 16px; align-items: center; }2.btn-group { display: flex; justify-content: flex-end; gap: 8px; }
CSS Grid
- 2차원 레이아웃 (행 AND 열)
- 명시적 그리드 선 기반 배치
- 페이지 레이아웃, 카드 그리드
- gap으로 행열 간격 동시 제어
1.layout { display: grid; grid-template-columns: 240px 1fr; }2.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
실무 선택 기준
컴포넌트 내부 정렬(버튼, 아이콘+텍스트) → Flexbox 페이지/섹션 레이아웃(사이드바+메인, 카드 그리드) → Grid 두 가지 중첩 사용도 좋은 패턴입니다.
실무 적용
어떤 상황에서 사용하는가
대시보드 페이지 레이아웃 + 카드 그리드 + 네비게이션 바 구현
어떻게 적용하는가
페이지 최외곽 레이아웃(사이드바+메인) → Grid. 네비게이션 바 내부 → Flexbox. 카드 그리드 → Grid repeat(auto-fill, minmax). 카드 내부 콘텐츠 정렬 → Flexbox.
흔한 실수와 안티패턴
- flex: 1과 flex: 1 1 0의 차이: flex-basis가 0이면 모든 flex-grow 아이템이 동등하게 분할
- auto-fill vs auto-fit: 컨테이너 공간이 남을 때 auto-fill은 빈 트랙 유지, auto-fit은 줄임
- grid-template-columns에 fr 단위 사용 시 minmax(0, 1fr) 패턴으로 오버플로우 방지
면접 질문
기초카카오배민당근토스
답변 방향 힌트
1D vs 2D의 차이, 콘텐츠 기반 vs 레이아웃 기반을 중심으로 설명하세요.
반드시 언급할 키워드
- Flexbox: 1차원, 콘텐츠 크기 기반, 정렬 도구
- Grid: 2차원, 명시적 레이아웃 정의, 행+열 동시 제어
- Flexbox: 네비게이션, 버튼 그룹, 카드 내부
- Grid: 페이지 레이아웃, 반응형 카드 그리드
예상 꼬리 질문
- repeat(auto-fill, minmax(300px, 1fr))이 어떻게 동작하는지 설명해주세요.
- CSS Container Query가 나온 이유와 미디어 쿼리와의 차이는 무엇인가요?