한 줄로 나란히: flex 단원 연습 문제 · HTML·CSS

12단원 '한 줄로 나란히: flex'의 일곱 레슨에서 10문제를 내고, 9 · 10단원에서 2문제를 섞었습니다. 앞 단원 문제가 어느 레슨인지는 정답을 펼치면 보입니다. 값이나 고친 줄은 종이에 끝까지 쓴 뒤 정답을 펼치세요. 막히면 정답 앞의 힌트를 먼저 펼칩니다. 점수는 매기지 않습니다.

결과를 묻는 문제의 결과 화면과 잰 값은 정답을 펼치면 보입니다. 배치를 묻는 문제는 종이에 나무를 그려 풀어 보세요. 컴퓨터가 있으면 문제의 HTML과 CSS를 파일로 저장해 브라우저로 열고, 개발자 도구에서 요소를 골라 자리와 Computed 창의 값을 맞춰 봅니다. 결과는 모두 크롬 기준입니다.

이 단원을 이미 안다면 1 · 3 · 4 · 5 · 6 · 8번을 먼저 풀어 보세요. 건너뛸지 볼 때는 힌트를 펴지 않고 풉니다. 다 맞히면 이 단원은 건너뛰어도 됩니다. 틀린 문제와 힌트를 펴고 맞힌 문제는 정답 끝의 '다시 볼 레슨'으로 갑니다. 끝의 두 문제(11 · 12번)는 직접 만들어 보는 문제라, 건너뛸지 가릴 때는 풀지 않아도 됩니다. 10번까지 풀고 쉬었다가 11번부터 이어 풀어도 됩니다. ⟨컴퓨터⟩가 붙은 문제는 컴퓨터에서 파일을 만들어 풉니다. 폰으로만 본다면 그 문제 끝의 폰 물음 하나로 대신합니다.

문제 1

플로우 카페 메뉴판입니다. 메뉴판 ul에 display: flex를 줬습니다. 이 규칙으로 flex 항목이 되어 한 줄에 나란히 놓이는 요소를 모두 고르세요. 기호를 다 쓰세요.

<ul class="menu">
  <li>
    <div>라테</div>
    <div>4500원</div>
  </li>
  <li>
    <div>녹차</div>
    <div>3500원</div>
  </li>
</ul>

.menu {
  display: flex;
  gap: 24px;
}

㉠ ul 메뉴판
㉡ li 라테 줄
㉢ div 라테
㉣ div 4500원
㉤ li 녹차 줄
㉥ div 녹차

힌트

display: flex가 걸린 요소에 표시하고, 메뉴판의 나무를 그려 여섯 요소가 각각 무엇 안에 드는지 적어 보세요.

힌트 둘

.menu의 직계 자식 · 손자를 다른 색으로 표시해 보세요. display: flex는 그 요소의 직계 자식에게만 닿습니다. 손자는 제 부모가 놓는 방식을 따릅니다.

정답

㉡㉤

결과 화면

잰 값개발자 도구에서 본 값

.menu의 줄 수1
.menu li의 줄 수2

.menu의 직계 자식은 li 둘입니다. 이 둘이 flex 항목이 되어 한 줄에 나란히 놓입니다(브라우저 규칙 7).
각 li 안의 div는 손자라 이 규칙이 닿지 않습니다. 부모 li는 flex가 아니니 블록 둘이 위아래로 쌓입니다 — '라테'와 '4500원'이 두 줄입니다.
㉢㉣㉥까지 골랐다면 flex가 그 안 모든 요소를 나란히 놓는다고 본 것입니다(flex가 후손까지라는 생각). 이름과 값을 한 줄에 놓으려면 .menu li에 따로 display: flex를 줍니다.
㉠을 골랐다면 display: flex를 준 요소 자신이 놓인다고 본 것입니다. 놓이는 것은 그 자식들입니다.

다시 볼 레슨: flex는 부모에

문제 2

