단위와 변수 단원 연습 문제 · HTML·CSS

11단원 '단위와 변수'의 네 레슨에서 10문제를 내고, 10단원에서 3문제를 섞었습니다. 앞 단원 문제가 어느 레슨인지는 정답을 펼치면 보입니다. 값이나 고친 줄은 종이에 끝까지 쓴 뒤 정답을 펼치세요. 막히면 정답 앞의 힌트를 먼저 펼칩니다. 점수는 매기지 않습니다.

결과를 묻는 문제의 결과 화면과 잰 값은 정답을 펼치면 보입니다. 글자 크기와 여백의 px 값은 브라우저 글자 크기 설정이 처음 그대로일 때의 값이고, 글꼴 크기를 '크게'로 바꾼 브라우저에서 잰 값은 그렇게 밝힙니다. 컴퓨터가 있으면 문제의 HTML과 CSS를 파일로 저장해 브라우저로 열고, 개발자 도구 Computed 창에서 값을 맞춰 봅니다. 결과는 모두 크롬 기준입니다.

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

문제 1

합창 동아리 공연 포스터의 제목 글자 크기를 px에서 rem으로 옮깁니다.

h1 {
  font-size: 36px;
}

(가) 글자 크기 설정이 처음 그대로일 때 크기가 지금과 같도록 아래 ____ 자리를 채우세요. (나) 그렇게 옮긴 뒤 글꼴 크기를 '크게'로 바꾼 브라우저에서 제목은 몇 px일까요? 숫자만 쓰세요.

h1 {
  font-size: ____;
}

힌트

1rem이 처음 설정과 '크게'에서 각각 몇 px인지 먼저 적어 보세요.

정답

(가) 2.25rem · (나) 45

결과 화면은 지금 이 브라우저의 설정대로 그려지고, 잰 값은 '크게'에서 잰 값입니다.

<h1>봄 정기 공연</h1>

h1 {
  font-size: 2.25rem;
}

결과 화면

잰 값개발자 도구에서 본 값

h1의 font-size45px
h1의 글자 배율2.25

(가) 처음 설정에서 1rem은 16px이라 36 ÷ 16 = 2.25입니다. 처음 설정에서는 36px 그대로입니다.
(나) '크게'에서 1rem은 20px이라 20 × 2.25 = 45px입니다. 글자 배율 2.25는 설정을 바꿔도 그대로입니다.
(가)에서 흔한 오답은 단위만 바꾼 36rem입니다. 처음 설정에서 16 × 36 = 576px이 됩니다.
(나)에서 흔한 오답은 36입니다. rem으로 옮긴 뒤에도 px처럼 그대로라고 본 것입니다 — 그대로인 쪽은 px로 적은 글자입니다.

다시 볼 레슨: 글자 크기는 rem

문제 2

레시피 노트 김치볶음밥 페이지에서 제목과 그 아래 한 줄 사이를 넓히려고, 제목 아래와 문단 위에 바깥 여백을 하나씩 줬습니다. 제목 테두리 아래와 문단 테두리 위 사이의 틈은 몇 px일까요? 숫자만 쓰세요.

<h1>김치볶음밥</h1>
<p class="meta">
  한식 · 조리 15분
</p>

h1 {
  margin-bottom: 2rem;
}

.meta {
  margin-top: 0.75rem;
}

힌트

두 rem 값을 px로 바꿔 적고, 두 요소가 놓인 차례를 그려 보세요.

힌트 둘

두 바깥 여백이 위아래로 맞닿아 있는지 보세요. 위아래로 맞닿은 블록의 바깥 여백은 더해지지 않습니다.

정답

32입니다.

결과 화면

잰 값개발자 도구에서 본 값

.meta의 위 틈32px

2rem은 32px, 0.75rem은 12px입니다. 일반 흐름에서 위아래로 맞닿은 두 바깥 여백은 겹쳐 큰 값 하나만 남습니다 — 바깥 여백 겹침입니다.
흔한 오답은 44입니다. 바깥 여백이 늘 더해진다고 본 것입니다(바깥 여백은 늘 더해진다는 생각).
12는 나중에 쓴 문단의 여백이 이긴다고 본 것입니다. 두 여백은 다른 요소의 다른 속성이라 겨루지 않고, 겹칠 때 큰 쪽이 남습니다.

