단원 연습 문제

CSS의 선택자 .sale과 세 줄의 class 값을 한 글자씩 견주어 보세요.

② — 녹차 줄만 빨갛습니다.

잰 값 둘째 줄은 첫 문단(커피)을 잰 것입니다.

• 선택자 .sale의 점은 'class 값이 sale인 요소'라는 표시입니다. 이름은 점 뒤의 sale이라, class="sale"인 녹차 줄만 고릅니다(브라우저 규칙 4).
• ① 라테 줄의 class 값은 점까지 넣은 .sale입니다. HTML의 class에는 점 없이 이름만 씁니다. 점이 붙으면 다른 이름이라 선택자 .sale이 고르지 않습니다.
• ③ 커피 줄은 이름이 red라 빨개진다고 본 것입니다(이름이 모양을 정한다는 생각). red를 고르는 규칙이 없으니 그대로입니다. 이름은 색이 아니라 맡은 일(sale)로 짓습니다.

다시 볼 레슨: 태그·클래스·ID 선택자 · id와 class

둘째 규칙의 선택자 목록에서 오타가 난 쪽과 멀쩡한 쪽을 나눠 보세요.

선택자 목록 가운데 하나를 알아듣지 못하면, 브라우저가 그 하나만 버리는지 규칙 전체를 버리는지 정하세요.

받는 답: #6e6e73

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

• :frist-child는 없는 가상 클래스라 브라우저가 알아듣지 못합니다. 선택자 목록 가운데 하나라도 알아듣지 못하면 브라우저는 그 규칙을 통째로 버립니다(브라우저 규칙 4). 멀쩡한 h2도 함께 빠집니다.
• 둘째 규칙이 버려졌으니 h2에는 첫째 규칙의 회색이 남습니다. 개발자 도구 Styles 창에는 둘째 규칙이 아예 보이지 않습니다.
• 흔한 오답은 #d70015입니다. 알아듣지 못한 선택자만 버리고 h2는 고른다고 본 것입니다. 선택자 목록은 한 덩어리라, 하나를 알아듣지 못하면 규칙째 버려집니다.
• 기본 글자색(검정)도 흔한 오답입니다. 틀린 곳이 있으면 CSS가 다 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각). 첫째 규칙은 그대로 먹습니다.

오타를 고친 li:first-child면 제목과 '금요일 7시'가 함께 빨개집니다. 목록이 길면 틀린 곳 하나가 여럿을 함께 빼니, 걱정되면 규칙을 나눠 씁니다.

다시 볼 레슨: 태그·클래스·ID 선택자 · 규칙의 모양

ol.days에서 시작하는 요소 나무를 그려 보세요.

해운대와 광안리의 li는 ol.days에서 몇 겹 안에 있나요?

㉡ ㉥ — 첫째 날과 둘째 날의 li입니다.

잰 값 둘째 줄의 rgba(0, 0, 0, 0)은 바탕을 칠하지 않았다는 뜻입니다.

• > 결합자는 바로 한 겹 안(자식)만 고릅니다. 해운대와 광안리의 li는 ol.days → 첫째 날 li → ol 안이라 세 겹 안입니다(브라우저 규칙 4).
• 흔한 오답은 ㉡ ㉣ ㉤ ㉥입니다. > 결합자를 빈칸(후손)과 같은 뜻으로 본 것입니다. .days li라면 이 넷을 고릅니다.
• 결과 화면에서는 해운대와 광안리 뒤도 하늘색으로 보입니다. 첫째 날 li 안에 안쪽 목록이 들어 있어, 첫째 날의 바탕이 그 아래까지 칠해지기 때문입니다. 해운대와 광안리의 li에는 바탕색이 없습니다.

다시 볼 레슨: 하위·자식·형제 선택자

개발자 도구 Elements 패널에서 이 코드를 펼치면 p.note 안에 무엇이 보일지 떠올려 보세요.

문단 p 안에는 목록 같은 블록을 넣을 수 없습니다. 브라우저가 <ul>을 만났을 때 열린 p를 어떻게 하는지, 그 나무에서 li가 .note 안에 있는지 보세요.

받는 답: #1d1d1f

같은 답으로 치는 꼴: rgb(29, 29, 31) · rgb(29 29 31) · #1D1D1F.