1번 메뉴판에서 이름과 값을 한 줄에 놓으려고 .menu li 규칙을 썼습니다. 그 아래에 다른 사람이 모든 li를 블록으로 되돌리는 규칙을 더했습니다. '라테' 줄 안의 이름과 값은 몇 줄로 놓일까요? 숫자만 쓰세요.

<ul class="menu">
  <li>
    <div>라테</div>
    <div>4500원</div>
  </li>
</ul>

.menu li {
  display: flex;
}

li {
  display: block;
}

힌트

두 규칙이 같은 li의 같은 속성을 두고 겨룹니다. 선택자마다 명시도를 세 칸으로 세어 보세요.

정답

1입니다 — 이름과 값이 한 줄에 나란히 놓입니다.

결과 화면

잰 값개발자 도구에서 본 값

.menu li의 displayflex
.menu li의 줄 수1

속성	선언	출처	명시도	차례	이긴 값
`display`	`.menu li` · `flex`	우리 CSS	0-1-1	1	`flex`
	`li` · `block`	우리 CSS	0-0-1	2

.menu li(0-1-1)가 li(0-0-1)보다 명시도가 높아, 뒤에 쓴 li 규칙에 지지 않습니다(브라우저 규칙 5).
흔한 오답은 2입니다. 나중에 쓴 규칙이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각).

다시 볼 레슨: 명시도 · flex는 부모에

문제 3

세로로 쌓은 칸 둘에 justify-content: center⁠를 줬습니다. 부모 .col의 위 자리와 왼쪽 자리는 8px입니다. '가' 칸의 (가) 위 자리 (나) 왼쪽 자리는 몇 px일까요? 숫자만 쓰세요.

<div class="col">
  <div class="a">가</div>
  <div class="b">나</div>
</div>

.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 120px;
}

.col div {
  width: 40px;
  height: 40px;
}

힌트

column에서 주축이 어느 방향인지 먼저 적어 보세요.

힌트 둘

그 방향으로 남는 자리가 몇 px인지 셈하세요.

정답

(가) 28 · (나) 8

결과 화면

잰 값개발자 도구에서 본 값

.a의 위 자리28px
.a의 왼쪽 자리8px

flex-direction: column⁠이면 주축이 세로입니다. justify-content는 주축의 남는 자리를 맡아, 세로로 남는 120 − 40 × 2 = 40px을 위아래로 20씩 나눕니다 — 위 자리 8 + 20 = 28px.
가로는 교차축이라 justify-content가 닿지 않아 왼쪽 자리 8px 그대로입니다.
(가)에 8을 쓰고 (나)에 가로 가운데 자리를 쓴 것은 justify-content가 늘 가로를 맡는다고 본 것입니다. 정렬 이름은 축을 따라갑니다.

다시 볼 레슨: 주축과 교차축 · 주축 정렬

문제 4

짝마다 두 코드의 화면이 같은지 다른지 쓰세요. 다르면 어디가 다른지도 한 줄로 쓰세요. 셋 모두 같은 답이 나와도 됩니다.

(가)

<div class="bar">
  <b>가</b>
  <b class="end">나</b>
</div>

.bar {
  display: flex;
  justify-content:
    space-between;
}

<div class="bar">
  <b>가</b>
  <b class="end">나</b>
</div>

.bar {
  display: flex;
}

.end {
  margin-left: auto;
}

(나)

<div class="bar">
  <b>가</b>
</div>

.bar {
  display: flex;
  justify-content: space-around;
}

<div class="bar">
  <b>가</b>
</div>

.bar {
  display: flex;
  justify-content: center;
}

(다)

<div class="col">
  <p class="a">가</p>
  <p class="b">나</p>
</div>

.col {
  display: flex;
  flex-direction: column;
}

.a {
  margin: 0 0 16px;
}

.b {
  margin: 16px 0 0;
}

<div class="col">
  <p class="a">가</p>
  <p class="b">나</p>
</div>

.a {
  margin: 0 0 16px;
}

.b {
  margin: 16px 0 0;
}

힌트

짝마다 남는 자리가 어디에 몇 덩어리로 가는지, (다)는 '가'와 '나' 사이 틈이 몇 px인지 적어 보세요.

