단원 연습 문제

마우스를 올린 뒤와 뗀 뒤에 링크에 닿는 규칙을 각각 적어 보세요.

이어 그리는 시간은 값이 바뀐 뒤 그 요소에 닿는 transition에서 옵니다.

(가) 0.3 · (나) 0

마우스를 뗀 링크에는 a 규칙만 닿습니다.

마우스를 올린 링크에는 a:hover 규칙까지 닿습니다.

<a href="join.html">
  가입 안내
</a>

a {
  color: #005bb5;
}

a:hover {
  color: #d70015;
  transition: color 300ms;
}

• 마우스를 올릴 때는 :hover까지 닿은 상태가 '바뀐 뒤'라 0.3초 동안 빨강으로 이어집니다. 뗄 때는 기본 규칙만 닿은 상태가 '바뀐 뒤'인데, 그 규칙에 전환이 없어 처음 값 0초 — 파랑으로 툭 돌아옵니다.
• (나)를 0.3이라고 썼다면 한 번 닿은 전환이 남는다고 본 것입니다. 뗄 때도 이어지게 하려면 transition 줄을 a 규칙으로 옮깁니다.
• 0.3s · 300ms로 써도 같은 답입니다.

다시 볼 레슨: transition

:hover 규칙이 바꾸는 속성을 하나씩 적어 보세요.

적은 속성을 transition의 목록과 견줘 보세요. 목록에 없는 속성은 바뀌는 과정을 정한 선언이 없습니다.

③입니다. 아래 잰 값은 마우스를 올리고 전환이 끝난 뒤의 값입니다.

<p class="menu">
  레몬에이드 5000
</p>

.menu {
  border: 2px solid #d2d2d7;
  transition:
    color 300ms ease,
    border-color 300ms ease;
}

.menu:hover {
  border-color: #005bb5;
  background-color: #e8f3ff;
}

• 전환은 적은 속성의 값이 바뀔 때만 이어 그립니다. border-color는 목록에 있어 0.3초 동안 이어지고, background-color는 목록에 없어 한순간에 바뀝니다. color는 글자색이라 바탕색과 다른 속성이고, 이 칸에서는 글자색이 바뀌지 않아 하는 일이 없습니다.
• ①은 transition을 적으면 바뀌는 값이 모두 이어진다고, 또는 color가 바탕색까지 정한다고 본 것입니다. 바탕색도 잇고 싶으면 목록의 color를 background-color로 바꿉니다.
• ②는 기본 규칙의 전환은 마우스를 뗄 때만 쓰인다고 본 것입니다. 기본 규칙은 :hover 상태에도 그대로 닿아, 올릴 때와 뗄 때 모두 쓰입니다.

다시 볼 레슨: transition

짝마다 두 코드에서 다른 줄을 찾고, '2일'과 '3일'이 어디에 놓일지 종이에 그려 보세요.

짝마다 다른 줄이 배치를 바꾸는지, 그리기만 바꾸는지 나눠 보세요. transform은 배치가 끝난 뒤 그려진 모습만 바꾸고, relative 상자는 옮겨 놓아도 원래 자리를 그대로 차지합니다.

(가) 같다 · (나) 다르다 — 뒤 코드는 '3일'이 오른쪽으로 밀리고 '2일' 앞 틈이 넓다 · (다) 다르다 — 뒤 코드는 줄이 높아지고 '3일'이 오른쪽으로 밀린다

• (가) 두 줄 모두 '2일'의 원래 자리를 남긴 채 그려진 모습만 12px 오른쪽에 둡니다. '3일'은 원래 자리를 보고 놓여 그대로이고, 옮긴 '2일'이 '3일' 앞쪽에 겹칩니다(브라우저 규칙 8).
• (나) 바깥 여백은 배치의 일이라 '2일'과 함께 '3일'도 12px 밀립니다. 겹치지 않습니다.
• (다) scale(1.5)는 그려진 크기만 키워 이웃 자리는 그대로이고 '2일'이 양옆 글에 겹칩니다. 글자 크기를 키우면 배치가 다시 되어 줄이 높아지고 '3일'이 밀립니다.
• (가)를 다르다고 했다면 transform이 상자를 옮겨 이웃이 비켜 준다고 본 것입니다(transform이 배치라는 생각). (나)를 같다고 한 것도 같은 생각입니다.
• (다)를 같다고 했다면 scale()이 글자를 키우는 것과 같다고 본 것입니다. 배율로 그리기만 할 뿐 배치는 그대로입니다.

다시 볼 레슨: transform으로 옮기고 키우기 · 일반 흐름과 position