• 브라우저는 <ul>을 만나면 열린 p를 거기서 닫고 목록을 그 뒤에 짓습니다. 끝의 </p>는 빈 문단 하나가 됩니다(브라우저 규칙 2). 오류 메시지는 없습니다.
• 그래서 li는 p.note 안에 있지 않고, .note li는 아무것도 고르지 못합니다(브라우저 규칙 4). 목록 줄은 body의 글자색을 물려받습니다.
• 흔한 오답은 #005bb5입니다. 친 대로 p 안에 목록이 들어 있다고 본 것입니다(틀리면 멈춘다는 생각 — 브라우저는 멈추지도, 친 대로 두지도 않고 고쳐 짓습니다). 선택자는 Elements 패널의 지은 나무를 보고 씁니다.

'오늘의 디저트'를 문단 대신 div로 감싸거나, 문단과 목록을 따로 두고 목록에 이름표를 붙이면 됩니다.

다시 볼 레슨: 목록 ul·ol·li · 요소 안의 요소 · 하위·자식·형제 선택자

짝마다 두 CSS에서 다른 곳 하나를 찾으세요. 그곳 때문에 선택자가 고르는 요소가 달라지는지 봅니다.

(가)는 닫는 중괄호가 없는 h1 규칙 안에 다음 규칙이 들어가 있다고 읽어 보세요. (나)는 쉼표가 없으면 두 줄이 빈칸으로 이어진 선택자 하나입니다.

(가) 같다 · (나) 다르다 — 앞 코드는 아무것도 빨갛지 않다 · (다) 같다

• (가) 앞 코드는 h1 규칙의 닫는 중괄호가 빠져, 브라우저가 em 규칙을 h1 규칙 안에 든 중첩 규칙으로 읽습니다. 이것은 뒤 코드의 h1 em과 같은 뜻이라 제목 안 '안내'만 빨갛고, 문단의 '금요일'은 그대로입니다.
• (나) 앞 코드는 h2와 .won 사이에 쉼표가 없어 h2 .won — 'h2 안의 .won' 하나가 됩니다. 그런 요소가 없어 아무것도 빨갛지 않습니다. 뒤 코드는 선택자 목록이라 제목과 가격이 함께 빨갛습니다(브라우저 규칙 4).
• (다) 이 목록의 li는 모두 ul.menu의 자식입니다. 한 겹뿐이라 > 결합자와 빈칸이 같은 요소를 고릅니다.
• (가) 다르다는 두 가지로 나옵니다. 중괄호가 빠지면 아래 규칙이 안 먹는다고 봤거나, em 규칙이 모든 em에 닿는다고 본 것입니다.
• (다) 다르다는 > 결합자와 빈칸이 늘 다른 요소를 고른다고 본 것입니다. 갈리는 것은 손자 이하가 있을 때입니다.

다시 볼 레슨: 하위·자식·형제 선택자 · 규칙의 모양

선택자 div .new에서 div와 .new 사이를 보세요.

그 빈칸 때문에 선택자가 두 요소를 말하는지, 한 요소를 말하는지 정합니다.

③ — 둘째 줄의 '장소 바뀜'만 빨갛습니다.

• 빈칸으로 띄어 쓴 div .new는 'div 안에 든 .new'입니다. 둘째 줄 div 안의 b만 고릅니다(브라우저 규칙 4).
• ① 띄어 쓴 것을 붙여 쓴 div.new('class가 new인 div')로 본 것입니다. 빈칸 하나로 고르는 요소가 바뀝니다.
• ② 빈칸이 있어도 없어도 같다고 보고 .new가 붙은 요소를 모두 고른다고 본 것입니다. 첫째 줄 div는 제가 .new일 뿐, 안에 .new를 품지 않았습니다.

다시 볼 레슨: 조건 겹치기와 속성 선택자 · 하위·자식·형제 선택자

두 칸의 type을 보고, 저마다 무엇을 하는 칸인지 적어 보세요.

:focus-visible은 포커스가 왔다는 표시가 꼭 보여야 할 때만 켜집니다. 마우스로 눌렀을 때 글자 칸과 단추 꼴 칸이 어떻게 다른지 떠올려 보세요.

받는 답: (가) 보인다 · (나) 안 보인다

이름 칸을 마우스로 누른 뒤입니다.

