단원 연습 문제

줄마다 태그 이름을 적어 보세요.

굵기는 가리고 봅니다. 화면 읽기 프로그램은 요소의 역할을 어디에서 얻나요?

김치볶음밥 — 1단계 · 재료 — 2단계

• 읽는 쪽은 모양이 아니라 나무의 요소에서 역할을 얻습니다(브라우저 규칙 3). <p><b>조리 순서</b></p>는 굵은 글이 든 문단이라, 화면에서 제목처럼 보여도 제목 차례에 들지 않습니다. 제목으로 건너다니는 사람은 조리 순서로 바로 갈 수 없습니다.
• 잰 값의 b는 뜻 없는 굵은 글(generic)이고, 그 줄 전체는 문단입니다.
• 제목으로 읽히게 하려면 '재료'와 같은 단계의 제목 요소로 씁니다.

<h1>김치볶음밥</h1>
<h2>재료</h2>
<p>밥 2공기</p>
<h2>조리 순서</h2>
<p>김치를 볶습니다.</p>

'조리 순서'도 h2가 되어 제목 차례에 듭니다.

• '조리 순서 — 2단계'까지 셋을 쓴 것은 크고 굵게 보이는 글을 제목으로 받는다고 본 것입니다(태그가 모양이라는 생각).

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

두 img의 속성을 한 줄씩 견줘, 한쪽에만 있는 줄을 찾으세요.

(가) 없음 · 없음 · (나) 둘째 · (다) 둘째

잰 값 첫 줄은 첫째 그림(잡채), 둘째 줄은 둘째 그림(된장찌개)을 잰 것입니다.

• 잰 값의 읽는 이름은 둘 다 (없음)이지만 뜻이 다릅니다. alt=""는 '꾸밈 그림'이라는 표시라 읽는 쪽에 건네지지 않습니다. alt가 없는 둘째는 '이름 없는 그림'으로 건네지고, 프로그램에 따라 파일 이름(doenjang)을 대신 읽기도 합니다.
• 검사기는 alt가 없는 img를 Error로 잡습니다 — 'img에는 alt 속성이 있어야 한다'는 뜻입니다. 비운 alt=""는 Error가 아닙니다.
• 꾸밈으로 두려면 둘째에도 alt=""를 적습니다.
• (다)에 '둘 다 아님'을 쓴 것은 alt를 빼는 것과 비우는 것이 같다고 본 것입니다.
• (나)에 첫째를 쓴 것은 빈 값 ""을 빠뜨린 값으로 본 것입니다. 빈 값도 적은 값입니다.

다시 볼 레슨: alt 제대로 쓰기 · 검사기로 틀린 HTML 찾기

네 줄의 태그 이름과, a에 href가 있는지를 줄마다 적어 보세요.

Tab이 멈추는 것은 키보드로 쓸 수 있는 요소입니다. 모양이 아니라 요소가 그것을 정합니다.

(가) 연습장 → 참가 신청 · (나) ③ generic

Tab을 한 번 누른 뒤의 포커스입니다.

<a href="map.html">연습장</a>
<div class="btn">
  사진 올리기
</div>
<a>지난 대회</a>
<button>참가 신청</button>

• Tab은 href가 있는 a와 button처럼 키보드로 쓰는 요소에만 HTML 차례대로 멈춥니다(브라우저 규칙 3). 단추처럼 칠한 div와 href 없는 a는 건너뜁니다.
• div의 역할 generic은 뜻 없는 묶음이라, 화면 읽기 프로그램도 이것을 단추로 알리지 않습니다. 그 자리에서 무엇을 하는 것은 button으로 씁니다.
• (가)에 '사진 올리기'를 넣은 것은 단추 모양이면 단추라고 본 것입니다(모양이 역할이라는 생각).
• '지난 대회'를 넣은 것은 a면 모두 링크라고 본 것입니다. 갈 곳(href)이 없는 a는 링크가 아닙니다.

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