힌트 둘

auto 바깥 여백은 남는 자리를 다 가져갑니다. 항목이 하나면 사이가 없습니다. 바깥 여백 겹침은 일반 흐름에서만 일어납니다.

정답

(가) 같다 · (나) 같다 · (다) 다르다 — 앞 코드의 틈이 더 넓다

결과 화면(가) 첫째 코드

결과 화면(가) 둘째 코드

결과 화면(나) 첫째 코드

결과 화면(나) 둘째 코드

결과 화면(다) 첫째 코드

결과 화면(다) 둘째 코드

(가) 항목이 둘이면 space-between은 남는 자리를 둘 사이 한 곳에 몰아 '나'를 오른쪽 끝으로 보냅니다. margin-left: auto도 '나'의 왼쪽 바깥 여백이 남는 자리를 다 가져가 같은 자리입니다.
(나) 항목이 하나면 space-around는 남는 자리를 그 항목 양옆에 똑같이 나눠, center와 같은 한가운데입니다.
(다) 앞 코드는 flex라 두 바깥 여백이 겹치지 않고 더해져 틈이 32px입니다(브라우저 규칙 7). 뒤 코드는 일반 흐름이라 위아래로 맞닿은 바깥 여백이 겹쳐 큰 값 16px 하나만 남습니다 — 바깥 여백 겹침입니다.
(가) 다르다는 justify-content만 항목을 끝으로 보낸다고 본 것입니다.
(나) 다르다는 space-around가 늘 양 끝에 반 칸씩 남긴다고만 본 것입니다 — 항목이 하나면 그 반 칸 둘이 곧 양옆 가운데입니다.
(다) 같다는 flex 안에서도 바깥 여백이 겹친다고 본 것입니다. 겹침은 일반 흐름의 블록 사이에서만 일어납니다.

<div class="col">
  <p class="a">가</p>
  <p class="b">나</p>
</div>

.col {
  display: flex;
  flex-direction: column;
}

.a {
  margin: 0 0 16px;
}

.b {
  margin: 16px 0 0;
}

결과 화면

잰 값개발자 도구에서 본 값

.b의 위 틈32px

다시 볼 레슨: 주축 정렬 · 자주 쓰는 세 모양 · 여백 짧게 적기

문제 5

레시피 노트 카드 제목 줄입니다. 제목이 줄어 두 줄로 꺾이지 않게 flex-shrink: 0을 주고, 남는 자리도 받게 그 아래에 flex: 1을 더했습니다. Computed 창에서 h2의 (가) flex-grow (나) flex-shrink (다) flex-basis는 무엇일까요?

<div class="recipe-card-head">
  <h2>떡볶이</h2>
  <span class="badge">한식</span>
</div>

.recipe-card-head {
  display: flex;
}

h2 {
  flex-shrink: 0;
  flex: 1;
}

힌트

h2의 두 줄을 풀어 적은 속성으로 나눠 적어 보세요. flex: 1 한 줄이 무엇을 정하는지부터 봅니다.

힌트 둘

짧게 적기 flex는 flex-grow · flex-shrink · flex-basis 셋을 한꺼번에 정합니다.

정답

(가) 1 · (나) 1 · (다) 0%

결과 화면

잰 값개발자 도구에서 본 값

h2의 flex-grow1
h2의 flex-shrink1
h2의 flex-basis0%

flex: 1은 짧게 적기라 flex-grow: 1 · flex-shrink: 1 · flex-basis: 0% 셋을 다 정합니다. 앞 줄의 flex-shrink: 0이 뒤 줄에 되돌려져 1이 됩니다(브라우저 규칙 4).
(나)에서 흔한 오답은 0입니다. flex: 1이 늘어나는 값 하나만 바꾼다고 본 것입니다(짧게 적기는 적은 칸만 바꾼다는 생각). 줄지 않게 하려면 차례를 바꿔 flex: 1 다음 줄에 flex-shrink: 0을 씁니다.
(다) flex-basis의 0%는 '처음 크기를 0으로 두고 남는 자리를 나눠 받는다'는 뜻입니다. auto로 쓴 것은 flex: 1이 처음 크기는 그대로 둔다고 본 것입니다.

