단원 1~9 섞어 풀기

짝마다 앞 코드의 선언을 한 줄씩 읽고, 브라우저가 알아듣는 줄과 못 알아듣는 줄을 가려 보세요.

알아듣지 못한 선언만 버려지는지, 규칙 전체가 버려지는지 정하세요. (나)는 끝에 ;이 없는 줄이 다음 줄과 어떻게 이어지는지도 봅니다.

(가) 같다 · (나) 다르다 — 앞 코드는 글자가 굵지 않다 · (다) 같다

• (가) font-size: 18은 단위가 없어 알아듣지 못하는 값이라, 브라우저가 그 선언만 버립니다(브라우저 규칙 4). 색 선언은 그대로 먹어 두 화면이 같습니다.
• (나) 앞 코드는 #005bb5 뒤에 ;이 없어 #005bb5 font-weight: bold⁠까지가 color의 값 하나로 읽힙니다. 그 선언이 통째로 버려져 색도 굵기도 빠집니다. 뒤 코드는 굵습니다.
• (다) colr는 없는 속성 이름이라 그 줄만 버려지고, 굵기 선언은 먹습니다.
• (가) · (다) 다르다는 틀린 줄이 있으면 규칙 전체가 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각).
• (나) 같다는 ;이 빠져도 그 줄만 버려진다고 본 것입니다. ;이 없으면 다음 선언까지 함께 버려집니다.

다시 볼 레슨: 규칙의 모양

네 요소마다 블록인지 인라인인지 먼저 적어 보세요.

코드에서 줄을 바꾼 자리는 그릴 때 무엇이 되나요? 줄을 실제로 나누는 것은 무엇인지 떠올려 보세요.

받는 답: 커피 라테 / 녹차 / 쿠키

• span은 인라인이라 글자처럼 한 줄 안에서 흐릅니다. '커피'와 '라테' 사이의 줄바꿈은 그릴 때 빈칸 하나가 됩니다(브라우저 규칙 2).
• div는 블록이라 위에서 아래로 쌓입니다 — 앞뒤로 줄을 나눠 '녹차'가 제 줄을 차지하고, 뒤의 '쿠키'는 새 줄에서 시작합니다(브라우저 규칙 7).
• 흔한 오답은 '커피 / 라테 / 녹차 / 쿠키'입니다. 코드에서 줄을 바꾼 대로 화면도 줄이 바뀐다고 본 것입니다(친 대로 나온다는 생각).
• '커피라테 / 녹차 / 쿠키'는 줄바꿈이 아무것도 남기지 않는다고 본 것입니다. 빈칸 하나가 남습니다.

다시 볼 레슨: div·span과 블록·인라인 · 공백 규칙과 특수 문자

다섯 글을 감싼 요소의 이름을 하나씩 적어 보세요.

제목 차례는 화면 모양이 아니라 나무에 든 제목 요소(h1~h6)로 만들어집니다. 차례는 코드에 나온 차례입니다.

받는 답: ㉡ ㉣ ㉤

• 화면 읽기 프로그램은 화면 모양이 아니라 나무의 요소에서 역할을 얻습니다(브라우저 규칙 3). 제목 역할은 h1 첫째 날 · h3 숙소 · h2 둘째 날 셋뿐이고, 나온 차례대로 들립니다.
• ㉠ 화면에서 가장 크고 굵어도 p라 문단입니다 — 크게 칠해도 제목이 되지 않습니다(태그가 모양이라는 생각의 거꾸로).
• ㉢ 굵은 글씨 b로 제목처럼 보이게 한 옛 습관입니다. 제목 차례에 들지 않습니다.
• 들리는 차례는 단계 숫자가 아니라 코드에 나온 차례(첫째 날 → 숙소 → 둘째 날)입니다. h2 없이 h3를 먼저 쓴 곳은 검사기가 단계를 건너뛰었다고 알려 줍니다.

다시 볼 레슨: 제목 h1~h6 · 시맨틱 요소 · 화면 읽기 프로그램이 읽는 페이지

세 요소마다 이름이 될 만한 글이 어디에 있는지 모두 찾아 적어 보세요 — 요소 안의 글 · 속성 · 짝이 된 라벨.

aria-label은 안의 글보다 먼저 이름이 됩니다. 라벨이 있으면 placeholder는 이름이 되지 않습니다. alt=""인 그림은 읽는 쪽 나무에서 빠집니다.

