웹 프로젝트 기초집LESSON 05

레이아웃: Flexbox와 Grid로 프로젝트 카드 배치하기

난이도입문

예상 시간40분

선수지식4강 CSS 기초

5강. 레이아웃: Flexbox와 Grid로 프로젝트 카드 배치하기

1. 이번 강의에서 해결할 문제

카드를 margin과 고정 너비로 밀어 배치하면 화면 크기와 카드 수가 바뀔 때 깨집니다. 정렬 축에 맞는 레이아웃 도구를 선택합니다.

2. 학습 목표

3. 핵심 개념

Flexbox는 메뉴처럼 주축 한 방향의 정렬에, Grid는 카드처럼 행과 열의 관계에 적합합니다. repeat(auto-fit, minmax())는 카드 최소 폭을 지키면서 가능한 열 수를 계산합니다.

4. 단계별 실습

HTML · index.html의 프로젝트 섹션 내부

game-dev-portfolio/index.html
<div class="project-grid">
  <article class="project-card"><h3>Parcel Rush</h3><p>Unity 2D 택배 분류 게임</p></article>
  <article class="project-card"><h3>Last Arena: 아주 긴 프로젝트 제목도 안전하게 줄바꿈</h3><p>Unreal 생존 게임</p></article>
  <article class="project-card"><h3>AI Patrol Lab</h3><p>행동 트리 실험</p></article>
</div>

CSS · 파일 경로: css/style.css

game-dev-portfolio/css/style.css
.site-header, nav { display: flex; align-items: center; gap: 1rem; }
.site-header { justify-content: space-between; padding-block: 1rem; }
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem;
}
.project-card { min-width: 0; overflow-wrap: anywhere; }

개발자 도구 확인: Elements의 Layout/Grid 배지를 켜 열과 gap을 봅니다. 창 폭을 바꾸면 카드가 3열, 2열, 1열로 자연스럽게 줄어야 합니다.

5. 코드가 동작하는 이유

Grid가 사용 가능한 폭을 계산하고 각 카드를 최소 16rem, 최대 남은 공간의 같은 비율로 배치합니다. min(100%, 16rem)은 매우 좁은 화면에서 카드가 화면보다 넓어지는 것을 막습니다.

6. 자주 하는 실수와 해결법

7. 직접 실습

8. 이해 점검 질문 3개

9. 핵심 요약

MINI QUIZ