다시 볼 레슨: gap과 flex: 1 · 여백 짧게 적기

문제 6

강릉 여행 일정의 숙소 줄입니다. 너비 160px인 줄에 긴 영문 숙소 이름과 '저장' 단추를 나란히 놓았습니다. 이 코드는 화면에 어떻게 보일까요? 보기 셋 가운데 고르세요.

<div class="stay">
  <p>SeaviewGuesthouse</p>
  <button>저장</button>
</div>

.stay {
  display: flex;
  width: 160px;
}

힌트

숙소 이름과 단추가 줄 너비 160 안에 어떻게 드는지 그려 보세요.

힌트 둘

숙소 이름에 줄을 바꿀 수 있는 빈칸이 있는지 보고, flex 항목이 그 이름보다 좁아질 수 있는지 떠올리세요. flex 항목은 처음 값으로 안의 가장 긴 낱말보다 좁아지지 않습니다.

정답

① — 단추가 줄 오른쪽 밖으로 밀려나 있습니다.

결과 화면일부러 틀린 코드

flex 항목의 가장 작은 너비는 처음 값 min-width: auto라 안의 가장 긴 낱말만큼입니다. 빈칸 없는 긴 이름이 그보다 줄지 않아, 단추가 160px 줄 밖으로 밀려납니다.
② 항목이 남는 자리 안에서 얼마든지 줄어든다고 본 것입니다. 그렇게 하려면 이름에 min-width: 0과 overflow-wrap: anywhere⁠를 줍니다 — ②의 코드가 고친 모습입니다.
③ 자리가 모자라면 저절로 다음 줄로 간다고 본 것입니다. 줄을 바꾸는 것은 flex-wrap: wrap을 줬을 때뿐입니다.

다시 볼 레슨: gap과 flex: 1 · 자리가 모자라면 다음 줄로

문제 7

레시피 노트 후기 폼의 한 줄입니다. 별점 칸 묶음에 너비 120px · 좌우 안쪽 여백 12px · 테두리 1px을 주고, 이름 칸 묶음은 flex: 1으로 남는 폭을 받게 했습니다. 창 폭 400px에서 이름 칸 묶음 .name의 너비는 몇 px일까요? 숫자만 쓰세요.

<div class="form-row">
  <div class="name">이름 칸</div>
  <div class="star">별점 칸</div>
</div>

.form-row {
  display: flex;
  width: 360px;
}

.name {
  flex: 1;
}

.star {
  width: 120px;
  padding: 0 12px;
  border: 1px solid #d2d2d7;
}

힌트

먼저 .star가 차지하는 너비를 상자 셈으로 구하고, 줄 너비에서 빼 보세요.

정답

214입니다.

결과 화면폭 400px

잰 값개발자 도구에서 본 값

.star의 너비146px
.name의 너비214px

걸음	셈	값
1. 내용 칸	`.star`의 `width`	120
2. 안쪽 여백 더하기	120 + 12 × 2	144
3. 테두리 더하기	144 + 1 × 2	146
4. 바깥 여백은 따로	없음	—

.star는 146px을 차지하고, flex: 1인 .name이 줄의 남는 폭 360 − 146 = 214px을 다 받습니다(브라우저 규칙 6 · 7).
흔한 오답은 240입니다. .star가 width만큼 120px을 차지한다고 본 것입니다(width가 차지하는 너비라는 생각).
216은 테두리 두 쪽을 빠뜨린 것입니다.

다시 볼 레슨: 너비와 box-sizing · gap과 flex: 1

문제 8

플로우 카페 메뉴 갈래 칸 다섯을 한 줄에 놓고, 모자라면 다음 줄로 가게 했습니다. 창 폭 300px에서 (가) 칸은 몇 줄로 놓일까요? (나) '쿠키' 칸의 위 자리는 몇 px일까요? 첫 줄 칸들의 위 자리는 8px입니다.

