단원 연습 문제

㉠ ~ ㉣의 태그 이름을 하나씩 적어 보세요.

이름표 글자는 가리고 봅니다. top · menu · bottom은 코드를 읽는 사람을 위한 이름표입니다. 화면 읽기 프로그램은 요소의 역할을 어디에서 얻나요?

(가) ㉢ — main 하나뿐입니다. (나) ㉠ header · ㉡ nav · ㉣ footer

• div의 역할 generic은 뜻 없는 묶음이라 영역 목록에 들지 않습니다. 이름표의 글자는 역할을 바꾸지 않습니다 — 역할은 요소에서 나옵니다(브라우저 규칙 3).
• (나)대로 바꾸면 화면은 그대로이고, 역할이 넷 모두 영역이 됩니다. 이름표는 그대로 두어도 됩니다 — CSS가 찾을 이름표이고, 역할과는 따로입니다.

<header class="top">
  <p>자전거 동아리</p>
  <nav class="menu">
    <a href="trips.html">
      라이딩 일정
    </a>
  </nav>
</header>
<main>
  <h1>11월 라이딩</h1>
  <p>한강 자전거길을 달립니다.</p>
</main>
<footer class="bottom">
  <p>모이는 곳은 학교 정문</p>
</footer>

• 흔한 오답은 ㉠ ㉡ ㉢ ㉣입니다. top · menu 같은 이름표가 그 부분이 무엇인지 알려 준다고 본 것입니다. 이름표는 사람과 CSS가 읽는 메모입니다.
• ㉤을 고른 것은 main도 화면이 그대로라 영역이 아니라고 본 것입니다. 영역 요소는 화면이 아니라 역할을 바꿉니다.

다시 볼 레슨: 시맨틱 요소 · id와 class

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

링크를 누른 페이지 hangang.html이 든 폴더에서 출발해, index.html을 한 조각씩 따라가 보세요.

② — bike-club/courses/index.html⁠입니다. 그런 파일이 없어 크롬은 '파일에 액세스할 수 없음' 페이지를 보입니다.

• 링크의 주소는 그 링크가 든 페이지에서 출발합니다(브라우저 규칙 1). 첫 페이지에서는 bike-club/에서 출발해 첫 페이지에 닿던 index.html이, courses/ 안의 페이지에서는 courses/ 안을 찾습니다.
• 고치려면 한 칸 올라가 href="../index.html"로 씁니다. 머리글 · 내비게이션은 페이지마다 복사해 쓰기 쉬워, 폴더가 다른 페이지에 옮길 때 주소를 다시 봅니다.
• ①은 주소가 늘 사이트 맨 위에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각).
• ③은 없는 파일이면 브라우저가 미리 알고 멈춘다고 본 것입니다. 브라우저는 그 주소로 가 본 뒤에야 없다는 것을 압니다.

다시 볼 레슨: 경로 읽기 · 링크 a

넷마다 그 안에 무엇이 드는지 적어 보세요.

하나씩 그 부분만 떼어 다른 사이트에 옮겨 실었다고 생각해 보세요. 그것만 읽고도 무슨 말인지 알 수 있나요?

① ④ — 떼어 옮겨도 그것만으로 읽히는 글 한 편입니다.

• ② '준비물'만 떼면 무슨 라이딩의 준비물인지 모릅니다. 후기의 한 부분이라 section입니다.
• ③ 페이지 맨 아래 한 줄은 페이지의 바닥글 footer입니다.
• 흔한 오답은 ① 하나만 고른 것입니다. 일정 글처럼 짧은 글은 article이 아니라고 본 것입니다 — article은 글의 길이가 아니라 '떼어도 말이 되나'로 고릅니다.
• ②를 고른 것은 제목이 달린 덩어리면 모두 article이라고 본 것입니다.

다시 볼 레슨: article과 section 가르기 · 시맨틱 요소

줄마다 태그 이름을 적고, 제목 요소인 줄에 표시해 보세요.

(가) 4 — '여수 여행' · '1일 차' · '2일 차' · '사진은 직접 찍었습니다'입니다. (나) p로 바꾸고, 크기는 CSS의 font-size로 줄입니다.

