Ch.5 Flexbox — 한 줄 레이아웃의 마법

내비게이션 바 만들기

Flexbox로 실전 내비게이션 바를 구현할 수 있다로고와 메뉴를 양쪽 끝에 배치할 수 있다hover 효과와 현재 페이지 표시를 적용할 수 있다

모든 웹사이트 상단에 있는 내비게이션 바를 만들어볼까요?

내비게이션 바(navbar)는 웹사이트의 얼굴입니다. 로고는 왼쪽, 메뉴는 오른쪽 — 이 배치가 Flexbox 하나로 가능합니다.

로고와 메뉴 사이의 공간은 어떻게 벌릴까?

space-between + align-items: center — 실전에서 가장 많이 쓰는 Flexbox 조합을 활용합시다.

article

핵심 내용

내비게이션 바의 기본 구조를 이해합시다

<!-- 내비게이션 바 HTML 구조 -->
<nav class="navbar">
  <div class="logo">JIT</div>
  <ul class="nav-links">
    <li><a href="#" class="active">홈</a></li>
    <li><a href="#">강의</a></li>
    <li><a href="#">대시보드</a></li>
    <li><a href="#">프로필</a></li>
  </ul>
</nav>

nav.navbar: Flex 컨테이너 (전체 너비)

.logo: 왼쪽 — 브랜드 로고

space-between: 가운데 — 자동 여백

.nav-links: 오른쪽 — 메뉴 리스트 (내부도 flex)

두 겹의 Flexbox — nav도 flex, ul도 flex

/* 1단계: 전체 바 — 로고와 메뉴를 양쪽 끝으로 */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 56px;
  background: #1A1A2E;
}

/* 2단계: 메뉴 리스트 — 링크들을 가로로 */
.nav-links {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

Flex 중첩 패턴: 부모(.navbar)도 flex, 자식(.nav-links)도 flex 이 패턴은 실무에서 매우 자주 사용됩니다. 각 flex 컨테이너는 독립적으로 정렬을 제어합니다.

내비게이션 바 CSS를 직접 완성해봅시다

로고는 왼쪽, 메뉴는 오른쪽에 배치하려면 어떤 속성을 사용하는가?

Flex 컨테이너 안에 또 다른 Flex 컨테이너를 넣을 수 있다

다음 중 flex 자식 요소가 남은 공간을 채우도록 하는 속성은?

Flexbox 마스터!

edit_note

정리 노트

내비게이션 바 만들기

내비게이션 구조

<nav>
내비게이션 영역을 나타내는 시맨틱 태그
ul + li + a
목록 기반 내비게이션이 표준 패턴
list-style: none
기본 글머리 기호 제거

Flexbox 활용

space-between
로고와 메뉴를 양쪽 끝에 배치
align-items: center
메뉴 항목을 세로 가운데 정렬
★

nav > ul > li > a 패턴은 모든 웹사이트의 기본 내비게이션 구조입니다.

check_circle

핵심 정리

  • 1Navbar = 두 겹 flex (nav + ul 모두 display: flex)
  • 2space-between으로 로고↔메뉴 양쪽 끝 배치
  • 3a:hover와 .active로 현재 페이지 표시

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작