다시 볼 레슨: 여백 짧게 적기 · 글자 크기는 rem

문제 3

레시피 카드의 글자 크기를 단위를 섞어 적었습니다. 브라우저 글꼴 크기를 '중간(권장)'에서 '크게'로 바꾸면 글자가 커지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<h2>김치볶음밥</h2>
<p class="time">
  조리 <span>15분</span>
</p>
<p class="tip">
  달걀은 <span>반숙</span>으로
</p>

h2 {
  font-size: 1.375rem;
}

.time {
  font-size: 14px;
}

.tip {
  font-size: 0.875rem;
}

span {
  font-size: 1.25em;
}

㉠ h2 김치볶음밥
㉡ p 조리
㉢ span 15분
㉣ p 달걀은 … 으로
㉤ span 반숙

힌트

요소마다 글자 크기의 단위를 적고, 단위마다 무엇을 기준으로 재는지 적어 보세요.

힌트 둘

em이면 그 요소의 부모가 무엇인지 이어 보세요. font-size의 em은 부모의 글자 크기에 곱합니다. 부모가 설정을 따르는지부터 보세요.

정답

㉠㉣㉤

잰 값은 '크게'에서 잰 값입니다.

결과 화면

잰 값개발자 도구에서 본 값

h2의 font-size27.5px
.time의 font-size14px
.time span의 font-size17.5px
.tip의 font-size17.5px
.tip span의 font-size21.875px

㉠㉣은 rem이라 설정을 따릅니다 — '크게'에서 1rem은 20px입니다.
㉤은 em이고 부모 .tip이 rem이라, 부모가 커진 만큼 함께 커집니다(17.5 × 1.25).
㉢도 em이지만 부모 .time이 14px로 고정이라, 설정을 바꿔도 14 × 1.25 = 17.5px 그대로입니다. 같은 span 규칙인데 부모에 따라 갈립니다.
㉠㉣만 골랐다면 em이 어디에서나 같은 크기라고 본 것입니다(em이 고정이라는 생각).
㉢까지 골랐다면 em이 설정을 따르는 단위라고 본 것입니다. em이 보는 것은 설정이 아니라 부모의 글자 크기입니다.

다시 볼 레슨: 단위마다 기준 · 글자 크기는 rem

문제 4

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

(가)

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

.box {
  width: 200px;
}

.bar {
  width: 50%;
  background-color: #d2d2d7;
}

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

.box {
  width: 200px;
}

.bar {
  width: 50vw;
  background-color: #d2d2d7;
}

(나)

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

.box {
  width: 200px;
  padding: 20px;
}

.bar {
  width: 50%;
  background-color: #d2d2d7;
}

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

.box {
  width: 200px;
  padding: 20px;
}

.bar {
  width: 100px;
  background-color: #d2d2d7;
}

(다)

<p class="sold">품절</p>

.sold {
  background-color: #ffe58a;
  color: #1d1d1f;
  opacity: 0.4;
}

<p class="sold">품절</p>

.sold {
  background-color:
    rgb(255 229 138 / 0.4);
  color: #1d1d1f;
}

힌트

짝마다 바뀐 단위나 속성을 찾고, 그 값이 무엇을 기준으로 재는지 적어 보세요.

힌트 둘

(나)는 .box의 내용 칸 너비를 먼저 셈하세요. (다)는 검은 글자가 어느 쪽에서 함께 옅어지는지 보세요.

정답

(가) 다르다 — 뒤 코드의 막대가 더 길다 · (나) 같다 · (다) 다르다 — 앞 코드는 글자까지 옅은 회색이다

결과 화면(가) 첫째 코드

결과 화면(가) 둘째 코드

결과 화면(나) 첫째 코드

결과 화면(나) 둘째 코드

결과 화면(다) 첫째 코드

결과 화면(다) 둘째 코드