먼저 transform이 없을 때 이 칸이 차지하는 너비를 상자 셈으로 적어 보세요.

(가) 168 · (나) 224

• 배치 너비는 상자 셈 그대로 224입니다(브라우저 규칙 6). scale(0.75)는 배치가 끝난 뒤 그 상자를 0.75배로 그려 224 × 0.75 = 168입니다(브라우저 규칙 8).
• 150 · 200이라고 썼다면 width가 차지하는 너비라고 본 것입니다(width가 차지하는 너비라는 생각).
• (나)를 168이라고 썼다면 scale()이 배치 크기도 줄인다고 본 것입니다(transform이 배치라는 생각). 아래 요소는 224 너비의 원래 자리를 보고 놓입니다.

다시 볼 레슨: 너비와 box-sizing · transform으로 옮기고 키우기

'추천'부터 바깥으로 p · body · html을 나무로 적고, 요소마다 준 position을 옆에 써 보세요.

기준 상자는 부모가 아니라 바깥으로 찾은 첫 position 조상이고, 없으면 페이지입니다. 적은 칸(top)과 적지 않은 칸(left)도 나눠 보세요.

① — '추천'이 메뉴 이름 뒤에서 페이지 맨 위로 올라가 있습니다.

• 기준 상자는 나무를 따라 바깥으로 찾은 첫 position 조상입니다. p · body · html 어디에도 없어 페이지가 기준 상자이고, top: 0은 페이지 맨 위입니다(브라우저 규칙 8).
• left를 적지 않아 가로는 원래 있던 자리 — 메뉴 이름 바로 뒤 — 그대로입니다.
• ②는 부모 p를 기준 상자로 본 것입니다(부모 기준이라는 생각). 부모가 기준 상자가 되려면 부모에 position: relative를 줍니다.
• ③은 적지 않은 left도 0이 된다고 본 것입니다. top만 적은 상자는 가로로 원래 자리에 떠 있습니다.

다시 볼 레슨: 기준 상자와 absolute · 일반 흐름과 position

움직임 줄이기에서 마우스를 올린 그림에 닿는 선언을 기본 규칙 · :hover 규칙 · 조건 블록 순으로 적어 보세요.

transition: none은 바뀌는 과정만 없앱니다. 끝 모양인 transform은 그대로 닿습니다.

모범 답입니다 — 레슨의 꼴대로 전환과 변형을 둘 다 끕니다.

@media (
  prefers-reduced-motion
) {
  .dish {
    transition: none;
  }

  .dish:hover {
    transform: none;
  }
}

첫 결과 — 움직임 줄이기를 켜고 마우스를 올린 뒤입니다. 결과 화면은 앞 CSS만 그린 것과 조건 블록까지 그린 것이 차례로 나옵니다.

<img
  class="dish"
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="200"
  height="150"
>

.dish {
  transition:
    transform 200ms ease;
}

.dish:hover {
  transform: scale(1.05);
}

@media (
  prefers-reduced-motion
) {
  .dish {
    transition: none;
  }

  .dish:hover {
    transform: none;
  }
}

둘째 결과 — 같은 코드를 움직임 줄이기 없이 마우스를 올린 뒤입니다.

<img
  class="dish"
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="200"
  height="150"
>

.dish {
  transition:
    transform 200ms ease;
}

.dish:hover {
  transform: scale(1.05);
}

@media (
  prefers-reduced-motion
) {
  .dish {
    transition: none;
  }

  .dish:hover {
    transform: none;
  }
}

정답의 코드는 줄 폭 때문에 : reduce를 뺀 꼴로 적었습니다 — 같은 뜻입니다.

다르게 써도 되는 곳:

• .dish:hover 규칙에 transform: none 하나만 써도 결과 둘이 맞습니다 — 끝 모양이 그대로면 이어 그릴 것도 없습니다. 레슨의 꼴처럼 전환도 함께 끄면 뒤에 :hover에 다른 값을 더해도 움직임 줄이기에서 이어 그리지 않습니다.
• transform: none 대신 transform: scale(1)도 원래 크기입니다.

흔한 잘못:

• .dish { transition: none; }⁠만 쓰면 첫 결과에서 그림이 한순간에 210px로 커집니다 — 전환만 끄면 순간 이동입니다.
• 조건 블록을 기본 규칙 위로 옮기면 나중에 쓴 .dish:hover가 이겨 그대로 커집니다.

다시 볼 레슨: 움직임 줄이기

어두운 화면에서 --surface의 값을 먼저 정하고, 카드와 후기 칸이 각각 무엇으로 칠해지는지 적어 보세요.