• 제목 차례는 나무의 제목 요소에서 나옵니다(브라우저 규칙 3). h6는 작게 그려지는 글이 아니라 6단계 제목이라, 바닥글의 한 줄이 '2일 차' 아래 제목으로 들어갑니다. 검사기도 h2 다음에 h6가 와 3단계를 건너뛰었다고 Error를 냅니다.
• (나)대로 고치면 작은 글씨로 남고(h6의 굵기는 빠집니다 — 굵게 두려면 font-weight), 제목 차례는 셋이 됩니다.

<footer>
  <p>사진은 직접 찍었습니다</p>
</footer>

footer {
  font-size: 13px;
}

(나)의 요소를 곁말 요소 small로 쓴 것도 같은 답입니다 — 사진 출처 같은 한 줄에 맞는 요소라 제목 차례에서 빠집니다. 다만 크기는 small이 아니라 CSS font-size로 정합니다. small이 작게 그려지는 것도 기본 스타일의 모양입니다.

• 흔한 오답은 3입니다. h6를 작은 글씨를 내는 태그로 본 것입니다(태그가 모양이라는 생각). 크기는 CSS로 정합니다.

다시 볼 레슨: 제목 h1~h6 · 글자 꾸미기 · 시맨틱 요소

짝마다 두 코드에서 다른 글자만 찾아 표시하세요. 그 글자가 요소의 종류인지, 빈칸 · 줄바꿈인지, 이름표인지 가려 봅니다.

(가)는 두 span 사이의 빈칸 글이 화면에서 무엇이 되는지, (다)는 이름표 bold를 고르는 CSS 규칙이 있는지 따져 봅니다.

(가) 같다 · (나) 다르다 — 첫 코드는 두 줄, 둘째 코드는 한 줄에 '#섬 #배' · (다) 같다

• (가) 두 span 사이의 줄바꿈과 빈칸은 같은 줄 안의 글이라 빈칸 하나로 그려집니다(브라우저 규칙 2). 줄을 바꿔 쓴 코드와 빈칸 하나로 쓴 코드가 같은 화면입니다.
• (나) 블록 div는 한 줄을 통째로 차지해 위에서 아래로 쌓이고, 인라인 span은 글자처럼 줄 안에서 흐릅니다(브라우저 규칙 7).
• (다) 이름표 bold에는 모양이 없습니다. 그 이름표를 고르는 규칙이 없으니 화면은 이름표 없는 문단과 같습니다(브라우저 규칙 4 — 규칙이 닿아야 모양이 바뀝니다).
• (가)를 '다르다'로 고른 것은 코드에서 줄을 바꾼 대로 화면도 줄이 바뀐다고 본 것입니다(친 대로 나온다는 생각).
• (나)를 '같다'로 고른 것은 블록 사이의 줄바꿈도 빈칸 하나로 합쳐진다고 본 것입니다. 블록은 늘 새 줄에서 시작합니다.
• (다)를 '다르다'로 고른 것은 이름표의 이름이 모양을 정한다고 본 것입니다(이름이 모양을 정한다는 생각).

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

선언 셋을 한 줄씩 따로 보고, 값의 글자를 하나하나 읽어 보세요.

브라우저가 알아듣지 못하는 값을 만나면 그 선언을 어떻게 하는지 떠올리고, 그다음 줄에서 무엇을 하는지 따져 봅니다.

(가) #6e6e73 · (나) 왼쪽 · (다) 13

rgb(110, 110, 115)와 #6e6e73은 같은 색입니다. text-align의 start는 글이 시작하는 쪽 — 한국어에서는 왼쪽입니다.

• centre는 text-align의 값이 아니라 그 선언 한 줄만 버려집니다(브라우저 규칙 4). 앞뒤 선언 둘은 그대로 닿습니다. Styles 창에서는 그 선언에 취소선이 그어지고 ⚠가 붙습니다.
• 글자색과 크기는 footer에 주었지만 안의 p가 물려받습니다.
• (다)에 16을 쓴 것은 틀린 줄 아래는 모두 버려진다고 본 것입니다(CSS도 멈춘다는 생각).
• (나)에 가운데를 쓴 것은 브라우저가 비슷한 글자를 알아서 고쳐 읽는다고 본 것입니다. 값은 center로 씁니다.

다시 볼 레슨: 규칙의 모양 · 글자 꾸미기 · 브라우저 기본 스타일과 Styles 창

#pick이 고르는 요소를 줄마다 id를 보며 짚어 보세요.