체크박스를 마우스로 누른 뒤입니다.

<label for="person">
  이름
</label>
<input
  type="text"
  id="person"
/>
<input
  type="checkbox"
  id="news"
/>
<label for="news">알림</label>

input:focus-visible {
  outline: 3px solid #005bb5;
}

• 두 칸 모두 누르면 포커스가 옵니다(:focus). 크롬은 그 가운데 글자를 칠 칸에만 :focus-visible을 켭니다 — 치는 자리를 보여 줘야 하기 때문입니다. 체크박스는 누르는 것으로 일이 끝나 마우스로는 켜지 않습니다.
• 체크박스도 Tab으로 오면 :focus-visible이 켜져 윤곽선이 보입니다. 키보드로 다니는 사람에게는 늘 보입니다.
• (나) 보인다는 :focus-visible을 :focus와 같은 것으로 본 것입니다. 마우스로 누를 때까지 늘 그리려면 :focus를 쓰지만, 단추 꼴 칸에서는 마우스 사용자에게 윤곽선이 거슬려 :focus-visible을 씁니다.

다시 볼 레슨: 마우스와 키보드 상태

세 요소의 태그 이름과 속성을 하나씩 보세요.

Tab이 멈출지는 모양이 아니라 요소의 역할이 정합니다. 세 요소 가운데 누를 수 있는 역할을 가진 것을 고르세요.

받는 답: 문의

• Tab은 누를 수 있는 요소에만 멈춥니다. div는 모양이 단추여도 역할이 없어 건너뜁니다. href가 없는 a도 링크가 아니라 건너뜁니다(브라우저 규칙 3).
• 그래서 첫 Tab이 button에 멈추고, .chip:focus-visible이 그 단추에만 윤곽선을 그립니다.
• 흔한 오답은 '신청'입니다. 단추처럼 보이면 단추처럼 동작한다고 본 것입니다(모양이 역할이라는 생각). 누를 일이면 button, 다른 페이지로 가는 일이면 href가 있는 a를 씁니다.

다시 볼 레슨: 링크와 단추 가르기 · 키보드로 다니기

p.info의 자식을 위에서부터 1 · 2 · 3으로 적어 보세요.

1번이 무엇인지 보세요. span:first-child는 두 조건이 붙어 있습니다 — span이고, 부모의 첫 자식이고. 둘을 다 갖춘 요소가 있는지 보세요.

② — 모든 글이 검정입니다.

• span:first-child는 'span이면서 부모의 첫 자식'입니다. p.info의 첫 자식은 b라 두 조건을 다 갖춘 요소가 없습니다. 오류 없이 아무것도 고르지 않습니다(브라우저 규칙 4).
• ① 앞의 span을 빼고 '첫 자식'만 본 것입니다. 붙여 쓴 조건은 모두 맞아야 합니다.
• ③ :first-child를 'span 가운데 첫째'로 본 것입니다. 자리는 종류를 가리지 않고 부모의 모든 자식 가운데서 셉니다.

'한식'만 빨갛게 하려면 .info b + span처럼 바로 앞 형제로 고르거나, b를 맨 뒤로 옮깁니다.

다시 볼 레슨: 자리로 고르기 · 하위·자식·형제 선택자

모두 :으로 시작합니다. (다)는 '아니다'라는 뜻의 영어 낱말입니다.

받는 답: (가) :hover · (나) :last-child · (다) :not() · (라) :checked

같은 답으로 치는 꼴: 앞의 :을 빼고 쓴 hover · (다) 괄호 안을 채운 :not(:last-child) 같은 꼴.

틀리는 꼴 — 까닭:

• (가) :focus — 키보드나 마우스로 눌러 포커스가 온 요소를 고릅니다. 마우스를 올리기만 해서는 켜지지 않습니다.
• (나) :last-of-type — 같은 태그 이름 가운데 마지막입니다. 부모의 마지막 자식이 다른 태그면 둘이 갈립니다.
• (라) :selected — 없는 가상 클래스라 그 규칙째 버려집니다.

다시 볼 레슨: 마우스와 키보드 상태 · 자리로 고르기 · 골라진 칸과 :has()

세 줄의 요소마다 태그 이름과 class 값을 적어 보세요.

:has() 앞의 .item과 괄호 안의 .best 가운데 칠해지는 것은 어느 쪽인지, 그리고 .best를 어디에서 찾는지 보세요.