입력 칸 · 후기 칸은 브라우저가 기본 모양으로 그립니다. 그 모양을 어두운 화면에 맞추는 한 줄이 이 코드에 있는지 보세요.

②입니다. 결과 화면은 밝은 화면으로 그려집니다 — 첫째는 앞 CSS만, 둘째는 조건 블록까지 그린 것이고, 아래 잰 값이 어두운 화면에서 잰 값입니다.

• 조건이 맞아 --surface가 #1d2633이 되고, var(--surface)로 칠한 카드는 규칙을 한 글자도 바꾸지 않았는데 함께 어두워집니다. var()는 지금의 변수 값을 꺼냅니다.
• 후기 칸은 우리가 칠하지 않아 브라우저가 기본 모양으로 그립니다. :root에 color-scheme: light dark⁠가 없어 어두운 화면에서도 흰 칸입니다.
• ①은 var()가 처음에 꺼낸 값을 한 번 베껴 둔다고 본 것입니다.
• ③은 변수를 바꾸면 브라우저가 그리는 칸까지 바뀐다고 본 것입니다. 칸은 color-scheme: light dark⁠를 더해야 어두워집니다(크롬에서는 rgb(59, 59, 59) — 칸 모양은 브라우저마다 다릅니다).

다시 볼 레슨: 변수만 바꾸는 다크 모드

어두운 화면에서 '찾아오는 길'에 닿는 color 선언 둘을 손 점수판에 적어 보세요.

조건 블록은 그 안 규칙이 닿을지만 정합니다. 닿은 뒤에는 다른 규칙과 같은 차례로 겨룹니다.

받는 답: #005bb5 — 어두운 화면에서도 짙은 파랑 그대로입니다.

• 어두운 화면에서는 조건이 맞아 블록 안 a 규칙도 닿습니다. 그래도 출처가 같아 명시도로 가르고, 클래스 칸에서 .notice a가 이깁니다. 조건 블록은 명시도를 올리지 않아 차례 칸까지 가지 않습니다(브라우저 규칙 5).
• #9ac7ff라고 썼다면 나중에 쓴 쪽이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각).
• rgb(0, 91, 181) · rgb(0 91 181)도 같은 답입니다.
• 링크 색을 var(--accent)로 꺼내 쓰고 조건 블록에서 :root의 변수 값만 바꾸면 이런 겨룸이 생기지 않습니다 — 다크 모드 틀의 하위 목표 2입니다.

다시 볼 레슨: 명시도 · 변수만 바꾸는 다크 모드

(가) · (나)는 영어 낱말 하나이고, (다) · (라)는 낱말 둘 · 셋을 하이픈(-)으로 이은 이름입니다.

받는 답: (가) transition · (나) transform · (다) prefers-reduced-motion · (라) color-scheme

• (다)는 @media (prefers-reduced-motion: reduce)⁠처럼 값 reduce까지 쓴 꼴도 같은 답입니다.
• (가)와 (나)를 바꿔 쓰기 쉽습니다. transition은 두 상태 사이를 잇는 과정, transform은 그려진 모습 자체를 바꾸는 일입니다.
• (라)를 prefers-color-scheme이라고 썼다면 어두운 화면을 골랐는지 읽는 조건과 헷갈린 것입니다. 조건은 닿을 규칙을 고르고, color-scheme은 브라우저가 그리는 칸 모양을 맞춥니다.

다시 볼 레슨: transition · transform으로 옮기고 키우기 · 움직임 줄이기 · 변수만 바꾸는 다크 모드

찾는 차례대로 1번부터 지워 가세요. 취소선은 그 선언이 무엇에 졌다는 표시인지 떠올립니다.

한 속성에 선언이 둘이면 나중 것이 이깁니다. 옮기기 둘을 함께 하려면 한 선언에 이어 적습니다.

받는 답: 7번 줄의 translateY(-4px) 앞에 translateX(8px)을 더해, 두 함수를 한 transform 선언에 잇습니다. 고친 style 요소 안 규칙을 떼어 그리면 이렇습니다.

<div class="stamp">오늘</div>

.stamp {
  width: 64px;
  height: 32px;
  background: #ffe0e0;
  transform:
    translateX(8px)
    translateY(-4px);
}

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

• 1번 — 도장이 위로 4px 옮겨졌으니 규칙은 닿았습니다.
• 2번 — Elements 패널에 div.stamp가 있습니다.
• 3번 — Styles 창에 .stamp 규칙이 보입니다.
• 4번 — 경고 표시가 없으니 두 줄 모두 알아들었습니다. 이겼나를 봅니다. translateX(8px) 줄의 취소선은 같은 속성 transform의 다른 선언에 졌다는 표시입니다. 같은 규칙 안이라 나중에 쓴 7번 줄이 이겨 위로만 옮깁니다(브라우저 규칙 5).