button 여는 태그에 무엇이 적혀 있고 무엇이 빠졌는지 보세요.

② — 폼이 떠나고 주소 끝에 ?name=jiho가 붙습니다.

• 폼 안의 button은 type을 적지 않으면 제출 단추입니다. 누르면 칸의 값을 모아 주소 뒤에 붙여 떠납니다(브라우저 규칙 1). action이 없어 지금 페이지로 다시 오고, 새로 그려진 칸은 빕니다.
• 제출하지 않을 단추는 type="button"으로 적습니다.
• ①은 단추가 누르면 제 할 일만 한다고 본 것입니다(단추는 조용하다는 생각).
• ③은 단추가 칸의 글을 화면에 옮겨 준다고 본 것입니다. 그런 일은 JavaScript가 합니다.

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

칸과 짝지은 라벨이 있는지, 그 라벨이 어떻게 감춰졌는지 차례로 보세요.

hidden은 화면에서만 감추는지, 읽는 쪽에서도 감추는지 떠올려 봅니다.

(가) 없음 · (나) class="sr-only"

• 칸에는 for로 짝지은 라벨이 있습니다. 크롬은 그 라벨에서 이름을 찾는데, hidden은 모두에게서 감춰 라벨 글이 이름이 되지 못합니다(브라우저 규칙 3의 '다만'). 짝지은 라벨이 있으니 placeholder로 넘어가지도 않습니다 — 물음에 적은 크롬 동작입니다.
• (가)에 '이름'을 쓴 것은 hidden이 화면에서만 감춘다고 본 것입니다. 화면에서만 감추는 것은 .sr-only입니다.
• (가)에 '예: 김하늘'을 쓴 것은 감춘 라벨을 없는 라벨로 보고 placeholder로 넘어간다고 본 것입니다. 라벨이 아예 없는 칸이면 크롬이 그 글을 이름으로 쓰지만, 그 이름은 무엇을 적는 칸인지가 아니라 넣을 글의 보기이고, 치기 시작하면 화면에서도 사라집니다(placeholder가 라벨이라는 생각).

(나)대로 고친 꼴입니다. 아래 CSS가 이 페이지에 이미 있는 .sr-only 규칙입니다 — 여섯 줄의 뜻은 14단원에서 봅니다.

<label
  for="nm"
  class="sr-only"
>
  이름
</label>
<input
  id="nm"
  name="name"
  placeholder="예: 김하늘"
/>

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

다르게 써도 되는 곳: 라벨을 지우고 칸에 aria-label="이름"을 붙여도 읽는 이름은 '이름'입니다.

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

다섯마다, 고친 코드가 HTML · CSS 규칙을 어겼는지와 화면 · 키보드 · 소리에서 무엇이 틀어지는지를 따로 적어 보세요.

① ③ ④ — HTML · CSS 규칙을 어기지 않아 검사기는 지나치는 것들입니다.

<div class="btn">좋아요</div>
<img
  src="images/logo.svg"
  alt="logo.svg"
  width="48"
  height="48"
/>

②와 ⑤는 검사기가 잡습니다.

<img
  src="images/logo.svg"
  width="48"
  height="48"
/>
<p id="menu">음료</p>
<p id="menu">빵</p>

• ① div는 HTML 규칙으로는 틀리지 않았지만 Role이 generic이라 Tab이 닿지 않습니다 — 점검 목록 4(Tab으로 끝까지).
• ③ alt가 있으니 규칙은 지켰습니다. 그 글이 그림에 맞는지는 사람이 봅니다 — 점검 목록 1(그림). 로고면 alt="플로우 카페"처럼 로고가 전하는 이름을 씁니다.
• ④ outline: none은 맞게 쓴 CSS라 검사기가 지나칩니다. 포커스 표시가 사라진 것은 Tab을 눌러 화면에서 봅니다 — 점검 목록 5(포커스 표시).
• ②나 ⑤를 고른 것은 검사기가 접근성은 하나도 보지 않는다고 본 것입니다. alt 빠짐 · 같은 id처럼 HTML 규칙에 적힌 것은 검사기가 잡습니다.
• ①을 빼고 고른 것은 단추처럼 보이면 단추라고 본 것입니다(모양이 역할이라는 생각).