(가) 50%는 부모 .box의 내용 칸 200px의 반인 100px입니다. 50vw는 부모가 아니라 화면(뷰포트) 폭의 반이라, 휴대전화 화면이면 그보다 깁니다.
(나) %는 부모의 내용 칸을 기준으로 합니다. .box가 차지하는 너비는 240px이지만 내용 칸은 width의 200px이라 50%는 100px — 뒤 코드와 같습니다(브라우저 규칙 6).
(다) opacity는 요소 전체를 — 안의 글자까지 — 반투명하게 그립니다. 글자 밑의 흰 페이지가 비쳐 검은 글자가 옅은 회색이 됩니다. 뒤 코드는 바탕색에만 불투명도를 붙여 검은 글자가 또렷합니다. 바탕은 둘 다 같은 옅은 노랑입니다.
(가) 같다는 vw도 부모를 기준으로 잰다고 본 것입니다.
(나) 다르다는 %가 부모가 차지하는 너비(240px)를 기준으로 한다고 본 것입니다.
(다) 같다는 opacity가 바탕만 옅게 한다고 본 것입니다.

다시 볼 레슨: 단위마다 기준 · 반투명한 색

문제 5

플로우 카페 메뉴판의 '계절 메뉴' 칸을 메뉴판 너비의 반으로 만들고 안쪽 여백과 테두리를 줬습니다. 이 칸이 차지하는 너비는 몇 px일까요? 숫자만 쓰세요.

<div class="menu">
  <div class="season">
    계절 메뉴 — 유자차
  </div>
</div>

.menu {
  width: 280px;
}

.season {
  width: 50%;
  padding: 1rem;
  border: 2px solid #6e6e73;
}

힌트

상자 셈의 걸음대로 적어 보세요. 첫 걸음의 내용 칸은 %가 무엇의 반인지부터 정합니다.

정답

176입니다.

결과 화면

잰 값개발자 도구에서 본 값

.season의 너비176px
.season의 width140px

걸음	셈	값
1. 내용 칸	부모 내용 칸 280의 50%	140
2. 안쪽 여백 더하기	140 + 16 × 2	172
3. 테두리 더하기	172 + 2 × 2	176
4. 바깥 여백은 따로	없음	—

width: 50%는 내용 칸 너비를 정합니다. 안쪽 여백 1rem(16px)과 테두리가 그 바깥에 더해집니다(브라우저 규칙 6).
흔한 오답은 140입니다. width가 칸이 차지하는 너비라고 본 것입니다(width가 차지하는 너비라는 생각). Computed 창의 width는 140px이지만 그것은 내용 칸입니다.
172는 테두리를 빠뜨린 것입니다.

다시 볼 레슨: 너비와 box-sizing · 단위마다 기준

문제 6

플로우 카페 메뉴판에서 새 메뉴 이름표의 바탕을 하늘색 변수로 바꾸려고 아래에 선언을 더했습니다. 그런데 --sky 변수는 아직 어디에도 만들지 않았습니다. 이름표는 어떻게 보일까요? 보기 셋 가운데 고르세요.

<p class="new">딸기 라테</p>

.new {
  color: #d70015;
  background-color: #ffe58a;
  background-color: var(--sky);
}

힌트

.new 규칙의 세 선언을 하나씩 보고, 알아듣지 못해 버리는 선언이 있는지 표시해 보세요.

힌트 둘

없는 변수를 꺼낸 선언도 꼴은 맞아 버려지지 않습니다. 이긴 선언이 꺼낼 값이 없을 때 background-color가 무엇을 쓰는지 떠올리세요.

정답

② — 빨간 글자이고 바탕 띠가 없습니다.

결과 화면

셋째 줄 var(--sky)는 꼴이 맞는 선언이라 버려지지 않고, 나중에 쓴 쪽이라 둘째 줄을 이깁니다. 꺼낼 --sky가 없으니 닿는 선언이 없을 때처럼 됩니다 — background-color는 물려받지 않는 속성이라 처음 값인 투명입니다(브라우저 규칙 4 · 5).
글자색 선언은 그대로 먹습니다.
①은 이긴 선언이 값을 못 꺼내면 앞 선언으로 돌아간다고 본 것입니다. 앞 선언으로 가는 것은 var(sky)처럼 --를 빠뜨려 선언째 버렸을 때입니다.
③은 이 선언 하나 때문에 규칙 전체가 버려진다고 본 것입니다(CSS도 멈춘다는 생각).