받는 답: (가) 닫기 · (나) 검색 · (다) 없음

• (가) aria-label이 단추의 읽는 이름이 됩니다. 안의 '×'는 이름으로 쓰이지 않습니다(브라우저 규칙 3).
• (나) 칸을 감싼 라벨 '검색'이 이름입니다. 흔한 오답 '메뉴'는 placeholder를 라벨로 본 것입니다(placeholder가 라벨이라는 생각). placeholder는 치기 시작하면 사라지는 안내입니다.
• (다) 링크 안에 그림 하나뿐인데 alt=""라 그림이 읽는 쪽에서 빠지고, 링크에 읽을 글이 남지 않습니다. 무엇을 읽을지는 프로그램마다 다릅니다(주소를 읽기도 합니다). 그림만 든 링크는 alt에 가는 곳('김치볶음밥 레시피')을 적습니다.
• (다)를 'kimchi.svg'로 쓴 것은 alt=""와 alt가 없는 것을 같게 본 것입니다. alt가 아예 없을 때 파일 이름을 읽기도 하고, alt=""는 '읽지 마라'는 뜻입니다.

다시 볼 레슨: 글자 없는 단추와 숨긴 라벨 · label로 칸에 이름 붙이기 · alt 제대로 쓰기

다섯 요소의 태그 이름과 href가 있는지를 하나씩 보세요.

㉢ ㉤ — href가 있는 링크와 단추입니다.

페이지를 열고 Tab을 한 번 눌렀을 때입니다.

Tab을 두 번 눌렀을 때입니다.

<div class="go">신청</div>
<a class="go">안내</a>
<a
  class="go"
  href="list.html"
>목록</a>
<span class="go">공유</span>
<button class="go">
  저장
</button>

.go {
  background-color: #d2d2d7;
}

• Tab은 누를 수 있는 역할을 가진 요소에만 멈춥니다 — href가 있는 링크 · 단추 · 입력 칸(브라우저 규칙 3). 회색 바탕은 모양일 뿐이라 div · span에는 역할이 생기지 않습니다.
• href가 없는 a는 링크 역할이 없어 건너뜁니다.
• 흔한 오답은 다섯 모두입니다. 단추처럼 보이면 단추처럼 동작한다고 본 것입니다(모양이 역할이라는 생각). 누를 일이면 button, 다른 페이지로 가는 일이면 href가 있는 a를 씁니다.

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

폴더 나무에서 latte.html과 done.html이 저마다 어느 폴더에 있는지 짚어 보세요.

상대 주소는 그 주소를 적은 파일이 든 폴더에서 출발합니다. 폼의 action도 같습니다.

받는 답: menu/done.html?menu=latte

앞에 cafe/를 붙여 쓴 것과 ?menu=latte를 띄어 쓴 것은 꼴만 다릅니다.

• 제출은 브라우저가 칸의 값을 모아 action 주소 뒤에 붙이고 그 주소로 떠나는 일입니다(브라우저 규칙 1).
• action="done.html"은 이 폼을 적은 latte.html이 든 menu/에서 출발합니다. 그래서 menu/done.html을 찾아갑니다. 그 폴더에는 done.html이 없어 브라우저가 파일을 찾지 못합니다.
• 흔한 오답은 done.html?menu=latte입니다. 주소가 늘 사이트 맨 위에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각). 맨 위의 done.html로 가려면 action="../done.html"⁠로 한 칸 올라갑니다.
• ?menu=latte를 빠뜨린 것은 action이 있으면 칸의 값을 따로 보낸다고 본 것입니다. 값은 주소 뒤에 붙어 함께 갑니다.

다시 볼 레슨: 경로 읽기 · 폼과 제출 · name과 value

세 선택자에서 li와 .hot 사이에 무엇이 있는지 보세요 — 아무것도 없음 · 빈칸 · 쉼표.

받는 답: (가) 커피 · (나) 인기 · (다) 커피 · 라테 · 인기

'고른 글'은 고른 요소마다 바로 안의 글입니다 — 둘째 li의 바로 안 글은 '라테'입니다. 둘째 li를 '라테 인기'로 쓴 것도 고른 요소는 같아 맞은 것으로 칩니다.

