단원 연습 문제

첫 문단에 닿는 선언 둘을 적고, 저마다 선택자의 명시도를 세 칸(ID · 클래스 · 태그)으로 세어 보세요.

받는 답: #d70015

같은 답으로 치는 꼴: rgb(215, 0, 21) · rgb(215 0 21) · #D70015. 잰 값 둘째 줄은 둘째 문단을 잰 것입니다.

첫 문단의 손 점수판입니다.

출처가 같아 명시도로 갑니다. 왼쪽 칸부터 견주면 ID 칸은 둘 다 0, 클래스 칸에서 .due가 1로 이깁니다. 차례 칸까지 가지 않습니다.

• 한 요소의 한 속성에 선언이 여럿 닿으면 하나만 이깁니다. 출처가 같으면 명시도가 높은 쪽이 이깁니다(브라우저 규칙 5).
• 흔한 오답은 #1d1d1f입니다. 나중에 쓴 규칙이 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각). 차례는 명시도까지 같을 때만 봅니다.

다시 볼 레슨: 명시도

선택자를 조각으로 나눠 # · . · 태그 이름이 저마다 몇 개인지 세어 보세요.

빈칸(결합자)은 점수가 없습니다. 세 칸은 왼쪽 칸부터 견주고, 왼쪽 칸에서 갈리면 오른쪽은 보지 않습니다. 세 칸을 더한 합으로 견주지 않습니다.

받는 답: (가) ㉠ 0-2-0 · ㉡ 0-0-1 · ㉢ 1-1-0 · ㉣ 0-2-2 / (나) ㉢ ㉣ ㉠ ㉡

네 선택자가 저마다 다른 색을 주면 이렇게 그려집니다.

<ul id="menu" class="list">
  <li class="item">커피</li>
</ul>

.list .item {
  color: #d70015;
}

li {
  color: #6e6e73;
}

#menu .item {
  color: #005bb5;
}

ul.list li.item {
  color: #1d1d1f;
}

• ㉢ #menu .item은 ID 칸이 1이라, 다른 셋이 클래스 칸 · 태그 칸에서 얼마나 많아도 집니다. '커피'는 ㉢의 파랑입니다(브라우저 규칙 5).
• ㉣ 0-2-2와 ㉠ 0-2-0은 클래스 칸까지 같고 태그 칸에서 ㉣이 높습니다.
• 흔한 오답은 ㉣ ㉢ ㉠ ㉡이나 ㉣ ㉠ ㉢ ㉡입니다. 세 칸을 더해 ㉣(합 4)을 ㉢(합 2)보다 높게 본 것입니다. 명시도는 받아올림이 없습니다 — 클래스가 열한 개인 0-11-0도 1-0-0에 집니다.

다시 볼 레슨: 명시도

둘째 규칙의 색 값을 # 뒤부터 한 글자씩 세어 보세요.

알아듣지 못한 선언도 겨루기에 드는지 정하세요. 겨루기에 드는 선언만 손 점수판에 적습니다.

받는 답: #6e6e73

같은 답으로 치는 꼴: rgb(110, 110, 115) · rgb(110 110 115).

• #05bb5는 # 뒤가 다섯 자리입니다. 16진수 색은 여섯 자리(줄여 쓰면 세 자리)라 브라우저가 알아듣지 못하고, 오류 없이 그 선언만 버립니다(브라우저 규칙 4). Styles 창에서는 그 줄에 경고 표시와 취소선이 보입니다(크롬 기준).
• 버려진 선언은 겨루기에 들지 않습니다. 시간에 닿는 color 선언은 .time의 회색 하나뿐이라 그것이 이깁니다.
• 흔한 오답은 #05bb5나 #005bb5입니다. ID가 든 규칙이 명시도로 이긴다고 먼저 본 것입니다. 명시도는 알아들은 선언끼리만 견줍니다.
• 기본 글자색(검정)도 흔한 오답입니다. 틀린 줄이 있으면 CSS가 다 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각).

다시 볼 레슨: 색 쓰기 · 규칙의 모양 · 명시도

짝마다 두 코드에서 바뀐 곳을 찾으세요 — CSS 규칙의 차례인지, HTML 속성 값의 차례인지 봅니다.

짝마다 두 선택자의 명시도를 먼저 견주세요. 차례는 명시도까지 같을 때만 봅니다.

(가) 다르다 — 앞 코드는 파랑, 뒤 코드는 빨강 · (나) 같다 · (다) 같다