(가) 2 — '오늘의 추천'과 '라테 4500원'입니다. (나) 뜬다 — 2번 줄

잰 값 둘째 줄은 셋째 줄(녹차)을 잰 것입니다.

• CSS의 #pick은 id가 pick인 요소를 모두 고릅니다(브라우저 규칙 4). 그래서 두 줄 다 빨갛습니다.
• id는 한 페이지에 하나뿐인 이름표입니다. 검사기가 둘째 줄을 'pick이라는 ID가 겹친다'로 잡고, 첫 자리를 Warning으로 알려 줍니다. #pick 링크로 옮겨 가거나 JavaScript가 id로 찾을 때는 앞쪽 하나만 씁니다.
• 여러 줄에 함께 붙일 이름표는 class="pick"이고, CSS는 .pick으로 고릅니다.
• 흔한 오답은 (가)의 1입니다. id가 하나뿐이니 CSS도 앞쪽 하나만 칠한다고 본 것입니다 — 앞쪽 하나만 쓰는 것은 링크와 JavaScript입니다.

다시 볼 레슨: id와 class · 검사기로 틀린 HTML 찾기

두 규칙이 저마다 무슨 속성을 정하는지 보세요.

hidden은 기본 스타일의 어느 선언으로 감추는지 떠올리고, 그 속성을 우리 CSS가 정한 줄이 있는지 봅니다.

받는 답: 도시락 지참

• hidden은 기본 스타일의 display: none 선언으로 요소를 감춥니다. .notice는 우리 CSS가 display를 정해, 기본 스타일보다 우리 규칙이 이겨 보입니다.
• .memo 규칙은 글자색만 정합니다. display는 기본 스타일 그대로라 '물은 두 병'은 감춰진 채입니다.
• '없음'은 hidden이 붙으면 CSS가 무엇을 정해도 감춰진다고 본 것입니다.
• '물은 두 병 / 도시락 지참'은 감춘 요소에 규칙이 닿기만 하면 다시 보인다고 본 것입니다. 다시 보이게 하는 것은 display를 정한 규칙뿐입니다.
• hidden으로 감출 요소에는 display를 정하는 규칙이 닿지 않게 합니다.

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

Elements 패널에 보일 나무를 먼저 그려 보세요.

CSS가 고르는 것은 파일에 친 글자가 아니라 브라우저가 지은 나무입니다. 줄 tr 둘은 table 바로 안에 그대로 남을까요? 머리 줄도 몸통 줄과 같은 묶음에 들어가는지 따져 봅니다.

㉡ ㉢ ㉣ ㉤ — 줄 둘의 칸 넷이 모두 빨갛습니다.

• 브라우저는 table 바로 안의 줄들을 몸통 묶음 tbody에 넣어 나무를 짓습니다(브라우저 규칙 2). thead를 쓰지 않았으니 머리 줄도 같은 tbody에 듭니다. CSS의 tbody는 이렇게 지어진 요소를 골라, 그 안의 칸들이 글자색을 물려받습니다(브라우저 규칙 4).
• caption은 묶음 밖, table 바로 안에 그대로 남아 검은 글자입니다. 잰 값 나무의 caption 안 앞뒤 빈칸은 줄을 나눠 쓴 자리의 빈칸 글이고, 화면에는 그려지지 않습니다.
• ㉥을 고른 것은 나무가 파일에 친 그대로라 tbody가 없다고 본 것입니다.
• ㉣ ㉤만 고른 것은 브라우저가 머리 줄을 thead로 알아서 나눈다고 본 것입니다. 머리 줄을 따로 묶으려면 thead를 직접 씁니다.

다시 볼 레슨: 표 table · 규칙의 모양

(나)는 블록과 인라인 가운데 어느 쪽인지 먼저 가려 보세요.

받는 답: (가) article · (나) span · (다) class · (라) caption

• 꺾쇠를 붙여 <article>처럼 써도 같은 답입니다.
• (가)에 section을 쓰면 다른 답입니다 — section은 한 글 안의 한 부분입니다.
• (나)에 div를 쓰면 다른 답입니다 — div는 한 줄을 통째로 차지하는 블록입니다.
• (다)에 id를 쓰면 다른 답입니다 — id는 한 페이지에 하나뿐인 이름표입니다.
• (라)에 th를 쓰면 다른 답입니다 — th는 표 안의 머리 칸입니다.