다시 볼 레슨: Accessibility 창과 점검 목록 · 검사기로 틀린 HTML 찾기

Elements 패널에 지어질 나무를 그려 보세요.

닫지 않은 a가 첫 p가 끝난 뒤에도 남아 있다면, 다음 p의 글은 어디에 들어갈까요?

김치볶음밥 → 계란말이

• 브라우저는 틀린 HTML에서도 멈추지 않고 나무를 고쳐 짓습니다(브라우저 규칙 2). 첫 p가 닫힐 때 a를 닫았다가, 다음 p를 만나자 아직 열려 있던 링크를 한 번 더 지어 '계란말이'까지 감쌌습니다. 그래서 같은 주소의 링크가 둘이 되고, Tab도 두 번 멈춥니다.
• 화면에서는 '계란말이'도 링크 밑줄과 파란 글자로 보입니다. 검사기에 넣으면 빠진 </a>를 Error로 잡습니다.
• '김치볶음밥' 하나만 쓴 것은 틀린 곳에서 브라우저가 링크를 끊고 멈춘다고 본 것입니다(틀리면 멈춘다는 생각).
• '없음'은 닫지 않은 링크는 링크가 아니라고 본 것입니다.

다시 볼 레슨: 요소 안의 요소 · 키보드로 다니기

style.css의 첫 줄을 보세요.

첫 줄의 주석 꼴이 CSS 파일에서도 주석인지 따져 보고, 아니라면 그 글자가 바로 아래 규칙의 어디에 붙는지 봅니다.

㉡ — p입니다.

• <!-- -->는 HTML의 주석입니다. CSS는 이 꼴을 주석으로 읽지 않아, 그 뒤의 글자 style.css가 첫 규칙 p의 선택자에 붙습니다. 그 선택자가 고르는 요소가 없어 첫 규칙은 아무것에도 닿지 않습니다(브라우저 규칙 4). 둘째 규칙부터는 그대로 닿습니다.
• CSS 파일의 주석은 /* style.css */로 씁니다.
• 흔한 오답은 ㉢입니다. 주석 꼴은 어느 파일에서나 같다고 본 것입니다.
• ㉠ ㉡을 고른 것은 첫 줄이 틀리면 CSS 파일 전체가 버려진다고 본 것입니다(CSS도 멈춘다는 생각).
• 검사기와 Accessibility 창은 이것을 잡지 못합니다. 결과 화면과 Styles 창으로 봅니다.

다시 볼 레슨: CSS 연결하기 · 규칙의 모양

(다)는 모두에게서 감추는 속성과 헷갈리지 않게, 화면에서만 감추는 쪽을 떠올리세요.

받는 답: (가) alt="" · (나) aria-label · (다) sr-only(클래스 — class="sr-only") · (라) lang

• (가)에 alt를 빼라고 쓴 것은 다른 답입니다. 빼면 이름 없는 그림으로 건네집니다.
• (다)에 hidden을 쓰면 다른 답입니다. hidden은 화면 읽기 프로그램에서도 감춰 이름이 사라집니다.
• (다)에 .sr-only처럼 점을 붙여 써도 같은 답입니다 — 클래스를 고르는 선택자 꼴로 쓴 것입니다.
• (라)는 html 여는 태그에 lang="ko"처럼 씁니다.

다시 볼 레슨: alt 제대로 쓰기 · 글자 없는 단추와 숨긴 라벨 · 화면 읽기 프로그램이 읽는 페이지

Styles 창에 보인 button 규칙의 선언 둘이 저마다 무엇을 정하는지 적어 보세요.

받는 답: CSS 3번 줄 outline: none;을 지웁니다.

