기초 — 예쁜 사이트로 ⏱ 12분 +150 XP

Flexbox와 Grid 레이아웃

한 줄 정렬에 강한 Flexbox와 격자 배치에 강한 Grid의 차이와, 가운데 정렬 같은 핵심 패턴을 익힙니다.

🧑‍🏫

멘토 한마디

퀴즈는 시험이 아니라 거울이에요. 내가 어디쯤 왔는지 비춰 보는 거죠. 가볍게 도전! 🔍

요소를 원하는 위치에 놓는 일을 레이아웃이라고 합니다. 현대 CSS에는 이를 위한 강력한 도구가 두 가지 있습니다. Flexbox와 Grid입니다. 둘은 경쟁자가 아니라 쓰임이 다른 짝꿍입니다.

Flexbox: 한 방향으로 줄 세우기

Flexbox는 요소들을 한 줄(1차원)로 나란히 정렬하는 데 강합니다. 가로 한 줄, 또는 세로 한 줄. 부모에 display:flex를 주면 자식들이 줄을 섭니다.

.row {
  display: flex;
  justify-content: center; /* 주축(가로) 정렬 */
  align-items: center;     /* 교차축(세로) 정렬 */
  gap: 16px;               /* 요소 사이 간격 */
}

justify-content — 주축(기본은 가로) 방향 정렬: center, space-between 등
align-items — 교차축(기본은 세로) 방향 정렬
flex-direction — 줄의 방향: row(가로) / column(세로)
gap — 요소 사이 간격

핵심 화면 정중앙 배치는 Flexbox의 단골 패턴입니다. display:flex; justify-content:center; align-items:center; 세 줄이면 가로·세로 모두 가운데로 옵니다.

Grid: 행과 열의 격자

Grid는 행과 열(2차원)을 동시에 다룹니다. 카드들을 3칸씩 격자로 배치할 때처럼, 가로와 세로를 함께 잡아야 하면 Grid가 깔끔합니다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 같은 너비 3칸 */
  gap: 16px;
}

1fr은 '남은 공간의 한 몫'이라는 뜻으로, repeat(3, 1fr)은 같은 너비 세 칸을 만듭니다.

언제 무엇을 쓰나

상황	추천
버튼·아이콘을 한 줄로 나란히	Flexbox
내비게이션 바, 가운데 정렬	Flexbox
카드들을 격자(여러 행·열)로	Grid
페이지 전체 큰 구획 나누기	Grid

한 방향으로 줄을 세우면 Flexbox, 바둑판처럼 행과 열을 함께 잡으면 Grid. 이 한 문장이 선택의 80%를 해결합니다.

Tailwind에서는

Tailwind는 이 속성들을 짧은 클래스로 제공합니다. flex justify-center items-center gap-4는 위의 Flexbox 예와 같고, grid grid-cols-3 gap-4는 Grid 3칸과 같습니다. 속성을 이해했다면 클래스는 그 별명일 뿐입니다.

주의 Flexbox의 정렬 속성(justify-content, align-items)은 자식이 아니라 부모에 display:flex를 준 상태에서 작동합니다. 정렬이 안 먹으면 부모에 flex가 켜져 있는지부터 확인하세요.