두 선언은 합쳐지지 않습니다. 옮기기 둘을 한 선언에 빈칸으로 이어 적으면 둘 다 그려집니다. 도장은 원래 자리(왼쪽 8 · 위 8 — body의 바깥 여백)를 남긴 채 오른쪽으로 8 · 위로 4 옮겨 그려집니다(브라우저 규칙 8).

다르게 고쳐도 되는 곳:

• 6번 줄을 두 함수를 이은 선언으로 고치고 7번 줄을 지워도 같습니다 — 줄 둘을 고쳐야 해서 받는 답으로 두지 않았습니다.

• 두 함수의 차례를 바꿔 translateY()를 먼저 적어도 같은 자리입니다 — 옮기기끼리는 차례가 결과를 바꾸지 않습니다.

• 7번 줄을 고친 뒤 6번 줄은 지는 줄로 남습니다. 지워 두면 Styles 창이 깔끔합니다.

• 흔한 오답은 6번 줄에 !important를 붙이는 것입니다. 그러면 오른쪽으로만 옮겨지고 위로는 가지 않습니다 — 이긴 선언이 바뀔 뿐 둘이 합쳐지지 않습니다.

• 6번 · 7번 줄의 차례만 바꾸는 것도 흔합니다. 이번에는 오른쪽으로만 옮겨집니다.

다시 볼 레슨: transform으로 옮기고 키우기 · 나중에 쓴 규칙

하위 목표 2는 조건 블록 안에 어느 선택자를 두는지, 3은 어느 요소에 한 번 두면 모든 칸이 따르는지 먼저 정하세요.

모범 답입니다.

/* 2. 어두운 값 */
@media (
  prefers-color-scheme: dark
) {
  :root {
    --surface: #1d2633;
    --text: #f1f4f8;
    --line: #3a4552;
  }
}

/* 3. color-scheme */
:root {
  color-scheme: light dark;
}

첫 결과 — 밝은 화면입니다.

<form class="order">
  <label for="memo">
    주문 메모
  </label>
  <input id="memo">
</form>

:root {
  --surface: #ffffff;
  --text: #1d1d1f;
  --line: #d2d2d7;
}

.order {
  padding: 16px;
  border:
    1px solid var(--line);
  color: var(--text);
  background-color:
    var(--surface);
}

@media (
  prefers-color-scheme: dark
) {
  :root {
    --surface: #1d2633;
    --text: #f1f4f8;
    --line: #3a4552;
  }
}

:root {
  color-scheme: light dark;
}

둘째 결과 — 같은 코드를 어두운 화면에서 잰 값입니다. 결과 화면은 밝은 화면으로 그려집니다.

<form class="order">
  <label for="memo">
    주문 메모
  </label>
  <input id="memo">
</form>

:root {
  --surface: #ffffff;
  --text: #1d1d1f;
  --line: #d2d2d7;
}

.order {
  padding: 16px;
  border:
    1px solid var(--line);
  color: var(--text);
  background-color:
    var(--surface);
}

@media (
  prefers-color-scheme: dark
) {
  :root {
    --surface: #1d2633;
    --text: #f1f4f8;
    --line: #3a4552;
  }
}

:root {
  color-scheme: light dark;
}

주문 메모 칸의 rgb(59, 59, 59)는 크롬이 그린 어두운 칸 모양입니다 — 칸 모양은 브라우저마다 다르니, 어두운 칸으로 그려졌는지는 color-scheme이 light dark인지로 봅니다.

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

다르게 써도 되는 곳:

• color-scheme: light dark;⁠를 하위 목표 1의 :root 끝에 넣어도 같습니다.
• 조건 블록 안 세 줄의 차례는 바꿔도 됩니다.
• prefers-color-scheme: dark⁠를 한 줄에 써도 같습니다 — 줄 나누기는 줄 폭 때문입니다.

흔한 잘못:

• 조건 블록 안에 .order 규칙을 다시 적고 어두운 색을 값으로 쓰면, 이 폼은 어두워져도 다음에 변수를 쓰는 곳을 더할 때마다 블록에 또 적어야 합니다.
• 조건 블록을 하위 목표 1의 :root 위에 두면 나중에 쓴 밝은 값이 이겨 어두운 화면에서도 밝은 채입니다.
• 하위 목표 3을 빠뜨리면 폼은 어두워지는데 주문 메모 칸만 흰 채로 남습니다.

