웹 개발 기초집LESSON 13

Flexbox로 한 방향 배치하기

난이도입문

예상 시간25분

선수지식이전 강의

13강. Flexbox로 한 방향 배치하기

이번 강의의 결과물은 메뉴 항목을 한 축을 따라 정렬하고 공간이 부족하면 다음 줄로 넘기는 내비게이션입니다.

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

내비게이션 목록은 HTML 기본 상태에서 세로로 배치됩니다. 항목을 가로로 정렬하고, 간격과 중앙 정렬을 각 항목의 margin 계산 없이 컨테이너에서 제어합니다.

학습 목표

내비게이션 목록은 HTML 기본 상태에서 세로로 배치됩니다. 항목을 가로로 정렬하고, 간격과 중앙 정렬을 각 항목의 margin 계산 없이 컨테이너에서 제어합니다.
핵심 개념을 코드 예시와 짧은 실습에 적용하고 결과를 설명합니다.

2. 핵심 개념

display: flex를 지정한 요소는 flex 컨테이너, 그 바로 아래 자식들은 flex 아이템이 됩니다.

flex-direction: row
주축(main axis)  ──────────>
교차축(cross axis)          ↓

flex-direction: 주축의 방향
justify-content: 주축에서 아이템 정렬
align-items: 교차축에서 아이템 정렬
gap: 아이템 사이의 간격
flex-wrap: 공간이 부족할 때 여러 줄 허용

Flexbox는 한 번에 한 축을 중심으로 배치하는 모델입니다. W3C Flexbox 표준

3. 코드 예시

파일명: web-basics/portfolio/index.html

<nav class="site-nav" aria-label="주요 메뉴">
  <ul class="nav-list">
    <li><a href="#about">소개</a></li>
    <li><a href="#skills">기술</a></li>
    <li><a href="#projects">프로젝트</a></li>
    <li><a href="#contact">문의</a></li>
  </ul>
</nav>

파일명: web-basics/portfolio/css/style.css

.nav-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: block;
  padding: 0.5rem 0.75rem;
}

실행 위치: D:\WebProject\StartBook\dev-foundations\web-basics\portfolio

python -m http.server 5500

4. 코드가 동작하는 이유

ul이 flex 컨테이너가 되고 직접 자식인 li들이 flex 아이템이 됩니다.
row에서는 주축이 가로이므로 항목이 왼쪽에서 오른쪽으로 배치됩니다.
justify-content: center가 가로 주축의 남는 공간을 양쪽에 나눕니다.
align-items: center가 교차축에서 항목을 정렬합니다.
gap이 인접 아이템 사이에 일정한 간격을 만듭니다.
flex-wrap: wrap이 좁은 공간에서 항목을 다음 줄로 보냅니다.

Flexbox 속성의 상당수는 아이템이 아니라 컨테이너에 작성합니다. 먼저 주축 방향을 정한 뒤 justify-content와 align-items가 어느 축에 작용하는지 판단해야 합니다.

5. 자주 하는 실수

display: flex를 아이템마다 작성함
justify-content가 항상 가로 정렬이라고 외움
flex-direction을 바꾼 뒤 주축도 바뀐다는 점을 놓침
각 아이템 margin으로 간격을 만들고 마지막 항목 예외를 추가함
flex-wrap 없이 많은 메뉴를 한 줄에 강제로 유지함
시각 순서를 바꾸려고 HTML의 논리적 순서를 무시함

6. 짧은 실습 과제

메뉴 목록에 Flexbox를 적용합니다.
flex-direction을 row와 column으로 바꾸고 주축을 말로 설명합니다.
각 방향에서 justify-content와 align-items의 결과를 비교합니다.
브라우저 폭을 줄여 flex-wrap이 동작하는지 확인합니다.
gap을 0, 1rem, 2rem으로 바꾸어 차이를 확인합니다.
개발자 도구의 Flexbox 표시를 켜서 주축과 아이템 영역을 확인합니다.

완료 기준은 justify-content와 align-items를 시행착오로 바꾸지 않고 현재 주축을 기준으로 선택할 수 있는 것입니다.

7. 이해 점검 질문 3개

flex 컨테이너와 flex 아이템은 각각 어떤 요소인가요?
flex-direction: column이면 justify-content는 어느 방향의 정렬을 담당하나요?
메뉴 간격에 개별 margin 대신 gap을 사용하면 어떤 장점이 있나요?

핵심 요약

이번 강의의 핵심 개념을 코드의 구조와 실행 결과에 연결했습니다.
코드 예시를 직접 바꾸는 짧은 실습으로 핵심 동작을 확인했습니다.
이해 점검 질문에 답하며 다음 강의에 필요한 기준을 정리했습니다.

MINI QUIZ