• (가) .cold와 .sweet는 둘 다 0-1-0입니다. 명시도까지 같으면 나중에 쓴 쪽이 이겨, 규칙 자리를 바꾸면 색이 뒤집힙니다(브라우저 규칙 5).
• (나) #star(1-0-0)가 .cold(0-1-0)보다 명시도가 높아, 자리를 바꿔도 늘 파랑입니다.
• (다) 바뀐 것은 HTML class 값 안의 이름 차례입니다. 이기는 차례가 보는 '나중'은 CSS 규칙의 차례라, 두 화면이 같은 파랑입니다.
• (나) 다르다는 나중에 쓴 규칙이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각).
• (다) 다르다는 class 값에 뒤에 적은 이름이 이긴다고 본 것입니다.

다시 볼 레슨: 나중에 쓴 규칙 · 명시도

마우스를 올린 '첫째 날'에는 두 규칙이 모두 닿습니다. 두 선택자의 명시도를 세 칸으로 세어 보세요.

:hover는 가상 클래스입니다. 가상 클래스는 세 칸 가운데 어느 칸에 세는지 정하세요.

받는 답: (가) #1d1d1f — 마우스를 올려도 그대로 · (나) #d70015

두 규칙의 자리를 바꾸고 마우스를 올린 뒤입니다.

<nav class="tabs">
  <a href="#d1">첫째 날</a>
  <a href="#d2">둘째 날</a>
</nav>

.tabs a {
  color: #1d1d1f;
}

a:hover {
  color: #d70015;
}

마우스를 올린 '첫째 날'의 손 점수판입니다(처음 코드).

명시도까지 같아 나중에 쓴 .tabs a가 이깁니다(브라우저 규칙 5).

• 가상 클래스 :hover는 클래스 칸에 하나로 셉니다. a:hover와 .tabs a는 둘 다 0-1-1입니다.
• 마우스를 올리면 a:hover가 '첫째 날'에 닿기는 하지만, 뒤에 쓴 .tabs a에 집니다. 자리를 바꾸면 a:hover가 나중이 되어 이깁니다.
• (가)의 흔한 오답은 #d70015입니다. 마우스를 올린 상태 규칙은 늘 이긴다고 본 것입니다. 상태 규칙도 같은 이기는 차례를 따릅니다.

자리를 바꾸지 않고 고치려면 .tabs a:hover(0-2-1)처럼 선택자를 더 구체적으로 씁니다.

다시 볼 레슨: 나중에 쓴 규칙 · 마우스와 키보드 상태

규칙이 직접 고른 요소를 적고, 안쪽 em에 직접 닿는 선언이 있는지 보세요.

안쪽 em은 선언 둘을 저마다 어떻게 받는지 따로 따져 보세요. 글자색과 테두리 가운데 어느 쪽이 물려받는 속성인지 정하세요.

② — 글은 모두 파랗고, 문단 둘레에만 선이 있습니다.

• em에는 닿는 선언이 없습니다. 그러면 글자 · 색처럼 물려받는 속성은 부모의 값을, 나머지는 처음 값을 씁니다(브라우저 규칙 5).
• 글자색은 물려받는 속성이라 '약불로'도 부모의 파랑입니다. 테두리는 물려받지 않아 em은 처음 값(테두리 없음)입니다.
• ① 모든 속성을 물려받는다고 본 것입니다(다 물려받는다는 생각). 테두리까지 내려가면 안쪽 요소마다 선이 겹쳐 그려집니다.
• ③ 직접 고른 요소에만 값이 들고 안쪽은 아무것도 안 물려받는다고 본 것입니다(다 물려받는다는 생각의 거꾸로).

다시 볼 레슨: 물려받기

네 요소마다 그 요소에 직접 닿는 선언이 있는지 먼저 적어 보세요.

기본 스타일의 선언도 셉니다. 물려받기는 그 요소에 닿는 선언이 하나도 없을 때만 씁니다. #beach 규칙은 section 하나에만 닿습니다.

㉠ — 제목 '첫째 날'만 빨갛습니다.

• #beach 규칙은 section에만 닿습니다. h2에는 글자색 선언이 하나도 닿지 않아 부모 section의 빨강을 물려받습니다(브라우저 규칙 5).
• p에는 p 규칙이 직접 닿습니다. 물려받은 값은 직접 닿은 선언에 늘 집니다 — 부모의 규칙이 ID(1-0-0)여도 그 점수는 안쪽으로 내려가지 않습니다.
• strong은 닿는 선언이 없어 바로 위 부모 p의 #1d1d1f를 물려받습니다.
• a는 기본 스타일이 글자색을 직접 정해 둬, 물려받지 않고 기본 파랑입니다(크롬 기준).
• 흔한 오답은 ㉠ ㉡ ㉢ ㉣입니다. ID 규칙의 점수가 안쪽 요소까지 이긴다고 본 것입니다.
• ㉠ ㉣은 링크도 부모 색을 물려받는다고 본 것입니다(다 물려받는다는 생각). 링크 색을 부모와 같게 하려면 a { color: inherit; }⁠을 씁니다.