다시 볼 레슨: article과 section 가르기 · div·span과 블록·인라인 · id와 class · 표 table

검사기가 짚은 줄의 속성을 하나씩 세어 보세요.

한 요소에 같은 속성을 두 번 쓰면 브라우저는 그 가운데 하나만 씁니다. 이름표 둘을 한 속성에 담는 꼴을 떠올려 봅니다.

받는 답: 1번 줄을 <p class="tip alert">⁠으로 고칩니다.

<p class="tip alert">
  우천 시 취소
</p>

.tip {
  font-weight: bold;
}

.alert {
  color: #d70015;
}

검사기 Error는 '안 먹을 때 찾는 차례'의 2번 '요소가 나무에 내 생각대로 있나'에서 봅니다.

• 1번 '파일이 닿았나'는 지나갑니다 — .tip의 굵기가 먹으니 CSS는 닿았습니다.
• 2번 — 검사기가 1번 줄에 'class 속성이 겹친다'고 알려 줍니다. 브라우저는 같은 속성을 두 번 만나면 앞의 것만 나무에 둡니다. 그래서 이 문단의 이름표는 tip 하나이고, .alert이 고를 요소가 없습니다.
• 이름표 둘은 class 하나 안에 빈칸으로 나눠 적습니다.

다르게 고쳐도 되는 곳: class="alert tip"처럼 차례를 바꿔도 됩니다. 이름표의 차례는 뜻이 없습니다.

• 흔한 오답은 class="tip"을 지우는 것입니다. 빨갛게는 되지만 굵기가 빠집니다.
• .tip 규칙에 color: #d70015;를 더 쓰는 것도 흔합니다. 화면은 맞지만 검사기 Error는 그대로이고, alert 이름표는 나무에 없습니다 — 증상만 덮은 것입니다.

다시 볼 레슨: id와 class · 검사기로 틀린 HTML 찾기

1은 내용 셋마다 '어느 영역인가'를 한 칸씩 적습니다. 2는 1의 표대로 감싸고, 3은 2에서 쓴 여는 태그에 이름표를 더합니다.

1 — 페이지의 영역 정하기

2 · 3 — 감싼 뒤 이름표를 더한 코드입니다.

<header class="cafe-header">
  <p>플로우 카페</p>
  <nav>
    <a href="menu.html">
      메뉴
    </a>
  </nav>
</header>
<main>
  <h1>오늘의 메뉴</h1>
  <p>커피 4000원</p>
</main>
<footer class="cafe-footer">
  <p>서울 플로우길 1</p>
</footer>

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

다르게 써도 되는 곳:

• 가게 이름을 p 대신 메뉴 링크처럼 링크로 써도 됩니다. 영역과 이름표는 같습니다.
• nav에도 이름표를 붙여도 됩니다.

흔한 잘못:

• 가게 이름을 h1으로 쓰면 제목이 '플로우 카페'와 '오늘의 메뉴' 둘이 되어, 이 페이지의 제목이 무엇인지 흐려집니다. 페이지 전체의 제목은 하나로 둡니다.
• 이름표를 class="header"처럼 요소 이름으로 붙여도 화면은 같지만, 3의 결과(cafe-header)와 다릅니다. CSS가 찾는 글자와 똑같이 씁니다.
• 메뉴 링크를 nav 없이 header 안에만 두면 영역 목록에 내비게이션이 들지 않습니다.

다시 볼 레슨: 시맨틱 요소 · id와 class

4단원 연습 문제 14번의 모범 답이고, 레시피 한 페이지 만들기의 완성 파일과 같습니다. recipe-note 폴더에 세 파일을 두고 시작합니다.

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

recipe-note 안 images 폴더에 그림 여섯을 받아 둡니다 — 4단원에서 받은 kimchi.svg가 있으면 그대로 씁니다. 카드에 내 그림을 써도 됩니다 — 가로가 긴 4:3 그림이면 width="200" height="150"⁠에서 찌그러지지 않습니다.

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

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 1은 12번의 세 하위 목표(영역 정하기 → 감싸기 → 이름표)를 두 페이지에 한 번씩 합니다.

모범 답 전체는 받기 파일입니다. 내 파일과 견줘 봅니다.

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