① — 첫째 줄(커피)만 띠처럼 회색 바탕입니다.

• .item:has(.best)는 '안에 .best가 든 .item'을 고릅니다. 칠해지는 것은 앞의 .item이고, .best는 그 안에서만 찾습니다(브라우저 규칙 4).
• 첫째 div 안에는 em.best가 있어 골라지고, 둘째 div(라테) 안에는 없어 골라지지 않습니다.
• ② :has()가 그 요소 바깥까지 찾는다고 본 것입니다. 라테 칸 바로 뒤의 div.best는 형제라 라테 칸 안에 든 것이 아닙니다.
• ③ 괄호 안의 요소가 칠해진다고 본 것입니다. 괄호 안은 고르는 조건일 뿐입니다.

다시 볼 레슨: 골라진 칸과 :has()

Styles 창에 규칙이 보이지 않습니다. 찾는 차례 몇 번에서 막혔는지 정하고, 선택자의 조건과 이름 칸의 HTML을 견주어 보세요.

대괄호 [type="text"]는 HTML에 적힌 속성을 봅니다. 두 칸의 여는 태그에 적힌 속성을 하나씩 세어 보세요.

받는 답: 2번 줄의 <input에 type="text"를 넣습니다. 32칸에 맞추면 속성마다 한 줄로 나눠 씁니다.

<label for="person">
  이름
</label>
<input
  type="text"
  id="person"
/>
<label for="tel">전화</label>
<input
  type="text"
  id="tel"
/>

input[type="text"] {
  background-color: #fff6cc;
}

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

• 1번 — 전화 칸이 연노랑이니 CSS는 닿았습니다.
• 2번 — Elements 패널에 input 둘이 다 있습니다.
• 3번 — 이름 칸을 고르면 Styles 창에 input[type="text"] 규칙이 보이지 않습니다. 규칙이 닿지 않았으니 선택자를 봅니다. 대괄호 선택자는 HTML에 적힌 type 속성을 보는데, 이름 칸의 여는 태그에는 type이 없습니다.

type을 적지 않은 input도 글자 칸으로 그려집니다. 그래도 속성이 적혀 있지 않아 [type="text"]가 고르지 못합니다(브라우저 규칙 4).

다르게 고쳐도 되는 곳: CSS의 선택자를 input으로 바꿔도 이 폼에서는 두 칸이 모두 칠해집니다. 다만 뒤에 체크박스를 더하면 그 칸까지 고르니, 글자 칸만 칠하려면 HTML에 type을 적는 쪽이 낫습니다.

• 흔한 오답은 규칙에 !important를 붙이는 것입니다. 규칙이 이름 칸에 닿지 않으니 그대로 흰 바탕입니다.
• 이름 칸만 #person으로 골라 같은 바탕색 규칙을 하나 더 쓰는 것도 흔합니다. 화면은 맞지만 같은 색을 두 곳에 적어, 다음에 색을 바꿀 때 한 곳을 빠뜨리기 쉽습니다 — 증상만 덮은 것입니다.

다시 볼 레슨: 조건 겹치기와 속성 선택자 · 브라우저 기본 스타일과 Styles 창

'둘째 줄부터'를 '첫 줄을 뺀 줄'로 바꿔 말해 보세요. 그 말에 맞는 가상 클래스가 이 단원에 있습니다.

모범 답입니다.

<ul class="menu">
  <li>추천 라테 4500원</li>
  <li>커피 4000원</li>
  <li>녹차 3500원</li>
  <li>쿠키 2000원</li>
</ul>

/* 1. 고를 요소 */
.menu li:not(:first-child) {
  /* 2. 바꿀 속성과 값 */
  color: #6e6e73;
}

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

다르게 써도 되는 곳:

• .menu li + li — '바로 앞에 li 형제가 있는 li'라 첫 줄만 빠집니다. 같은 화면입니다.
• 색을 rgb(110 110 115)로 써도 같은 색입니다.

흔한 잘못:

• :nth-child(2) · :nth-child(3)처럼 줄 번호를 하나씩 적으면 세 줄일 때는 맞지만, 넷째 줄 '쿠키'는 검정으로 남습니다. 줄이 늘고 줄어도 맞게 하려면 자리를 '첫 줄이 아닌 것'으로 고릅니다.

