통합 요약노트
Ch.5 Flexbox — 한 줄 레이아웃의 마법
Flexbox 축, 정렬, 내비게이션 바
이 챕터의 내용
1
Flexbox가 해결하는 문제
Flexbox — display: flex 한 줄이면 자식 요소들이 유연하게 정렬됩니다.
display: flex 한 줄이면 레이아웃이 완전히 바뀝니다
방향을 바꾸고 간격을 조절해봅시다
세 개의 카드를 가로로 균등 배치해봅시다
- display: flex → 자식 요소가 가로로 나란히 배치
- flex-direction: row(가로) / column(세로) 전환
- justify-content로 주축 정렬 (center, space-between 등)
2
정렬의 달인 되기
align-items, flex-wrap, gap — 교차축 정렬, 줄바꿈, 간격까지 마스터합시다.
교차축 정렬과 간격 — Flexbox의 나머지 절반
줄바꿈과 비율 — 유연한 레이아웃의 비밀
아바타와 텍스트가 나란히 있는 프로필 카드를 만들어봅시다
- align-items: center → 교차축(세로) 가운데 정렬
- flex-wrap: wrap → 넘치면 다음 줄로 이동
- flex-grow로 남는 공간을 비율대로 분배
3
내비게이션 바 만들기
space-between + align-items: center — 실전에서 가장 많이 쓰는 Flexbox 조합을 활용합시다.
내비게이션 바의 기본 구조를 이해합시다
두 겹의 Flexbox — nav도 flex, ul도 flex
내비게이션 바 CSS를 직접 완성해봅시다
- Navbar = 두 겹 flex (nav + ul 모두 display: flex)
- space-between으로 로고↔메뉴 양쪽 끝 배치
- a:hover와 .active로 현재 페이지 표시
key
핵심 용어 모음
📦
Flex Container
display: flex를 선언한 부모 요소
🧩
Flex Items
컨테이너의 직계 자식 요소들
➡️
주축 (Main Axis)
아이템이 배치되는 방향 (기본: 가로)
⬇️
교차축 (Cross Axis)
주축에 수직인 방향 (기본: 세로)
↩️
flex-wrap
nowrap(기본) / wrap(줄바꿈 허용)
📈
flex-grow
남는 공간 차지 비율 (기본 0 = 안 늘어남)
📉
flex-shrink
공간 부족 시 줄어드는 비율 (기본 1)
📐
flex-basis
아이템 기본 크기 (width 대신 사용)
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기