걸음 1 · 4 — 두 페이지의 머리글 · 바닥글(본문 main은 그 사이)과 style.css 끝에 더한 규칙 둘입니다. 내비게이션의 링크는 안에서 줄을 나누지 않고, 여는 태그만 나눠 글을 > 바로 뒤에 붙였습니다.

<!-- index.html -->
<header class="site-header">
  <a
    class="site-name"
    href="index.html"
  >
    레시피 노트
  </a>
  <nav>
    <a
      href="index.html"
    >레시피 목록</a>
    <a
      href="kimchi.html"
    >김치볶음밥</a>
  </nav>
</header>
<footer class="site-footer">
  <p>
    내가 만든 요리를 기록하는 곳
  </p>
</footer>

/* style.css */
.site-name {
  color: #1d1d1f;
  font-weight: bold;
}

.site-footer {
  color: #6e6e73;
  font-size: 14px;
  text-align: center;
}

걸음 2 — 김치볶음밥 카드입니다. 나머지 다섯 장은 요리 이름을 링크 없이 <h2>계란말이</h2>처럼 씁니다. 배지도 글을 > 뒤에 붙였습니다.

<!-- index.html -->
<ul class="recipe-list">
  <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>
  …
</ul>

걸음 3 — 김치볶음밥 페이지 본문의 뼈대와 영양 정보 표입니다.

<!-- kimchi.html -->
<main>
  <article>
    <h1>김치볶음밥</h1>
    <p>
      <span
        class="badge"
      >한식</span>
      · 조리 15분 · 2인분
    </p>
    …
    <section>
      <h2>재료</h2>
      …
    </section>
    <section>
      <h2 id="steps">
        조리 순서
      </h2>
      …
    </section>
    <section>
      <h2>영양 정보</h2>
      …
    </section>
  </article>
</main>

<!-- kimchi.html -->
<table>
  <caption>
    1인분 기준, 대략의 값
  </caption>
  <thead>
    <tr>
      <th>항목</th>
      <th>양</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">
        열량
      </th>
      <td>550 kcal</td>
    </tr>
    <tr>
      <th scope="row">
        탄수화물
      </th>
      <td>52 g</td>
    </tr>
    <tr>
      <th scope="row">
        단백질
      </th>
      <td>18 g</td>
    </tr>
    <tr>
      <th scope="row">
        지방
      </th>
      <td>30 g</td>
    </tr>
    <tr>
      <th scope="row">
        나트륨
      </th>
      <td>1550 mg</td>
    </tr>
  </tbody>
</table>

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

다르게 써도 되는 곳:

• 내비게이션의 링크 둘을 목록(ul 안 li 둘)으로 써도 됩니다. 화면은 점이 붙은 두 줄이 되지만 영역 · 링크는 같습니다.
• 그림의 alt는 '계란말이 한 접시'처럼 보이는 것을 한 문장으로 써도 됩니다.
• 표의 thead · tbody를 쓰지 않아도 됩니다. 브라우저가 tbody를 지어 넣어 나무와 화면이 같습니다.

흔한 잘못:

• 내비게이션의 링크 안에서 줄을 나누면(<a href="index.html"> 다음 줄에 '레시피 목록') 첫 링크 끝의 빈칸이 링크 안에 남아, 두 링크의 밑줄이 하나로 이어져 보입니다. 줄 안의 빈칸 글은 빈칸 하나로 그려지기 때문입니다(브라우저 규칙 2).
• 머리글을 main 안에 두면 역할이 머리글(banner)이 아니라 sectionheader가 되어, 영역 목록에 머리글이 들지 않습니다. 머리글 · 바닥글은 main 밖, body 바로 안에 둡니다.
• 카드의 이름표를 class="recipe card"처럼 띄어 쓰면 이름표가 recipe · card 둘이 됩니다. 이름표 하나는 붙여 씁니다(recipe-card).
• .site-footer 규칙의 점을 빠뜨려 site-footer로 쓰면 그런 태그가 없어 아무것도 고르지 않습니다. 바닥글은 본문과 같은 글씨 그대로입니다.

폰 물음의 답은 ㉢ ㉠ ㉤ ㉡ ㉣입니다. ㉠과 ㉤을 바꾸면 배지가 이름 앞에 옵니다 — 이 단계는 이름 뒤에 둡니다.

다시 볼 레슨: 시맨틱 요소 · article과 section 가르기 · div·span과 블록·인라인 · id와 class · 표 table