다시 볼 레슨: 변수만 바꾸는 다크 모드

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

• index.html 받기
• kimchi.html 받기
• style.css 받기

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

• kimchi.svg 받기
• gyeran-mari.svg 받기
• doenjang.svg 받기
• tteokbokki.svg 받기
• japchae.svg 받기
• miyeok-guk.svg 받기

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 2는 끌 것이 전환인지 떠오른 모양인지 둘 다인지 먼저 적고, 걸음 3은 조건 블록 안의 선택자부터 정합니다.

모범 답입니다. 바뀐 곳만 싣습니다 — 다 고친 style.css는 아래 받기 파일과 같습니다(index.html · kimchi.html은 15단원 끝 상태 그대로). 정답의 코드는 줄 폭 때문에 : reduce를 뺀 꼴로 적었습니다 — 받기 파일에는 적혀 있고, 같은 뜻입니다.

/* 색 */
:root {
  …
  --accent: #005bb5;
  color-scheme: light dark;
}

@media (
  prefers-color-scheme: dark
) {
  :root {
    --bg: #121820;
    --surface: #1d2633;
    --text: #f1f4f8;
    --muted: #a3adb8;
    --line: #3a4552;
    --accent: #9ac7ff;
  }
}

.recipe-card {
  …
  transition:
    transform 180ms ease;
}

.recipe-card:hover {
  transform:
    translateY(-4px);
}

@media (
  prefers-reduced-motion
) {
  .recipe-card {
    transition: none;
  }

  .recipe-card:hover {
    transform: none;
  }
}

fieldset {
  border:
    1px solid var(--line);
}

• style.css 받기

카드 하나를 떼어 잰 값입니다. 받기 파일과 같은 선언만 골랐습니다. 결과 화면은 늘 밝은 화면 · 마우스를 올리기 전으로, 앞 CSS만 그린 것과 이어 쓴 CSS까지 그린 것이 차례로 나옵니다.

걸음 3 — 어두운 화면에서 잰 값입니다.

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

:root {
  --bg: #f5f5f7;
  --surface: #ffffff;
}

body {
  background: var(--bg);
}

.recipe-card {
  background: var(--surface);
}

@media (
  prefers-color-scheme: dark
) {
  :root {
    --bg: #121820;
    --surface: #1d2633;
  }
}

걸음 2 — 움직임 줄이기에서 카드에 마우스를 올린 뒤 잰 값입니다.

<div class="recipe-card">
  김치볶음밥
</div>

.recipe-card {
  transition:
    transform 180ms ease;
}

.recipe-card:hover {
  transform:
    translateY(-4px);
}

@media (
  prefers-reduced-motion
) {
  .recipe-card {
    transition: none;
  }

  .recipe-card:hover {
    transform: none;
  }
}

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

다르게 써도 되는 곳:

• color-scheme: light dark;⁠는 따로 :root 규칙을 하나 더 두어 적어도 같습니다.
• 움직임 줄이기 조건 블록은 .recipe-card:hover 규칙 뒤라면 파일 끝에 두어도 됩니다.
• 떠오르는 시간은 0.15 ~ 0.25초 안이면 됩니다. 1초를 넘기면 기다리게 됩니다.

흔한 잘못:

• 걸음 1에서 transition을 .recipe-card:hover에만 두면, 마우스를 뗄 때 카드가 툭 떨어집니다.
• 걸음 1에서 margin-top: -4px로 올리면 아래 카드까지 함께 올라갑니다 — 격자 줄이 흔들립니다.
• 걸음 2에서 transition: none만 두면 움직임 줄이기에서 카드가 한순간에 떠오릅니다.
• 걸음 3의 조건 블록을 /* 색 */ 구역의 :root 위에 두면 나중에 쓴 밝은 값이 이겨 어두운 화면에서도 밝은 채입니다.
• 걸음 4를 빠뜨리면 글자 칸 · 별점 칸은 변수로 칠해 어두워져도, 라디오는 밝은 모양으로 남습니다.
• 걸음 4에서 fieldset에 border-color만 주면 계산된 색은 선 변수와 같아도, 기본 테두리가 두 색으로 그려지는 홈 모양이라 화면에서는 표 선보다 밝게 보입니다.

폰 물음의 답은 ③입니다. ②는 전환만 끈 꼴, ①은 조건 블록이 없는 꼴입니다.

다시 볼 레슨: transition · transform으로 옮기고 키우기 · 움직임 줄이기 · 변수만 바꾸는 다크 모드