<div class="cats">
  <div>커피</div>
  <div>라테</div>
  <div>녹차</div>
  <div>쿠키</div>
  <div>케이크</div>
</div>

.cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cats div {
  width: 80px;
  height: 32px;
}

힌트

창 폭 300px에서 body의 바깥 여백을 빼고 한 줄에 칸이 몇 개 드는지 셈하세요. 칸 사이 간격도 셉니다.

정답

(가) 2 · (나) 50

결과 화면폭 300px

잰 값개발자 도구에서 본 값

.cats의 줄 수2
.cats div:nth-child(4)의 위 자리50px
.cats div:nth-child(4)의 왼쪽 자리8px

한 줄 폭은 300 − 8 × 2 = 284px입니다. 칸 셋이 80 × 3 + 10 × 2 = 260px로 들고, 넷째를 더하면 350px이라 넷째 '쿠키'부터 다음 줄로 갑니다.
둘째 줄은 첫 줄 아래 8 + 32 = 40에서 gap 10px을 띄워 50px에서 시작합니다. gap은 칸 사이에도, 줄 사이에도 듭니다.
(나)에서 흔한 오답은 40입니다. gap이 가로 사이에만 든다고 본 것입니다.

다시 볼 레슨: 자리가 모자라면 다음 줄로

문제 9

하고 싶은 일에 쓸 이름을 쓰세요. 모두 flex 부모에 쓰는 것입니다.

(가) 교차축에서 항목들의 자리(위 · 가운데 · 아래 · 늘이기)를 맞추는 속성
(나) 한 줄에 들지 않는 항목을 다음 줄로 보내는 선언(속성과 값)
(다) 항목이 늘어서는 방향을 위에서 아래로 바꾸는 선언(속성과 값)
(라) 항목과 항목 사이에만 간격을 두는 속성

힌트

(가)와 주축의 남는 자리를 맡는 속성은 이름의 앞 낱말이 다릅니다. (라)는 마지막 항목 뒤에는 간격이 생기지 않는 속성입니다.

정답

받는 답: (가) align-items · (나) flex-wrap: wrap · (다) flex-direction: column · (라) gap

틀리는 꼴 — (가) justify-content는 주축의 남는 자리를 맡습니다. align-content는 여러 줄일 때 줄 묶음의 자리입니다. (나) flex-wrap: nowrap은 처음 값이라 한 줄을 지킵니다. (다) flex-direction: row는 처음 값인 가로입니다. (라) 항목의 margin-right는 마지막 항목 뒤에도 생깁니다.

다시 볼 레슨: 교차축 정렬 · 자리가 모자라면 다음 줄로 · 주축과 교차축 · gap과 flex: 1

문제 10

강릉 여행 일정의 한 줄에서 시각과 할 일(경포대 해돋이)을 나란히 놓으려고 display: flex를 줬는데, 두 줄로 쌓인 채입니다. 개발자 도구에서 .day를 골라 보니 Computed 창의 display가 block입니다. 이 페이지는 CSS를 HTML 안 style 요소에 썼습니다. 고칠 줄을 골라 고쳐 보세요.

힌트

찾는 차례대로 1번부터 지워 가세요. 나란히 놓고 싶은 두 요소를 Elements 패널에서 찾아 봅니다.

힌트 둘

그 둘의 직계 부모가 어느 요소인지 나무에서 짚어 보세요. display: flex는 나란히 놓을 요소들의 직계 부모에 줍니다. 지금 규칙의 선택자가 고르는 요소를 보세요.

결과 화면일부러 틀린 코드

여기서 고친 코드는 저장하지도 보내지도 않습니다. 새로 열면 처음 코드입니다.

정답

받는 답: 2번 줄의 선택자 .day .time을 .day로 고칩니다. 고친 style 요소 안 규칙을 떼어 그리면 이렇습니다.

<div class="day">
  <div class="time">9시</div>
  <div class="plan">
    해돋이
  </div>
</div>

.day {
  display: flex;
}