다시 볼 레슨: 물려받기 · 명시도

두 선언 가운데 끝에 무엇이 붙은 선언이 있는지 보세요.

이기는 차례의 첫 칸은 무엇이었나요? !important는 이기는 차례의 첫 칸(출처 · 중요도)에서 그 선언을 먼저 올립니다. 그 칸에서 갈리면 명시도는 보지 않습니다.

받는 답: #6e6e73

같은 답으로 치는 꼴: rgb(110, 110, 115) · rgb(110 110 115).

첫 칸 출처 · 중요도에서 !important 선언이 이깁니다. 명시도 칸까지 가지 않습니다(브라우저 규칙 5).

• 흔한 오답은 #d70015입니다. ID 규칙이 명시도로 이긴다고 본 것입니다. !important는 싸움을 한 단계 위로 올려, 뒤에 오는 어떤 보통 규칙도 이기지 못하게 만듭니다.
• 이것을 또 !important로 이기려 하면 같은 싸움이 한 단계 위에서 되풀이됩니다. .price의 !important를 지우면 #special이 명시도로 이깁니다.

다시 볼 레슨: !important 대신 · 명시도

두 선택자의 명시도를 세 칸으로 세고, 고침마다 바뀐 뒤의 점수와 차례를 다시 적어 보세요.

명시도가 높아지면 차례와 상관없이 이기고, 명시도가 같아지면 나중에 쓴 쪽이 이깁니다.

① ② — 선택자를 구체적으로 쓰는 두 길입니다.

위 잰 값은 고치기 전입니다. ①로 고친 뒤입니다.

<ul class="list">
  <li class="must">김치</li>
  <li>김가루</li>
</ul>

.list li {
  color: #1d1d1f;
}

li.must {
  color: #d70015;
}

③으로 옮긴 뒤입니다.

<ul class="list">
  <li class="must">김치</li>
  <li>김가루</li>
</ul>

.must {
  color: #d70015;
}

.list li {
  color: #1d1d1f;
}

• 처음에는 .list li(0-1-1)가 .must(0-1-0)를 명시도로 이깁니다(브라우저 규칙 5).
• ① li.must는 0-1-1이라 .list li와 같습니다. 명시도까지 같으면 나중에 쓴 쪽이 이겨, 아래에 있는 li.must가 이깁니다.
• ② .list .must는 0-2-0이라 차례와 상관없이 이깁니다.
• ③ 명시도가 낮은 규칙은 어디로 옮겨도 집니다. 옮겨서 고치는 길은 명시도가 같을 때만 통합니다(뒤가 늘 이긴다는 생각을 거꾸로 쓴 고침).

다시 볼 레슨: !important 대신 · 명시도 · 나중에 쓴 규칙

hidden이 요소를 숨기는 길을 떠올려 보세요.

숨기는 일을 하는 선언은 누가 적어 두었나요? hidden은 기본 스타일에 든 display: none 선언으로 요소를 숨깁니다. 기본 스타일과 우리 CSS의 선언이 같은 속성에서 만나면 이기는 차례의 첫 칸에서 갈립니다.

③ — 출처 칸에서 우리 CSS가 이겼습니다.

• 브라우저 기본 스타일에는 'hidden이 붙은 요소는 display: none'이라는 규칙이 있습니다. hidden은 이 규칙으로 요소를 숨깁니다.
• 우리 CSS의 section { display: block; }⁠이 같은 요소의 같은 속성에 닿습니다. 이기는 차례의 첫 칸(출처)에서 우리 CSS가 기본 스타일을 이겨 구역이 보입니다(브라우저 규칙 5).
• ① 명시도를 먼저 견준다고 본 것입니다. 출처가 다르면 명시도까지 가지 않습니다 — 우리 선택자가 태그 하나(0-0-1)뿐이어도 이깁니다.
• ② 나중에 읽은 쪽이 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각). 차례는 출처와 명시도가 모두 같을 때만 봅니다.

숨겨 둘 요소에는 display 선언을 적지 않습니다.

다시 볼 레슨: id와 class · 브라우저 기본 스타일과 Styles 창 · !important 대신