다시 볼 레슨: CSS 변수

문제 7

동아리 공지 페이지입니다. 가을 소풍 구역에서만 강조색을 빨강으로 바꾸려고, 구역에 같은 이름의 변수를 다시 뒀습니다. 빨간 글자로 그려지는 요소를 모두 고르세요. 기호를 다 쓰세요.

<section class="trip">
  <h2>가을 소풍</h2>
  <p>
    신청은
    <a href="form.html">여기</a>
  </p>
</section>
<p>
  지난 사진은
  <a href="album.html">앨범</a>
</p>

:root {
  --point: #005bb5;
}

.trip {
  --point: #d70015;
}

h2,
a {
  color: var(--point);
}

㉠ h2 가을 소풍
㉡ p 신청은
㉢ a 여기
㉣ p 지난 사진은
㉤ a 앨범

힌트

다섯 요소마다 나무에서 .trip 안에 드는지 표시하고, 글자색에 var(--point)를 쓰는 요소인지 따로 표시해 보세요.

힌트 둘

변수는 글자색처럼 조상에서 후손으로 물려받습니다. var()는 그 요소가 물려받은 값을 꺼냅니다.

정답

㉠㉢

결과 화면

잰 값개발자 도구에서 본 값

.trip h2의 글자색rgb(215, 0, 21)
.trip p의 글자색rgb(0, 0, 0)
.trip a의 글자색rgb(215, 0, 21)
.trip + p의 글자색rgb(0, 0, 0)
.trip + p a의 글자색rgb(0, 91, 181)

h2 · a 규칙은 하나지만, 각 요소가 물려받은 --point를 꺼냅니다. .trip 안의 ㉠ · ㉢은 가장 가까운 조상 .trip의 빨강을, 구역 밖의 ㉤은 :root의 파랑을 물려받았습니다(브라우저 규칙 5).
㉢은 .trip의 손자지만 물려받기는 자식 · 손자를 가리지 않고 이어집니다.
㉡도 --point의 빨강을 물려받았지만, 그 변수를 꺼내 쓰는 선언이 없어 글자색은 검정입니다. 변수를 물려받는 것과 그 색으로 칠하는 것은 다릅니다.
㉠㉢㉤은 변수가 어디에서나 하나의 값이라 나중에 둔 빨강이 이긴다고 본 것입니다. .trip 규칙은 .trip과 그 안에만 닿습니다.
㉠만 골랐다면 변수가 자식에게만 간다고 본 것입니다(다 물려받는다는 생각의 반대 쪽).

다시 볼 레슨: CSS 변수 · 물려받기

문제 8

레시피 노트 배지의 글자색을 강조색 변수로 바꾸려고, 아래에 규칙을 하나 더 썼습니다. 배지 '한식'의 글자색은 무엇일까요? 색 값을 쓰세요.

<span class="badge">한식</span>

:root {
  --accent: #005bb5;
}

.badge {
  color: #6e6e73;
}

.badge {
  color: var(accent);
}

힌트

둘째 .badge 규칙의 var() 괄호 안을 :root의 변수 이름과 한 글자씩 견줘 보세요.

힌트 둘

var() 안에는 --로 시작하는 이름이 와야 합니다. 브라우저가 알아듣지 못한 선언은 어떻게 되는지 떠올리세요.

정답

받는 답: #6e6e73. rgb(110, 110, 115) · rgb(110 110 115)도 같은 답입니다.

결과 화면

잰 값개발자 도구에서 본 값

.badge의 글자색rgb(110, 110, 115)

var(accent)는 --가 빠져 브라우저가 알아듣지 못하는 값이라, 둘째 규칙의 선언을 통째로 버립니다(브라우저 규칙 4). 버린 선언은 없던 것과 같아 첫째 규칙의 회색이 남습니다.
흔한 오답은 #005bb5입니다. 브라우저가 --를 채워 읽는다고 본 것입니다.
부모의 글자색(검정)을 쓴 것은 이름 오타와 같은 결과라고 본 것입니다. 부모의 값이나 처음 값으로 가는 것은 var(--acent)처럼 꼴이 맞는 이름에 오타가 났을 때입니다 — 6번의 --sky와 견줘 보세요.