결과 화면

잰 값개발자 도구에서 본 값

.day의 줄 수1
.time의 displayblock

찾는 차례 5번에서 찾습니다.

1번 · 3번 — Styles 창에서 .time을 고르면 규칙이 보이니 파일도 규칙도 닿았습니다.
2번 — Elements 패널에서 .time과 .plan은 형제이고, 둘의 부모는 .day입니다.
4번 — display: flex에 취소선도 경고 표시도 없습니다. 알아들었고 이겼습니다.
5번 — 그런데 Computed 창에서 .day의 display는 block이고, flex는 .time에 들어 있습니다. flex를 받은 .time의 직계 자식은 글 '9시'뿐이라 놓일 것이 없고, 형제 .plan은 여전히 .day의 일반 흐름에서 아래 줄로 갑니다.

다르게 고쳐도 되는 곳: 선택자를 div.day로 써도 같습니다.

흔한 오답은 선택자를 .day div로 바꾸는 것입니다. 시각과 할 일 둘 다 flex가 되지만 둘의 부모 .day는 그대로 블록이라 위아래로 쌓인 채입니다 — 위 상자에서도 이룸이 아닙니다.

다시 볼 레슨: flex는 부모에

문제 11 (만들어 보기)

볼링 동아리 공지 칸의 아랫줄에 모임 날짜와 '참가 신청' 단추를 놓습니다. 날짜는 왼쪽 끝, 단추는 오른쪽 끝에 두고, 둘의 세로 가운데를 맞추고, 아무리 좁아져도 둘 사이가 12px 이상 떨어지게 하려 합니다. 한 줄 배치의 세 걸음 주석 아래 … 자리를 채우세요.

<div class="meet">
  <p>10월 25일 저녁 7시</p>
  <button type="button">
    참가 신청
  </button>
</div>

/* 1. 부모 정하기 */
… {
  …
  /* 2. 방향과 간격 */
  …
  /* 3. 남는 자리와 정렬 */
  …
}

나와야 할 결과는 둘입니다.

창 폭 360px에서 날짜는 왼쪽 끝, 단추는 오른쪽 끝에 놓인다.
창 폭 640px에서도 단추가 오른쪽 끝에 놓인다 — 폭이 바뀌어도 따라간다.

힌트

걸음마다 한두 줄입니다. 1은 나란히 놓을 둘의 부모, 2는 둘 사이의 최소 간격, 3은 주축과 교차축에서 각각 남는 자리를 어떻게 할지입니다.

정답

모범 답입니다.

<div class="meet">
  <p>10월 25일 저녁 7시</p>
  <button type="button">
    참가 신청
  </button>
</div>

/* 1. 부모 정하기 */
.meet {
  display: flex;
  /* 2. 방향과 간격 */
  gap: 12px;
  /* 3. 남는 자리와 정렬 */
  justify-content:
    space-between;
  align-items: center;
}

결과 화면폭 360px

잰 값개발자 도구에서 본 값

.meet p의 왼쪽 자리8px
button의 오른쪽 끝352px
.meet의 align-itemscenter

둘째 결과 — 같은 코드를 창 폭 640px에서 그렸습니다.

<div class="meet">
  <p>10월 25일 저녁 7시</p>
  <button type="button">
    참가 신청
  </button>
</div>

.meet {
  display: flex;
  gap: 12px;
  justify-content:
    space-between;
  align-items: center;
}

결과 화면폭 640px

잰 값개발자 도구에서 본 값

button의 오른쪽 끝632px

확인한 결과가 둘 다 맞으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

3걸음의 두 줄은 차례를 바꿔도 됩니다.
justify-content: space-between 대신 단추에 margin-left: auto를 줘도 단추가 오른쪽 끝에 갑니다. 그때는 3걸음이 부모가 아니라 자식 규칙에 붙습니다.

흔한 잘못:

단추에 margin-left: 160px처럼 고정 값을 주면 한 폭에서만 맞고, 640px에서는 단추가 가운데쯤에 멈춥니다.
align-items: center를 빠뜨리면 단추가 날짜 문단의 바깥 여백까지 든 줄 높이만큼 위아래로 길쭉하게 늘어납니다.
gap 대신 날짜에 margin-right: 12px을 줘도 사이는 띄지만, 간격을 부모 한 곳에서 정하는 꼴이 아닙니다 — 항목이 셋이 되면 마지막 뒤에도 생깁니다.

다시 볼 레슨: 자주 쓰는 세 모양

문제 12 (만들어 보기)

레시피 노트의 열한째 단계입니다(⟨컴퓨터⟩ · 25분 안팎 · 걸음마다 멈춰도 됩니다). 머리글을 한 줄로, 카드의 제목과 배지를 양 끝으로, 후기 폼의 이름 칸과 별점 칸을 한 줄로 놓습니다. 11단원 연습 문제의 만들어 보기를 마쳤다면 그 폴더에서 이어 갑니다.

이 단계 시작 파일 — 11단원 끝 상태

recipe-note 폴더에 세 파일을 받아 둡니다.

recipe-note 안에 images 폴더를 만들고 그림 여섯을 받아 둡니다. 앞 단계에서 받았으면 그대로 씁니다.

할 일 — 걸음 셋입니다. 걸음 3만 kimchi.html도 고칩니다. 걸음마다 한 줄 배치의 세 걸음(부모 정하기 → 방향과 간격 → 남는 자리와 정렬)으로 씁니다.

걸음 1 — 머리글 한 줄. '머리글 · 내비' 구역에 씁니다.

고를 요소	바꿀 것
머리글 `.site-header`	사이트 이름은 왼쪽 끝, 내비게이션은 오른쪽 끝 · 세로 가운데
내비게이션 `nav`	링크 둘을 한 줄에 · 사이 16px

걸음 2 — 카드 제목 ↔ 배지. '레시피 목록' 구역에 쓰고, 배지 규칙은 '기본' 구역의 .badge에 한 줄 더합니다.

고를 요소	바꿀 것
카드 제목 묶음 `.recipe-card-head`	제목은 왼쪽 끝, 배지는 오른쪽 끝 · 세로 가운데 · 사이 12px 이상
배지 `.badge`	좁아져도 줄어들어 꺾이지 않게

걸음 3 — 후기 폼 한 줄. kimchi.html에서 이름 칸 묶음 div와 별점 칸 묶음 div를 새 div 하나로 감싸고 class="form-row"를 붙입니다(안쪽은 한 단계 더 들여 씁니다). 그다음 '후기 폼' 구역에 씁니다.

고를 요소	바꿀 것
줄 `.form-row`	두 묶음을 한 줄에 · 사이 16px
줄의 직계 자식 `div` 둘	라벨 아래 칸이 오게 세로로 · 라벨과 칸 사이 4px · 아래 바깥 여백 0(폼 안 `div` 규칙의 12px을 되돌림)
줄의 첫 묶음(이름 칸)	남는 폭을 다 받게

확인 목록:

두 페이지 모두 머리글의 '레시피 노트'가 왼쪽 끝, 내비게이션 링크 둘이 오른쪽 끝에 한 줄로 놓인다(화면 · 걸음 1).
내비게이션의 Computed 창 column-gap이 16px이다(Computed 창 · 걸음 1).
목록 카드마다 제목은 왼쪽, 배지 '한식'은 오른쪽 끝에 있고 세로 가운데가 맞다(화면 · 걸음 2).
배지 .badge의 Computed 창 flex-shrink가 0이다. 지금 카드 제목이 짧아 창을 좁혀도 배지가 꺾이지 않아 화면으로는 가를 수 없고, 제목이 길어 자리가 모자랄 때 이 값이 배지를 지킨다(Computed 창 · 걸음 2).
후기 폼에서 이름 칸과 별점 칸이 한 줄에 놓이고, 이름 칸이 남는 폭을 다 가진다. 라벨은 칸 바로 위에 있다(화면 · 걸음 3).
kimchi.html을 검사기에 넣으면 Error가 0이다(검사기 · 걸음 3).