• (가) 붙여 쓰면 한 요소의 두 조건 — 'class가 hot인 li'라 첫 줄 하나입니다(브라우저 규칙 4).
• (나) 띄어 쓰면 'li 안에 든 .hot' — 둘째 줄 안의 b입니다.
• (다) 쉼표는 선택자 목록이라 li 둘과 .hot이 붙은 요소를 모두 고릅니다. 커피 li는 두 조건에 다 맞아도 한 번만 셉니다.
• (가)와 (나)를 같게 쓴 것은 빈칸 하나는 뜻이 없다고 본 것입니다.

다시 볼 레슨: 조건 겹치기와 속성 선택자 · 하위·자식·형제 선택자 · 태그·클래스·ID 선택자

(나)는 <body> 안에, 화면에 보이는 영역입니다. (라)는 :focus 뒤에 한 낱말이 더 붙습니다.

받는 답: (가) title · (나) header · (다) name · (라) :focus-visible

같은 답으로 치는 꼴: 꺾쇠를 붙인 <title> · <header>, 앞의 :을 뺀 focus-visible.

틀리는 꼴 — 까닭:

• (가) h1 — 페이지 안 맨 위의 큰 제목입니다. 탭의 이름은 head 안의 title입니다.
• (나) head — 화면에 보이지 않는 문서 정보(title · meta)를 담는 곳입니다.
• (다) id — 라벨과 짝을 짓거나 CSS · 링크가 고를 때 쓰는 이름표입니다. id만 있는 칸은 값을 보내지 않습니다.
• (라) :focus — 마우스로 단추를 눌러도 켜져, 마우스 사용자에게도 윤곽선이 그려집니다.

다시 볼 레슨: 문서 뼈대 · 시맨틱 요소 · name과 value · 마우스와 키보드 상태

'미리 보기' 단추의 여는 태그에 적힌 속성을 보세요. 그다음 세 칸의 속성을 칸마다 적어 봅니다.

type을 적지 않은 폼 안 단추는 무슨 단추인지 떠올리세요. 세 칸 가운데 주소에 붙는 칸은 어느 속성이 있는 칸인가요? 값 안의 띄어쓰기는 주소에서 어떤 기호가 되나요?

받는 답: ?menu=latte&extra=no+ice

? 기호를 빼고 쓴 것은 꼴만 다릅니다.

• 폼 안의 단추는 type을 적지 않으면 제출 단추입니다. '미리 보기'를 눌러도 폼이 지금 페이지 주소로 떠납니다(action이 없으면 지금 페이지 — 브라우저 규칙 1).
• 보내는 것은 name이 있는 칸뿐이고 이름=값을 &로 잇습니다. 잔 수 칸은 id만 있어 빠집니다. 값 안의 띄어쓰기는 + 기호가 됩니다.
• 흔한 오답은 '떠나지 않음'입니다. 단추는 제 글자대로 일한다고 본 것입니다(단추는 조용하다는 생각). 보내지 않을 단추에는 type="button"을 적습니다.
• ?menu=latte&extra=no+ice&cup=2⁠는 id가 있으면 보내진다고 본 것입니다.

다시 볼 레슨: 단추의 type · name과 value · 폼과 제출

먼저 네 속성마다 이 링크에 닿는 선언을 모두 모읍니다 — 기본 스타일의 선언도 셉니다.

.box 규칙은 링크가 아니라 div를 고릅니다. link 두 줄로 이은 두 파일은 한 파일을 이어 붙인 것과 같아, 차례는 site.css의 규칙부터 셉니다. 닿는 선언이 하나도 없는 속성만 부모에게 물려받습니다.

받는 답: color #0000ee · background #f5f5f7 · font-weight normal · font-size 18px

차례 칸은 이어 붙인 두 파일의 규칙 차례입니다 — .box 1 · .box a 2 · .go 3 · .quiet 4. 한 규칙의 선언은 같은 번호이고, 줄은 명시도의 점수판처럼 이긴 선언부터 적었습니다 — 코드 차례로 적어도 칸의 값이 같으면 맞습니다.

정답의 첫 결과 화면은 site.css만 이었을 때, 둘째는 두 파일을 이어 그린 것입니다.

#0000ee는 rgb(0, 0, 238), normal은 400, #f5f5f7은 rgb(245, 245, 247)로 써도 같은 답입니다.