다시 볼 레슨: CSS 변수 · 규칙의 모양

문제 9

레시피 노트 내비게이션에서 지금 보는 페이지의 링크에 강조색 아래 선을 굵게 주고, 같은 규칙 아래에 얇은 테두리 한 줄을 더했습니다. (가) 이 링크의 아래 테두리 굵기는 몇 px일까요? (나) 아래 테두리 색은 어느 변수의 색일까요?

<a
  class="current"
  href="index.html"
>레시피 목록</a>

:root {
  --line: #d2d2d7;
  --accent: #005bb5;
}

.current {
  border-bottom:
    3px solid var(--accent);
  border: 1px solid var(--line);
}

힌트

.current의 두 선언을 풀어 적은 속성으로 나눠, 아래 테두리의 굵기 · 색을 정하는 줄을 모두 적어 보세요.

힌트 둘

짧게 적기 border는 네 방향 테두리를 한꺼번에 정합니다.

정답

(가) 1 · (나) --line

결과 화면

잰 값개발자 도구에서 본 값

.current의 border-bottom-width1px
.current의 border-bottom-colorrgb(210, 210, 215)

둘째 줄 border는 짧게 적기라 네 방향의 굵기 · 종류 · 색을 모두 다시 정합니다. 아래 테두리도 그 안에 들어, 앞에서 정한 3px 강조색을 1px 선 색으로 되돌립니다(브라우저 규칙 4).
흔한 오답은 3 · --accent입니다. 짧게 적기가 앞에서 정한 칸은 건드리지 않는다고 본 것입니다(짧게 적기는 적은 칸만 바꾼다는 생각). 아래 선을 살리려면 두 줄의 차례를 바꿉니다 — border를 먼저, border-bottom을 뒤에.

다시 볼 레슨: 여백 짧게 적기 · CSS 변수

문제 10

하고 싶은 일에 쓸 이름을 쓰세요.

(가) 요소를 안의 글자와 자식까지 통째로 반투명하게 그리는 CSS 속성
(나) 문서의 뿌리 요소를 고르는 가상 클래스
(다) 브라우저 창에서 페이지가 보이는 칸의 폭을 100으로 나눈 한 칸의 단위
(라) 변수에 담아 둔 값을 그 자리에 꺼내 쓰는 CSS 함수

힌트

(가)는 반투명한 색과 견준 속성, (나)는 변수 여섯을 둔 자리, (다)는 화면을 기준으로 재는 단위 둘 가운데 하나입니다.

정답

받는 답: (가) opacity · (나) :root · (다) vw · (라) var()

같은 답으로 치는 꼴: (라) var만 써도, var(--accent)처럼 이름을 넣어 써도 됩니다.
틀리는 꼴 — (가) rgb(0 0 0 / 0.5)처럼 색에 붙인 불투명도는 그 색만 비치게 하고 글자는 또렷합니다. (나) html은 같은 요소를 고르는 태그 선택자라 이름이 다릅니다 — 변수를 두는 자리로는 둘 다 됩니다. 앞의 콜론을 뺀 root는 root라는 태그를 고르는 선택자가 되어 아무것도 고르지 않습니다. (다) vh는 높이의 1%, %는 부모의 내용 칸이 기준입니다.

다시 볼 레슨: 반투명한 색 · CSS 변수 · 단위마다 기준

문제 11

레시피 노트 재료 목록의 줄 사이 선을 선 역할 변수로 바꿨더니 선이 모두 사라졌습니다. 개발자 도구에서 재료 줄을 골라 보니 Styles 창에 .ingredient-list li 규칙이 보이고, 취소선도 경고 표시도 없습니다. Computed 창의 border-bottom-style은 none입니다. CSS 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<ul class="ingredient-list">
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
  <li>달걀 2개</li>
</ul>

:root {
  --line: #d2d2d7;
}

.ingredient-list li {
  padding: 4px 0;
  border-bottom:
    1px solid var(--lin);
}