<button>출석</button>
<button>결석</button>

button {
  font-size: 16px;
}

포커스 표시가 안 보이면 '안 먹을 때 찾는 차례'의 3번과 4번에서 찾습니다.

• 1번 '파일이 닿았나' · 2번 '나무에 내 생각대로 있나'는 지나갑니다 — 글자 크기가 먹고, Tab으로 단추에 포커스도 갑니다(잰 값 :focus-visible 켜짐).
• 3번 — Styles 창에 button 규칙이 보이고, 거기에 outline: none이 있습니다.
• 4번 — outline: none에는 취소선이 없어 이 선언이 단추에 그대로 닿습니다. 포커스가 오면 기본 스타일의 윤곽선(포커스 표시) 선언도 닿지만, 우리 규칙의 outline: none이 기본 스타일을 이겨 윤곽선이 그려지지 않습니다(브라우저 규칙 5).
• 기본 스타일의 윤곽선 선언은 단추에 포커스가 있을 때만 Styles 창에 나옵니다. 개발자 도구를 누르면 포커스가 그쪽으로 옮겨 가 보이지 않습니다 — 그 상태를 켜서 보는 길은 8단원 '마우스와 키보드 상태'에서 봅니다.
• 그 줄을 지우면 기본 스타일의 포커스 표시(윤곽선)가 돌아옵니다. 마우스로 누를 때는 그리지 않고, 키보드로 왔을 때 그립니다.

다르게 고쳐도 되는 곳: 윤곽선 모양을 바꾸고 싶으면 지우지 말고, 키보드 포커스에만 닿는 규칙으로 다시 그립니다 — 그 선택자는 8단원 '마우스와 키보드 상태'에서 배웁니다.

• 흔한 오답은 outline: none;을 outline: 2px solid #005bb5;⁠로 바꾸는 것입니다. 포커스와 상관없이 두 단추에 늘 윤곽선이 그려져, 지금 어느 단추인지 여전히 가릴 수 없습니다.

다시 볼 레슨: 키보드로 다니기 · 브라우저 기본 스타일과 Styles 창

1은 화면에 글을 두지 않고 칸에 이름을 붙이는 두 길 가운데 하나를 고릅니다. 4는 이 단추가 폼을 보내는 단추인지부터 정합니다.

모범 답입니다 — 1을 aria-label로 붙였습니다.

<form action="search.html">
  <input
    aria-label="메뉴 찾기"
    name="q"
    required
  />
  <button type="submit">
    찾기
  </button>
</form>

칸에 latte를 치고 '찾기'를 누른 뒤입니다.

<form action="search.html">
  <input
    aria-label="메뉴 찾기"
    name="q"
    required
  />
  <button type="submit">
    찾기
  </button>
</form>

확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다. 말풍선 글은 크롬 한국어 기준이고, 비운 채 누르면 이 말풍선이 뜨며 떠나지 않습니다.

다르게 써도 되는 곳:

• 1을 숨긴 라벨로 써도 됩니다. 칸에 id="q"를 붙이고, 그 앞에 for="q"와 class="sr-only"를 단 label에 '메뉴 찾기'를 씁니다(이 페이지 CSS에 .sr-only 규칙이 있을 때).
• 폼 안의 단추는 type을 적지 않아도 submit이라 type="submit"을 빼도 같은 결과입니다. 다만 무엇을 하는 단추인지 읽히게 적어 둡니다.

흔한 잘못:

• 라벨을 hidden으로 감추면 읽는 이름이 비어, 첫 결과를 채우지 못합니다(5번).
• placeholder="메뉴 찾기"만 두면 크롬은 그 글을 이름으로 쓰지만, 화면에 보기 글이 보여 첫 결과의 '화면에는 보이지 않는다'와 다르고, 치기 시작하면 사라집니다.
• name을 빠뜨리면 주소가 search.html?로 끝나 친 글이 가지 않습니다.