Styles 창에 .warn은 보이고 취소선이 그어졌습니다. 찾는 차례 몇 번인지 정하고, 이긴 #fee 규칙이 왜 이 문단에 닿았는지 HTML에서 찾으세요.

경고 문단의 여는 태그에 적힌 속성을 하나씩 보세요. 윗줄에서 복사해 온 것이 남아 있지 않나요?

받는 답: 2번 줄을 <p class="warn">으로 고칩니다 — 윗줄에서 복사해 온 id="fee"를 지웁니다.

<p id="fee">회비 1만 원</p>
<p class="warn">
  늦으면 2천 원 더
</p>

#fee {
  color: #6e6e73;
}

.warn {
  color: #d70015;
}

잰 값 셋째 줄 — 이제 #fee가 고르는 것은 첫 문단 하나뿐입니다.

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

• 1번 — 첫 문단이 회색이니 CSS는 닿았습니다.
• 2번 — Elements 패널에 문단 둘이 있습니다.
• 3번 — 경고 문단을 고르면 Styles 창에 .warn 규칙이 보입니다. 규칙은 닿았습니다.
• 4번 — .warn의 color에 취소선이 있습니다. 알아들었지만 졌습니다. 이긴 쪽은 #fee(1-0-0)라 .warn(0-1-0)이 뒤에 있어도 집니다(브라우저 규칙 5). 그런데 #fee는 첫 문단의 이름표입니다 — 경고 문단에도 같은 id가 붙어 있어 닿았습니다.

id는 한 페이지에 하나만 씁니다. CSS는 같은 id의 요소를 둘 다 칠해, 오류 없이 이런 겨루기가 생깁니다. 2번에서 검사기에 넣었다면 'Duplicate ID “fee”.' Error가 먼저 알려 줍니다.

다르게 고쳐도 되는 곳: 2번 줄의 id를 이 문단만의 다른 이름(id="due" 같은)으로 바꿔도 경고 문단이 빨개집니다.

• 흔한 오답은 .warn 규칙을 더 아래로 옮기는 것입니다. 이미 맨 아래라 그대로 회색입니다 — 명시도가 다르면 차례는 보지 않습니다(뒤가 늘 이긴다는 생각).
• .warn을 p.warn(0-1-1)으로 바꾸는 것도 흔합니다. ID 칸이 0이라 여전히 #fee에 집니다.
• .warn의 선언에 !important를 붙이면 빨개지지만, 복사해 온 id는 그대로 남아 다음 겨루기를 또 부릅니다 — 증상만 덮은 것입니다.

다시 볼 레슨: 명시도 · id와 class · !important 대신

선언 칸은 CSS 세 규칙 가운데 '신청' 단추를 고르는 것을 모두 적습니다. 명시도 칸은 선택자마다 # · . · 태그 이름을 셉니다.

모범 답 — '신청' 단추의 손 점수판입니다.

출처가 모두 같아 명시도에서 0-2-1이 이깁니다. 차례는 보지 않고, 닿는 선언이 있으니 5도 쓰지 않습니다. 줄은 명시도의 점수판처럼 이긴 선언부터 적었습니다 — 코드 차례로 적어도 칸의 값이 같으면 맞습니다.

'문의' 단추에는 .apply button.primary⁠가 닿지 않아 둘만 겨루고, 0-1-1인 .apply button의 #ffffff가 이깁니다.

<div class="apply">
  <button>문의</button>
  <button class="primary">
    신청
  </button>
</div>

button {
  background: #f5f5f7;
}

.apply button.primary {
  background: #005bb5;
}

.apply button {
  background: #ffffff;
}

잰 값은 짧게 적기 background가 정한 바탕색(background-color)을 잰 것입니다. 잰 값 둘째 줄은 '문의' 단추입니다.

위 두 결과가 맞고 표의 칸을 모두 채웠으면 맞습니다. 앞 칸에서 갈렸어도 뒤 칸까지 채워 둡니다 — 다른 단추를 볼 때 그 칸이 답을 냅니다.

흔한 잘못:

• 차례 칸만 보고 맨 아래 .apply button의 #ffffff를 이긴 값으로 쓴 것은 차례를 명시도보다 먼저 본 것입니다(뒤가 늘 이긴다는 생각).
• 선언 칸에서 button 규칙을 빼도 '신청'의 답은 같지만, 반만 쓴 표는 안 쓴 것과 같습니다. .apply button 규칙을 지우는 날에는 '문의' 단추의 바탕을 그 빠뜨린 줄이 정합니다.

다시 볼 레슨: 명시도 · 나중에 쓴 규칙