결과 화면

힌트

찾는 차례대로 1번부터 지워 가세요. Styles 창에서 이긴 선언이 무엇을 꺼내 쓰는지까지 봅니다.

힌트 둘

이긴 선언의 var() 안 이름과 :root에 만든 이름을 한 글자씩 견줘 보세요.

정답

받는 답: CSS 8번 줄을 1px solid var(--line);⁠으로 고칩니다 — 변수 이름에서 빠진 e를 넣습니다.

<ul class="ingredient-list">
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
  <li>달걀 2개</li>
</ul>

:root {
  --line: #d2d2d7;
}

.ingredient-list li {
  padding: 4px 0;
  border-bottom:
    1px solid var(--line);
}

결과 화면

잰 값개발자 도구에서 본 값

.ingredient-list li의 border-bottom-stylesolid
.ingredient-list li의 border-bottom-colorrgb(210, 210, 215)

찾는 차례 5번에서 none을 보고, 4번의 이긴 선언으로 돌아가 찾습니다.

1번 · 3번 — Styles 창에 .ingredient-list li 규칙이 보이니 파일도 닿았고 규칙도 이 줄에 닿았습니다.
2번 — Elements 패널에 li 셋이 ul 안에 있습니다.
4번 — border-bottom 선언에 취소선도 경고 표시도 없습니다. 알아들었고 이겼습니다.
5번 — 그런데 Computed 창의 선 종류가 none입니다. 이긴 선언의 값을 다시 보면 var(--lin) — :root에 만든 이름은 --line입니다. Styles 창에서 var(--lin)에 마우스를 올리면 그런 변수가 없다는 안내가 뜹니다(크롬 기준).

꺼낼 변수가 없으면 닿는 선언이 없을 때처럼 처음 값이 됩니다. 선 종류의 처음 값은 none이라 선이 그려지지 않습니다(브라우저 규칙 5).

다르게 고쳐도 되는 곳: :root의 이름을 --lin으로 바꿔도 이 조각에서는 선이 돌아옵니다. 다만 레시피 노트의 다른 규칙들이 --line을 꺼내 쓰니, 쓰는 쪽 한 곳을 고치는 편이 맞습니다.

흔한 오답은 선언에 !important를 붙이는 것입니다. 이미 이긴 선언이라 그대로 선이 없습니다.
var(--lin) 자리에 #d2d2d7을 바로 적으면 선은 돌아오지만, 다음에 선 색을 --line 한 줄로 바꿀 때 이 줄만 남습니다 — 증상만 덮은 것입니다.

다시 볼 레슨: CSS 변수 · 상자 네 겹

문제 12 (만들어 보기)

독서 동아리 공지 칸의 CSS입니다. 색 값이 여러 곳에 흩어져 있습니다.

<div class="notice">
  금요일 모임은
  <a href="room.html">2층</a>
</div>

.notice {
  background: #fff6cc;
  border-left:
    4px solid #d70015;
}

.notice a {
  color: #d70015;
}

결과 화면

색을 역할 변수 둘, 곧 --surface(바탕 위에 올라앉은 면)와 --accent(강조)로 :root에 모으고, 쓰는 곳은 변수에서 꺼내도록 … 자리를 채우세요.

/* 1. 색을 변수로 모으기 */
:root {
  …
}

.notice {
  background: …;
  border-left:
    4px solid …;
}

.notice a {
  color: …;
}

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

화면이 모으기 전과 같다.
:root의 --accent 한 줄만 #15803d로 바꾸면 왼쪽 선과 링크가 함께 초록이 된다.

힌트

먼저 색 값 셋을 적고, 같은 값끼리 묶어 어느 역할인지 이름을 붙이세요.

정답

모범 답입니다.

<div class="notice">
  금요일 모임은
  <a href="room.html">2층</a>
</div>

/* 1. 색을 변수로 모으기 */
:root {
  --surface: #fff6cc;
  --accent: #d70015;
}

.notice {
  background: var(--surface);
  border-left:
    4px solid var(--accent);
}

.notice a {
  color: var(--accent);
}

결과 화면

잰 값개발자 도구에서 본 값