<ul class="menu">
  <li>추천 라테 4500원</li>
  <li>커피 4000원</li>
  <li>녹차 3500원</li>
  <li>쿠키 2000원</li>
</ul>

.menu li:nth-child(2),
.menu li:nth-child(3) {
  color: #6e6e73;
}

• .menu li로 모두 회색을 칠한 뒤 :first-child만 검정으로 되돌리는 규칙을 하나 더 써도 화면은 같습니다. 다만 규칙 둘이 같은 속성을 두고 겨루게 되어, 어느 쪽이 이기는지는 9단원 '명시도'에서 봅니다.

다시 볼 레슨: 자리로 고르기 · 하위·자식·형제 선택자 · 규칙의 모양

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 받기

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 1은 '내비게이션 안의 링크'를 내비게이션 밖 링크와 가르는 선택자부터 정하고, 걸음 3의 '마지막 줄'은 자리로 고르는 가상 클래스를 씁니다.

모범 답입니다. 바뀐 곳만 싣습니다 — 다 고친 세 파일은 아래 받기 파일과 같습니다.

<!-- index.html 내비 -->
<a
  class="current"
  href="index.html"
>레시피 목록</a>
…

<!-- kimchi.html -->
<a
  class="current"
  href="kimchi.html"
>김치볶음밥</a>
…
<ul class="ingredient-list">
  …
</ul>

/* 머리글 · 내비 */
nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

nav a.current {
  color: #1d1d1f;
  font-weight: bold;
}

/* 후기 폼 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #005bb5;
  outline-offset: 2px;
}

걸음 3의 두 규칙은 선택자가 길어 표로 싣습니다(style.css에는 위 규칙들과 같은 꼴로 씁니다).

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

김치볶음밥 페이지의 내비게이션을 이 규칙으로 그리고 '레시피 목록'에 마우스를 올리면 이렇습니다.

<nav>
  <a
    href="index.html"
  >레시피 목록</a>
  <a
    class="current"
    href="kimchi.html"
  >김치볶음밥</a>
</nav>

nav a {
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

nav a.current {
  color: #1d1d1f;
  font-weight: bold;
}

이름 칸을 마우스로 누른 뒤입니다.

<label for="nickname">
  이름 (필수)
</label>
<input
  type="text"
  id="nickname"
/>

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #005bb5;
  outline-offset: 2px;
}

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

다르게 써도 되는 곳:

• nav a.current 대신 .current만 써도 됩니다 — 이 페이지에서 .current는 내비게이션 링크뿐입니다.
• 걸음 2의 선택자 목록을 규칙 셋으로 나눠 써도 같은 화면입니다.
• 걸음 3은 재료 줄 가운데 :not(:last-child)인 줄에만 선을 그어도 됩니다. 그러면 지우는 규칙이 없어도 마지막 줄에 선이 없습니다.
• 구역 주석은 없어도 화면이 같습니다. 9단원 연습 문제에서 구역 차례로 정리합니다.

흔한 잘못:

• 걸음 1에서 a를 골라 밑줄을 지우면 본문의 '조리 순서' 링크 밑줄도 사라집니다 — 확인 목록 셋째 줄이 걸립니다.

<nav>
  <a
    href="index.html"
  >레시피 목록</a>
</nav>
<p>
  <a href="#steps">
    조리 순서
  </a>
</p>

a {
  text-decoration: none;
}

• 걸음 3에서 .ingredient-list:last-child li⁠로 쓰면 '부모의 마지막 자식인 재료 목록 안의 모든 줄'이 됩니다. 재료 목록이 section의 마지막 자식이라 다섯 줄의 선이 모두 사라집니다.
• :nth-child(5)처럼 번호로 고르면 지금은 맞지만, 재료가 늘면 다섯째 줄 아래 선이 사라지고 새 마지막 줄에는 선이 남습니다 — 확인 목록 다섯째 줄이 걸립니다.

폰 물음의 답은 ③입니다. ①은 위 흔한 잘못처럼 모든 줄의 선을 지우고, ②는 재료가 다섯 줄일 때만 맞습니다.

다시 볼 레슨: 마우스와 키보드 상태 · 자리로 고르기 · 하위·자식·형제 선택자 · 태그·클래스·ID 선택자