• color — 링크에 닿는 글자색 선언은 기본 스타일의 하나뿐이라 그것이 이깁니다. 부모 .box의 #1d1d1f는 닿는 선언이 없을 때만 물려받는데, 링크에는 기본 스타일 선언이 닿아 있습니다(브라우저 규칙 5).
• background — 출처가 같아 명시도로 갑니다. .box a(0-1-1)가 뒤의 .go(0-1-0)를 이깁니다.
• font-weight — .go와 .quiet는 명시도까지 0-1-0으로 같아 나중에 쓴 .quiet가 이깁니다.
• font-size — 닿는 선언이 없어 부모 .box의 18px을 물려받습니다. 글자 크기는 물려받는 속성입니다.
• 흔한 오답 — background를 #005bb5로 쓴 것은 뒤 파일 · 뒤 규칙이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각). color를 #1d1d1f로 쓴 것은 링크도 부모 색을 물려받는다고 본 것입니다(다 물려받는다는 생각). font-size를 '없음'이나 기본 크기로 쓴 것은 거꾸로 아무것도 안 물려받는다고 본 것입니다.

반만 쓴 표는 안 쓴 것과 같습니다 — 네 줄이 저마다 다른 칸에서 갈렸습니다.

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

세 요소마다 같은 요소가 이 뼈대에 몇 번 나오는지, 안에 무엇이 들었는지 적어 보세요.

세 요소마다 '한 페이지에 하나만'인지, '쓰면 안에 무엇을 두라'는 권함인지 떠올려 보세요.

㉡ — 둘째 main입니다.

• main은 페이지의 본문 영역이라 보이는 것은 하나뿐이어야 합니다. 둘째 main에 Error가 납니다.
• 제목 없는 section은 Warning — '제목을 두거나 div를 쓰라'는 권함입니다. Error가 아니라 화면도 그대로입니다.
• h1은 둘이어도 검사기가 막지 않습니다. 다만 페이지마다 큰 제목 하나를 권합니다.
• ㉢까지 고른 것은 Warning도 Error로 본 것입니다. 검사기 결과는 Error부터 봅니다.
• ㉠을 고른 것은 h1도 main처럼 하나만 써야 한다고 본 것입니다.

다시 볼 레슨: 시맨틱 요소 · article과 section 가르기 · 검사기로 틀린 HTML 찾기

맨 위 Error의 줄 번호로 가서, 그 줄이 닫으려는 요소 안에 아직 열려 있는 요소가 무엇인지 보세요.

브라우저는 닫히지 않은 링크를 다음 문단에서 다시 열어 이어 줍니다. 열린 a를 어디에서 닫아야 하는지 정하세요.

받는 답: 2번 줄을 <a href="map.html">가는 길</a>⁠로 고칩니다.

<p>
  <a href="map.html">
    가는 길
  </a>
</p>
<p>주차는 건물 뒤</p>

정답 접기 안 29칸에 맞춰 링크 안을 나눠 실었습니다. 링크가 문단의 처음부터 끝까지라 나눠도 화면이 같습니다.

고친 코드는 검사기 Error가 0입니다.

찾는 차례 2번 '요소가 나무에 내 생각대로 있나'에서 찾습니다. 검사기 Error는 나무가 생각과 달리 지어진 자리를 알려 줍니다 — 맨 위 Error부터 읽습니다.

• 2번 줄에서 연 a를 닫지 않아, 3번 줄 </p>에서 문단을 닫을 때 링크가 아직 열려 있습니다(맨 위 Error). 브라우저는 오류 없이 나무를 고쳐 지어, 다음 문단 전체를 같은 링크로 감쌉니다(브라우저 규칙 2).
• Elements 패널에서는 둘째 p가 a 안에 든 나무로 보입니다.

<p><a>가는 길</a></p>
<a><p>주차는 건물 뒤</p></a>

다르게 고쳐도 되는 곳: 3번 줄을 </a></p>로 고쳐도 됩니다 — 링크가 문단 안에서 닫힙니다(링크 글 끝에 빈칸 하나가 들지만 화면은 같습니다).

• 흔한 오답은 4번 줄 '주차는 건물 뒤' 문단에 </a>를 넣는 것입니다. 그 문단은 이미 다시 열린 링크 안이라, 링크가 문단 안에 든 채로 남습니다.
• 둘째 문단에 CSS로 color와 밑줄을 지우는 것도 흔합니다. 화면은 비슷해져도 눌러 보면 여전히 링크입니다 — 증상만 덮은 것입니다.

다시 볼 레슨: 요소 안의 요소 · 검사기로 틀린 HTML 찾기 · 링크 a