.notice의 background-colorrgb(255, 246, 204)
.notice의 border-left-colorrgb(215, 0, 21)
.notice a의 글자색rgb(215, 0, 21)

둘째 결과 — --accent 한 줄만 바꾸면 두 곳이 함께 바뀝니다. 첫 결과 화면은 앞 코드, 둘째 결과 화면은 한 줄을 더한 뒤입니다.

:root {
  --accent: #15803d;
}

결과 화면

잰 값개발자 도구에서 본 값

.notice의 border-left-colorrgb(21, 128, 61)
.notice a의 글자색rgb(21, 128, 61)

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

다르게 써도 되는 곳:

:root 안 두 줄의 차례는 바꿔도 됩니다.
background 대신 background-color로 써도 이 칸은 같습니다.

흔한 잘못:

var() 없이 color: --accent;처럼 이름만 쓰면 알아듣지 못하는 값이라 그 선언이 버려집니다. 링크는 기본 스타일의 파랑이 됩니다.
왼쪽 선과 링크 가운데 한 곳에 #d70015를 그대로 두면, 둘째 결과에서 그곳만 빨강으로 남습니다. 같은 값이 두 곳에 있으면 모두 변수로 바꿉니다.
이름을 --red처럼 색으로 지으면, 강조색을 초록으로 바꾸는 순간 이름이 거짓말을 합니다. 이름은 역할로 짓습니다.

다시 볼 레슨: CSS 변수

문제 13 (만들어 보기)

레시피 노트의 열째 단계입니다(⟨컴퓨터⟩ · 25분 안팎 · 걸음마다 멈춰도 됩니다). 글자 크기를 rem으로 옮기고, 흩어진 색을 역할 변수 여섯으로 모으고, 카드 그림자를 반투명한 검정으로 바꿉니다. 10단원 연습 문제의 만들어 보기를 마쳤다면 그 폴더에서 이어 갑니다.

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

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

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

할 일 — 걸음 넷입니다. 이 단계는 style.css만 고칩니다.

걸음 1 — 글자 크기를 rem으로. style.css의 font-size 값 가운데 px로 적은 것을 모두 16으로 나눈 rem으로 옮깁니다.

고를 요소	지금
`body` · 단추 · 글자 칸 · 한 줄 평 칸 · 별점 칸	16px
`h1`	32px
`h2`	22px
바닥글 · 배지	14px

걸음 2 — 색 변수 여섯. 파일 맨 위, 리셋 구역보다 앞에 /* 색 */ 구역을 두고 :root에 여섯 변수를 만듭니다.

변수	역할	값
`--bg`	페이지 바탕	`#f5f5f7`
`--surface`	바탕 위에 올라앉은 면	`#ffffff`
`--text`	글자	`#1d1d1f`
`--muted`	보조 글자	`#6e6e73`
`--line`	선	`#d2d2d7`
`--accent`	링크 · 강조 · 단추	`#005bb5`

걸음 3 — 색을 변수에서 꺼내기. :root 밖에 남은 색 값을 모두 역할에 맞는 var()로 바꿉니다. 값이 같아도 역할로 고릅니다 — 공통 단추 · 배지의 바탕은 --bg, 공통 단추에 마우스를 올린 바탕은 --line, 제출 단추의 흰 글자는 --surface, 마우스를 올린 제출 단추의 바탕은 --text입니다. 더해서 카드 안 문단('조리 15분')의 글자색을 --muted로, 글자 칸 · 한 줄 평 칸 · 별점 칸의 바탕과 글자색을 --surface · --text로 줍니다.

걸음 4 — 그림자. 카드 그림자의 색만 반투명한 검정 rgb(0 0 0 / 0.1)로 바꿉니다.

확인 목록:

글자 크기 설정이 처음 그대로이면 두 페이지의 모양이 걸음 1 전과 같다 — 제목 '레시피 목록'의 font-size가 32px이다(화면 · Computed 창 · 걸음 1).
크롬 글꼴 크기를 '크게'로 바꾸면 제목 · 본문 · 단추 글자가 함께 커진다 — 제목이 40px이다. 확인한 뒤 '중간(권장)'으로 되돌린다(화면 · Computed 창 · 걸음 1).
style.css에서 # 기호로 시작하는 색 값은 :root 안의 여섯 줄에만 있다(편집기 · 걸음 3).
--accent 한 줄을 #15803d로 바꾸면 링크 · 배지 글자 · 제출 단추 바탕 · 칸의 포커스 윤곽선이 함께 초록이 된다. 확인한 뒤 되돌린다(화면 · 걸음 3).
카드의 '조리 15분' 줄이 카드 제목보다 옅은 회색이다(화면 · 걸음 3).
카드 그림자의 색이 Computed 창에서 rgba(0, 0, 0, 0.1)이다(Computed 창 · 걸음 4).

폰으로만 따라왔다면 이 물음 하나로 대신합니다. 걸음 3을 마친 style.css에서 --line 한 줄의 값을 바꾸면 색이 바뀌는 곳은 어디일까요?

① 카드 테두리
② 바닥글 글자
③ 링크 글자

힌트

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 3은 색 값마다 무엇을 칠하는지 — 바탕 · 면 · 글자 · 보조 글자 · 선 · 강조 — 먼저 적고 이름을 고릅니다.

정답

모범 답입니다. 바뀐 곳 가운데 몇 곳만 싣습니다 — 다 고친 style.css는 아래 받기 파일과 같습니다(index.html · kimchi.html은 10단원 끝 상태 그대로).

/* 색 */
:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --line: #d2d2d7;
  --accent: #005bb5;
}

/* 레시피 목록 */
…
.recipe-card {
  …
  border:
    1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow:
    0 2px 8px rgb(
      0 0 0 / 0.1
    );
}

.recipe-card p {
  margin: 8px 0 0;
  color: var(--muted);
}

style.css 받기

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

<div class="recipe-card">
  <h2>김치볶음밥</h2>
  <p>조리 15분</p>
</div>

:root {
  --surface: #ffffff;
  --muted: #6e6e73;
  --line: #d2d2d7;
}

h2 {
  font-size: 1.375rem;
}

결과 화면

.recipe-card {
  padding: 16px;
  border:
    1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow:
    0 2px 8px rgb(
      0 0 0 / 0.1
    );
}

.recipe-card p {
  color: var(--muted);
}

결과 화면

잰 값개발자 도구에서 본 값

h2의 font-size22px
h2의 글자 배율1.38
.recipe-card의 box-shadowrgba(0, 0, 0, 0.1) 0px 2px 8px 0px
.recipe-card p의 글자색rgb(110, 110, 115)

첫 결과 화면은 앞 CSS만, 둘째 결과 화면은 이어 쓴 CSS까지 그린 것입니다.

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

다르게 써도 되는 곳:

:root 안 여섯 줄의 차례, 한 규칙 안 선언의 차례는 바꿔도 됩니다.
그림자 색은 rgb(0 0 0 / 10%) · rgba(0, 0, 0, 0.1)로 적어도 같은 색입니다.
여백 · 테두리 굵기 · 둥근 모서리는 px 그대로 둡니다. 글자와 함께 넓어지길 바라는 곳이 있으면 rem으로 옮겨도 됩니다.

흔한 잘못:

걸음 1에서 단추 · 칸의 font-size를 빠뜨리면, '크게'에서 본문은 커지는데 단추 글자와 칸 글자만 16px 그대로입니다. 단추와 칸은 기본 스타일이 글자 크기를 직접 정해 body에서 물려받지 않습니다.
제출 단추의 흰 글자를 --white 같은 새 변수로 만들면, 16단원 다크 모드에서 강조색이 밝은 하늘색으로 바뀔 때 흰 글자가 바탕에 묻힙니다. 여섯 역할 가운데에서 고릅니다 — 바탕 위에 올라앉은 면의 색이라 --surface입니다.
var(--muted)의 이름을 틀리면 오류 없이 카드 문단이 부모의 글자색이 됩니다. 확인 목록의 회색 줄로 찾습니다.

폰 물음의 답은 ①입니다. ②는 --muted, ③은 --accent를 꺼내 씁니다.

다시 볼 레슨: 글자 크기는 rem · 반투명한 색 · CSS 변수