다시 볼 레슨: 글자 없는 단추와 숨긴 라벨 · label로 칸에 이름 붙이기 · name과 value · 단추의 type

6단원 연습 문제의 만들어 보기 (나) 모범 답입니다. 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의 다섯 줄은 한 페이지에 한 줄씩 끝까지 대고 나서 다음 줄로 갑니다.

모범 답 전체는 받기 파일입니다. 내 파일과 견줘 봅니다. style.css는 시작 파일 그대로입니다 — 지울 것이 없었습니다.

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

걸음 1에서 걸리는 곳은 카드 그림 하나입니다.

이름 칸 · 다시 만들 의향 묶음은 읽는 이름이 있어 2. 이름 줄에 걸리지 않습니다. 꼭 채울 칸이라는 것이 화면 글에 없는 것은 다섯 줄 밖이라, 걸음 2 표가 따로 짚었습니다.

걸음 2 — 목록 페이지의 카드 그림은 여섯 모두 alt=""로 비웁니다. 김치볶음밥 카드입니다.

<!-- index.html -->
<li class="recipe-card">
  <img
    src="images/kimchi.svg"
    alt=""
    width="200"
    height="150"
  />
  <div
    class="recipe-card-head"
  >
    <h2>
      <a
        href="kimchi.html"
      >
        김치볶음밥
      </a>
    </h2>
    <span
      class="badge"
    >한식</span>
  </div>
  <p>조리 15분</p>
</li>

김치볶음밥 페이지는 라벨 글 둘에 '(필수)'를 더합니다.

<!-- kimchi.html -->
<label
  for="nickname"
>
  이름 (필수)
</label>
<input
  type="text"
  id="nickname"
  name="nickname"
  required
  maxlength="20"
/>
<fieldset>
  <legend>
    다시 만들어 볼 건가요?
    (필수)
  </legend>
  <input
    type="radio"
    id="again-yes"
    name="again"
    value="yes"
    required
  />
  <label
    for="again-yes"
  >
    네
  </label>
</fieldset>

걸음 3 — 김치볶음밥 페이지의 Tab은 사이트 이름 → '레시피 목록' → '김치볶음밥' → '조리 순서' → 이름 칸 → 별점 → 한 줄 평 → 라디오 묶음 → '후기 남기기'로 아홉 번 멈춥니다(HTML에 적은 차례). 단추처럼 칠한 div가 없어 건너뛰는 것이 없습니다.

걸음 4 — 시작 파일의 style.css에는 두 선언 모두 없습니다. 8단원에서는 내비게이션 링크만 밑줄을 지우는 대신, 마우스를 올리면 밑줄이 생기고 지금 페이지 링크는 굵게 해 링크라는 것을 다르게 보입니다.

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

다르게 써도 되는 곳:

• '(필수)' 대신 '꼭 적어 주세요'처럼 써도 됩니다. 꼭 채울 칸이라는 것이 라벨 글에 보이면 됩니다.
• 김치볶음밥 페이지 큰 그림의 alt="김치볶음밥 한 그릇"은 그대로 둡니다 — 그 옆에는 같은 글이 없습니다.

흔한 잘못:

• 카드 그림의 alt를 지워 버리면(alt 없음) 검사기 Error가 뜨고, 이름 없는 그림으로 건네집니다. 비운 값 alt=""로 둡니다(2번).
• 카드 그림만 고치고 제목에 같은 이름이 있는지 보지 않으면, 큰 그림까지 alt=""로 비우기 쉽습니다. 옆 글이 같을 때만 비웁니다.
• '(필수)'를 placeholder로 넣으면 치기 시작할 때 사라집니다(5번과 같은 까닭).

폰 물음의 답은 ㉣ ㉤ ㉡ ㉢ ㉠입니다. Tab은 화면의 자리가 아니라 HTML에 적은 차례로 갑니다.

다시 볼 레슨: Accessibility 창과 점검 목록 · alt 제대로 쓰기 · 키보드로 다니기 · label로 칸에 이름 붙이기