폰으로만 따라왔다면 이 물음 하나로 대신합니다. 걸음 2에서 .badge의 줄 하나를 빠뜨리면, 아주 좁은 카드에서 배지는 어떻게 될까요?

① 카드 오른쪽 밖으로 밀려난다.
② '한식'이 두 줄로 꺾인다.
③ 제목 아래 줄로 내려간다.

힌트

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 3은 .form-row가 부모, 묶음 div 둘이 항목이고, 묶음 안 라벨과 칸은 그 묶음이 놓는다는 것을 나무로 먼저 그려 봅니다.

정답

모범 답입니다. 바뀐 곳만 싣습니다 — 다 고친 세 파일은 아래 받기 파일과 같습니다(index.html은 11단원 끝 상태 그대로).

/* 머리글 · 내비 */
…
.site-header {
  display: flex;
  justify-content:
    space-between;
  align-items: center;
}
…
nav {
  display: flex;
  gap: 16px;
}

/* 레시피 목록 */
…
.recipe-card-head {
  display: flex;
  justify-content:
    space-between;
  align-items: center;
  gap: 12px;
}

/* 후기 폼 */
…
.form-row {
  display: flex;
  gap: 16px;
}

.form-row > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
}

.form-row > div:first-child {
  flex: 1;
}

.badge 규칙 끝에는 flex-shrink: 0; 한 줄을 더했습니다.

<form>
  <div class="form-row">
    <div>
      …
    </div>
    <div>
      …
    </div>
  </div>
  …
</form>

카드 제목 묶음 하나를 떼어 좁게 그린 모습입니다. 받기 파일과 같은 선언만 골랐습니다.

<div
  class="recipe-card-head"
>
  <h2>떡볶이</h2>
  <span
    class="badge"
  >한식</span>
</div>

.recipe-card-head {
  display: flex;
  justify-content:
    space-between;
  align-items: center;
  gap: 12px;
  width: 160px;
}

.badge {
  flex-shrink: 0;
}

결과 화면

잰 값개발자 도구에서 본 값

.badge의 오른쪽 끝168px
.badge의 flex-shrink0

확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

한 규칙 안 선언의 차례는 바꿔도 됩니다. 다만 폼 안 div 규칙의 margin-bottom: 12px은 .form-row > div가 명시도로 이겨 되돌리니, 두 규칙의 자리는 어디여도 됩니다.
내비게이션 링크 사이 16px을 gap 대신 링크마다 margin-right로 줘도 보이는 사이는 같지만, 마지막 링크 뒤에도 16px이 남아 오른쪽 끝이 맞지 않습니다.

흔한 잘못:

걸음 3에서 .form-row 대신 form에 display: flex를 주면, 폼의 직계 자식(줄 · 한 줄 평 묶음 · 라디오 묶음 · 단추)이 모두 한 줄에 놓입니다. 나란히 놓을 둘의 직계 부모를 고릅니다.
.form-row > div의 margin-bottom: 0을 빠뜨리면 두 묶음 아래에 12px이 남고, flex 안이라 그 아래 줄의 여백과 겹치지 않아 틈이 넓어집니다.
kimchi.html에서 감싼 div의 닫는 태그 자리를 틀리면 한 줄 평 칸까지 줄 안에 들어가 세 칸이 나란히 놓입니다. 검사기는 이 실수를 잡지 못하니 화면으로 봅니다.

폰 물음의 답은 ②입니다. 배지는 flex-shrink의 처음 값 1로 줄어들어 '한식' 두 글자가 두 줄로 꺾입니다. ①은 한글은 글자 사이에서 꺾일 수 있어 밀려나지 않습니다 — 빈칸 없는 영문 이름이 꺾이지 못한 6번과 다른 점입니다. ③은 flex-wrap: wrap이 없으니 일어나지 않습니다.

다시 볼 레슨: flex는 부모에 · 주축 정렬 · 교차축 정렬 · gap과 flex: 1 · 자주 쓰는 세 모양