recipe-note 폴더에 세 파일을 받아 둡니다. 그림 여섯은 8단원 연습 문제 14번의 시작 파일에서 받은 images 폴더를 그대로 씁니다.

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

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 2는 공통 규칙과 제출 단추 규칙의 명시도를 세 칸으로 세어 보고, 걸음 4는 같은 명시도의 두 규칙을 찾습니다.

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

/* 기본 */
…
button {
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 16px;
  font-family: inherit;
}

button:hover {
  background: #d2d2d7;
}

/* 후기 폼 */
…
button[type="submit"] {
  background: #005bb5;
  color: #ffffff;
}

button[type="submit"]:hover {
  background: #1d1d1f;
}

• style.css 받기

제출 단추에 마우스를 올린 뒤입니다. 마우스를 올리기 전의 모습은 결과 화면에 보입니다.

<form>
  <button type="submit">
    후기 남기기
  </button>
</form>

button {
  background: #f5f5f7;
  color: #1d1d1f;
  font-size: 16px;
  font-family: inherit;
}

button:hover {
  background: #d2d2d7;
}

button[type="submit"] {
  background: #005bb5;
  color: #ffffff;
}

button[type="submit"]:hover {
  background: #1d1d1f;
}

마우스를 올린 제출 단추의 background 손 점수판입니다.

명시도 0-2-1이 가장 높습니다. 대괄호 속성 선택자와 가상 클래스는 클래스 칸에 하나씩 셉니다. 마우스를 떼면 :hover가 붙은 두 줄이 닿지 않아, 남은 둘 가운데 0-1-1인 button[type="submit"]⁠의 #005bb5가 이깁니다.

걸음 4 — 제출 단추의 마우스 올림 규칙을 지우고 button:hover를 맨 아래로 옮긴 뒤 마우스를 올리면 이렇습니다.

<form>
  <button type="submit">
    후기 남기기
  </button>
</form>

button {
  background: #f5f5f7;
  color: #1d1d1f;
}

button[type="submit"] {
  background: #005bb5;
  color: #ffffff;
}

button:hover {
  background: #d2d2d7;
}

button[type="submit"]⁠과 button:hover는 둘 다 0-1-1입니다. 명시도까지 같아 나중에 쓴 button:hover가 이겨 바탕이 연회색으로 뒤집힙니다(브라우저 규칙 5). 공통 규칙 button(0-0-1)은 어디로 옮겨도 제출 단추 규칙에 집니다 — 차례는 명시도가 같을 때만 봅니다. 그래서 공통 규칙을 위('기본')에, 구역 규칙을 아래에 두고, 마우스 올림처럼 같은 점수로 겨루는 규칙은 구역 규칙에 따로 씁니다.

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

다르게 써도 되는 곳:

• 한 규칙 안 선언의 차례는 바꿔도 됩니다.
• 구역 안 규칙의 차례도 바꿔도 됩니다. 이 단계의 구역 안 규칙들은 명시도가 달라 차례로 갈리지 않습니다.
• 구역 이름은 달라도 됩니다 — 공통 규칙이 위, 구역 규칙이 아래면 됩니다.

흔한 잘못:

• 걸음 1에서 font-family: inherit을 빠뜨리면 단추 글자만 본문과 다른 글꼴입니다. 단추는 기본 스타일이 글꼴을 직접 정해 둬 body의 글꼴을 물려받지 않습니다.
• 걸음 2에서 button[type="submit"]:hover⁠를 빠뜨리면 제출 단추에 마우스를 올려도 바탕이 그대로 파랑입니다. button:hover(0-1-1)가 button[type="submit"](0-1-1)보다 앞에 있어 집니다.
• 걸음 2의 선택자를 button 없이 [type="submit"]으로 쓰면 걸음 1 · 2의 확인 목록은 그대로 맞습니다. 하지만 명시도가 0-1-0이라, 걸음 4에서 button:hover(0-1-1)를 옮기기 전부터, 제출 단추에 마우스를 올리면 연회색이 됩니다 — 자리가 아니라 명시도로 진 것이라 뒤집어 보기가 되지 않습니다.
• 이기게 하려고 !important를 붙이면 지금은 맞아도, 뒤에 더할 구역 규칙이 이 단추를 바꾸지 못합니다.

폰 물음의 답은 ②입니다. ①은 마우스 올림 규칙이 안 닿는다고 본 것, ③은 button:hover가 늘 이긴다고 본 것입니다.

다시 볼 레슨: 명시도 · 나중에 쓴 규칙 · 물려받기 · !important 대신