단원 연습 문제

href의 값이 무엇으로 시작하는지 보세요. 그 값을 브라우저가 어디에서부터 찾는지 떠올려 봅니다.

② — trip/example.com/jeju⁠를 찾다가 '파일에 액세스할 수 없음'이 뜹니다.

• https://로 시작하지 않는 주소는 내 파일을 가리키는 상대 주소입니다. 브라우저는 그 주소를 적은 index.html이 든 trip/에서 출발해 trip/example.com/jeju⁠를 찾고, 그런 파일이 없어 크롬은 '파일에 액세스할 수 없음'을 띄웁니다(브라우저 규칙 1).
• 바깥 사이트로 가려면 https://부터 주소 전체를 씁니다 — https://example.com/jeju.
• ① 앞부분이 사이트 이름처럼 생겼으니 브라우저가 바깥 사이트로 알아본다고 본 것입니다. 바깥 사이트는 https://부터 적어야 합니다.
• ③ 주소가 틀린 링크는 눌리지 않는다고 본 것입니다. 링크는 눌리고, 브라우저가 그 주소를 찾아간 결과가 화면에 뜹니다.

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

5번 줄에서 여는 태그와 닫는 태그를 나오는 차례대로 적어 보세요.

5번 줄의 </li>에서 닫히는 것과 닫히지 않고 남는 것을 가려 보세요. 남은 요소는 다음 줄에서 어떻게 될까요?

㉠ ㉡ ㉢ — 세 줄 모두입니다.

잰 값의 a li는 'a 안에 든 li'라는 뜻입니다.

• 5번 줄의 </li>에서 김치볶음밥 줄은 닫히지만, 닫지 않은 a는 남습니다. 브라우저는 오류 없이 다음 글 앞에서 그 a를 다시 열어 남은 두 줄을 통째로 감쌌습니다(브라우저 규칙 2). 그래서 '계란말이'와 '된장찌개'도 링크 글자로 그려지고, 누르면 kimchi.html로 갑니다.
• 흔한 오답은 ㉠ 하나입니다. </li>가 a까지 닫아 그 줄에서 끝난다고 본 것입니다. 링크는 </a>로 닫습니다.
• ㉣은 태그가 틀리면 링크가 그려지지 않는다고 본 것입니다(틀리면 멈춘다는 생각).
• 검사기에 넣으면 3번 줄에 'Unclosed element “a”.'를 비롯한 Error가 나옵니다.

다시 볼 레슨: 요소 안의 요소 · 링크 a

두 주소가 갈리는 조각은 ../ 하나뿐입니다. 그 조각이 무엇을 하는지부터 정하세요.

두 주소 모두 drinks.html이 든 폴더에서 출발합니다. 그 폴더에서 주소를 한 조각씩 따라가 보세요.

받는 답: (가) cafe/menu/images/latte.svg · (나) cafe/images/latte.svg — 그림이 그려지는 쪽은 (나)입니다.

같은 답으로 치는 꼴: 앞의 cafe/를 빼고 menu/images/latte.svg · images/latte.svg처럼 쓴 것.

• 두 주소는 모두 drinks.html이 든 menu/에서 출발합니다(브라우저 규칙 1).
• (가)는 menu/ 안의 images/를 찾습니다. 그런 폴더가 없어 그림을 받지 못하고, 그 자리에 깨진 표시와 '라테 한 잔'이 보입니다.
• (나)는 ../로 한 칸 올라가 cafe/에 선 뒤 images/로 들어가 그림에 닿습니다.
• 흔한 오답은 (가)도 cafe/images/latte.svg⁠로 쓴 것입니다. 주소가 늘 사이트 맨 위에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각). 같은 images/latte.svg라도 index.html에 적으면 그려지고, menu/drinks.html에 적으면 깨집니다.

다시 볼 레슨: 경로 읽기 · 그림 넣기 img

맨 앞 조각 ../가 어느 폴더에서 '한 칸 위'인지부터 정하세요.

가짜 줄이 차례에 들지 않는 까닭은 무엇일까요?

• ① 상대 주소는 그 주소를 적은 파일이 든 폴더에서 출발하기 때문
• ② 브라우저가 index.html을 가장 먼저 받기 때문
• ③ ../가 사이트 맨 위로 바로 가는 조각이기 때문

㉡ ㉤ ㉠ ㉢ 차례이고, 가짜는 ㉣입니다. 놓은 뒤 물음의 답은 ①입니다.

• 주소를 적은 파일은 days/day2.html이라 출발점은 days/입니다. ../로 한 칸 올라가 trip/에 선 뒤 images/로 들어가 map.svg를 받습니다(브라우저 규칙 1).
• ㉣을 차례에 넣으면 주소가 늘 사이트 맨 위에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각). 그렇게 출발하면 ../가 trip/ 바깥으로 나가 그림에 닿지 못합니다.
• ② 받는 차례와 주소의 출발점은 다른 일입니다. 출발점은 파일마다 다릅니다.
• ③ ../는 지금 폴더에서 한 칸만 올라갑니다. 두 칸이면 ../../로 씁니다.

다시 볼 레슨: 경로 읽기

링크마다 # 뒤의 이름과 목적지 제목의 id를 한 글자씩 견주어 보세요.

㉠ — '커피' 하나입니다.

• 링크의 # 뒤 이름과 목적지의 id가 대소문자까지 똑같아야 그 요소로 옮겨 갑니다. ㉡은 #Tea와 id="tea"의 첫 글자가 달라, 누르면 주소 끝만 #Tea가 되고 화면은 그대로입니다.
• ㉢은 id에 #까지 적어 이름이 '#dessert'가 됐습니다. href="#dessert"가 찾는 이름은 'dessert'라 닿지 않습니다. id에는 # 없이 이름만 씁니다.
• 흔한 오답은 ㉠ ㉡ ㉢ 셋입니다. 대소문자는 브라우저가 맞춰 준다고 보고, #도 양쪽에 똑같이 적어야 한다고 본 것입니다.
• ㉠ ㉡만 고른 것은 대소문자를 맞춰 준다고 본 것이고, ㉠ ㉢만 고른 것은 id에도 # 기호를 적는다고 본 것입니다.

다시 볼 레슨: 같은 페이지 안에서 옮겨 가기

링크 셋 사이에 코드로 무엇이 적혀 있는지 짚어 보세요.

이 문단 안에서 줄을 바꾸는 요소가 있는지 찾아보세요.

받는 답: 커피 차 디저트 — 한 줄입니다.

• 링크 a는 문단 안 글의 한 부분이라 줄을 바꾸지 않습니다. 링크 사이의 줄바꿈과 들여쓰기는 나무에 글로 남고, 그릴 때 빈칸 하나로 합쳐집니다(브라우저 규칙 2).
• 흔한 오답은 '커피 / 차 / 디저트'(세 줄)입니다. 친 대로 줄이 나온다고 본 것입니다(친 대로 나온다는 생각). 링크마다 줄을 바꾸려면 br를 넣거나 목록 ul의 li마다 링크를 하나씩 둡니다.
• '커피차디저트'처럼 붙여 쓴 것은 줄바꿈이 아무것도 남기지 않는다고 본 것입니다.

다시 볼 레슨: 공백 규칙과 특수 문자

브라우저가 받으러 가는 파일 이름과 폴더에 있는 파일 이름을 한 글자씩 견주어 보세요.

받지 못했을 때 그 자리를 무엇이 맡는지 떠올려 보세요.

③ — 깨진 표시 옆에 alt 글 '김치볶음밥 한 그릇'이 있습니다.

• 브라우저는 src의 images/kimchi.jpg를 따로 받으러 가지만, 폴더에는 이름이 다른 kimchi.svg만 있어 받지 못합니다(브라우저 규칙 1). 받지 못한 그림 자리는 alt 글이 맡고, 크롬은 깨진 그림 표시를 함께 그립니다.
• ① 브라우저가 비슷한 이름의 그림을 알아서 찾아 그린다고 본 것입니다. 주소는 글자 하나까지 같아야 하고, 확장자도 파일 이름의 일부입니다.
• ② alt는 화면 읽기 프로그램만 쓰는 글이라 화면에는 나오지 않는다고 본 것입니다. 그림을 받지 못하면 alt 글이 화면에 보입니다. alt를 빼면 ②처럼 표시만 남습니다.

다시 볼 레슨: 그림 넣기 img

alt 글과 figcaption 글이 저마다 언제 화면에 나오는지 떠올려 보세요.

받는 답: (가) 소고기를 넣은 미역국 · (나) 미역은 30분 불려 씁니다.

• alt는 그림을 볼 수 없을 때 그림 대신 쓰는 글입니다. 그림이 그려지면 화면에는 나오지 않고, 화면 읽기 프로그램이 그림을 부르는 이름이 됩니다(브라우저 규칙 3).
• figcaption은 그림과 상관없이 늘 보이는 설명입니다.
• (가)의 흔한 오답은 캡션 글 '미역은 30분 불려 씁니다.'입니다. figcaption이 그림의 이름이 된다고 본 것입니다. 그림의 읽는 이름은 alt가 정합니다.
• (나)에 alt 글까지 쓴 것은 alt 글도 늘 보인다고 본 것입니다. alt 글은 그림을 받지 못했을 때만 보입니다.

다시 볼 레슨: 그림 형식과 figure · 그림 넣기 img

짝마다 두 코드에서 다른 곳 하나를 찾아 표시해 보세요.

짝마다 두 코드에서 다른 곳 하나를 찾고, 그 다름이 기본 모양을 바꾸는지 · 빈칸을 만드는지 · 검사기만 보는 것인지 가려 보세요.

(가) 같다 · (나) 다르다 — 뒤 코드는 '지도'와 '를' 사이가 한 칸 띈다 · (다) 같다. (다)에서 Error가 나오는 쪽은 둘째 코드입니다.

• (가) b와 strong은 기본 모양이 같아 화면이 같습니다. 화면 읽기 프로그램과 검색이 '중요하다'로 받는 것은 strong 쪽뿐입니다(브라우저 규칙 3).
• (나) 앞 코드는 </a>와 '를' 사이에 아무것도 없습니다. 뒤 코드는 그 자리에서 줄을 바꿔, 줄바꿈이 빈칸 하나로 그려졌습니다(브라우저 규칙 2).
• (다) 크롬은 160px의 앞 숫자 160을 읽어 같은 크기로 그립니다. 하지만 width · height는 단위 없는 수만 받는 속성이라, 검사기가 둘째 코드에 Error를 냅니다.

<img
  src="images/kimchi.svg"
  alt="김치볶음밥"
  width="160px"
  height="120px"
/>

• (가) 다르다는 strong이 b보다 더 굵게 그려진다고 본 것입니다. 둘의 차이는 모양이 아니라 뜻입니다.
• (나) 같다는 줄바꿈이 아무것도 남기지 않는다고 본 것입니다. 붙여 보이려면 '를'을 </a> 바로 뒤에 이어 씁니다.
• (다)에서 첫째 코드를 고른 것은 크기에 단위를 붙여야 맞는다고 본 것입니다. CSS의 길이와 달리 이 두 속성은 수만 씁니다.

다시 볼 레슨: 문단과 강조 · 공백 규칙과 특수 문자 · 그림 넣기 img

(가)는 a의 여는 태그에 더하는 이름="값" 한 쌍입니다. (다)와 (라)는 하나가 속성, 하나가 요소입니다.

받는 답: (가) target="_blank" · (나) ../ · (다) alt · (라) figcaption

같은 답으로 치는 꼴: (가)를 작은따옴표로 쓴 target='_blank' · (라)를 꺾쇠까지 쓴 <figcaption>.

틀리는 꼴 — 까닭:

• (가) href="_blank" — href는 갈 곳을 적는 속성입니다.
• (나) / — /로 시작하는 주소는 내 폴더가 아니라 디스크 맨 위에서 찾습니다.
• (다) figcaption — 늘 보이는 설명이라 그림을 받았을 때도 보입니다.
• (라) figure — 그림과 설명을 함께 묶는 바깥 요소입니다. 설명은 그 안의 figcaption에 씁니다.

다시 볼 레슨: 링크 a · 경로 읽기 · 그림 넣기 img · 그림 형식과 figure

폴더 나무에서 옮긴 뒤의 japchae.html과 images/가 어디에 있는지 짚어 보세요.

옮긴 뒤 japchae.html이 든 폴더에서 3번 줄의 주소를 한 조각씩 따라가 보세요.

받는 답: 3번 줄을 src="images/japchae.svg"⁠로 고칩니다.

<h1>잡채</h1>
<img
  src="images/japchae.svg"
  alt="잡채 한 접시"
  width="280"
  height="210"
/>

그림이 깨지면 4단원에서 세울 '안 먹을 때 찾는 차례'의 1번 '파일이 닿았나'부터 봅니다 — 그림 주소와 폴더입니다.

• 옮기기 전 recipes/japchae.html의 출발점은 recipes/라, ../로 한 칸 올라가야 images/에 닿았습니다. 옮긴 뒤 출발점은 recipe-note/입니다. 거기서 ../로 올라가면 레시피 노트 바깥 폴더에서 images/를 찾게 됩니다(브라우저 규칙 1).

• 고친 주소는 recipe-note/에서 바로 images/로 들어가 그림에 닿습니다. 잰 값의 원본 너비 800px은 그림 파일을 받았다는 뜻입니다(받지 못하면 0px).

• 흔한 오답은 src="/images/japchae.svg"⁠입니다. /로 시작하면 사이트 맨 위에서 찾는다고 본 것입니다. 내 컴퓨터에서 연 파일은 디스크 맨 위에서 찾아 여전히 깨집니다.

• 그림 폴더를 recipe-note 바깥으로 옮기는 것도 흔합니다. 잡채 그림은 보이지만, 같은 폴더의 다른 페이지들이 images/로 찾던 그림이 모두 깨집니다 — 증상만 옮긴 것입니다.

다시 볼 레슨: 경로 읽기 · 그림 넣기 img

폴더 나무에서 tteokbokki.html이 어느 폴더에 있는지부터 짚어 보세요.

출발점은 tteokbokki.html이 든 폴더입니다. 거기서 index.html과 images/까지 몇 칸 올라가야 하는지 셉니다.

모범 답입니다. 2의 주소 둘은 모두 ../로 시작하고, 3의 alt는 그림에 무엇이 보이는지 적습니다.

<!-- snacks/tteokbokki.html -->
…
<!-- 1. 출발점: snacks/ -->
<!-- 2. 경로 쓰기 -->
<p>
  <a href="../index.html">
    레시피 목록
  </a>
</p>
<!-- 3. alt 고르기 -->
<img
  src="../images/tteokbokki.svg"
  alt="떡볶이 한 접시"
  width="280"
  height="210"
/>

크롬에서 이 폴더를 열어 보면 링크는 recipe-note/index.html⁠로 가고, 그림은 recipe-note 안의 images/tteokbokki.svg⁠를 받아 원본 너비 800px로 읽힙니다. 확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

• alt는 그림이 전하는 것이면 '어묵을 넣은 떡볶이 한 접시'처럼 달라도 됩니다.
• 링크 글은 갈 곳이 드러나면 '목록으로 돌아가기'처럼 달라도 됩니다.

흔한 잘못:

• 두 주소를 index.html · images/tteokbokki.svg⁠로 쓰면 snacks/ 안에서 찾아 링크는 '파일에 액세스할 수 없음', 그림은 깨진 표시와 alt 글이 됩니다(출발점이 늘 같다는 생각).
• alt에 tteokbokki.svg처럼 파일 이름을 쓰면 화면 읽기 프로그램이 파일 이름을 읽습니다.

다시 볼 레슨: 경로 읽기 · 그림 넣기 img · 링크 a

2단원 연습 문제 14번의 모범 답입니다. recipe-note 폴더에 이 파일 하나가 있는 상태에서 시작합니다.

<!-- kimchi.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
</head>
<body>
  <h1>김치볶음밥</h1>
  <p>한식 · 조리 15분 · 2인분</p>
  <p>
    <strong>잘 익은 김치</strong>와
    찬밥만 있으면 십오 분 만에
    끝나는 한 그릇 요리입니다.
  </p>
  <h2>재료</h2>
  <ul>
    <li>밥 2공기</li>
    <li>잘 익은 김치 1컵</li>
    <li>달걀 2개</li>
    <li>참기름 1큰술</li>
    <li>김가루 조금</li>
  </ul>
  <h2>조리 순서</h2>
  <ol>
    <li>
      김치를 한입 크기로 썹니다.
    </li>
    <li>
      달군 팬에 기름을 두르고
      김치를 3분간 볶습니다.
    </li>
    <li>
      밥을 넣고 김치와 고루
      섞어 가며 볶습니다.
    </li>
    <li>
      참기름을 두르고 불을 끕니다.
    </li>
    <li>
      달걀 프라이와 김가루를
      올려 냅니다.
    </li>
  </ol>
</body>
</html>

할 일마다 저장하고 새로고침해 그 할 일의 확인 목록을 봅니다. 폰 물음은 여는 태그와 닫는 태그를 나오는 차례대로 짝지어 보세요.

폰 물음은 나중에 연 요소를 먼저 닫는지 보세요.

모범 답입니다. 4단원이 이 두 파일에서 이어 갑니다.

<!-- index.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>레시피 노트</title>
</head>
<body>
  <h1>레시피 노트</h1>
  <ul>
    <li>
      <a href="kimchi.html">
        김치볶음밥 레시피
      </a>
    </li>
    <li>계란말이</li>
    <li>된장찌개</li>
    <li>떡볶이</li>
    <li>잡채</li>
    <li>미역국</li>
  </ul>
</body>
</html>

<!-- kimchi.html -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김치볶음밥</title>
</head>
<body>
  <p>
    <a href="index.html">
      레시피 목록으로
    </a>
  </p>
  <h1>김치볶음밥</h1>
  <p>한식 · 조리 15분 · 2인분</p>
  <figure>
    <img
      src="images/kimchi.svg"
      alt="김치볶음밥 한 그릇"
      width="200"
      height="150"
    />
    <figcaption>
      달걀은 반숙으로 올립니다.
    </figcaption>
  </figure>
  <p>
    <strong>잘 익은 김치</strong>와
    찬밥만 있으면 십오 분 만에
    끝나는 한 그릇 요리입니다.
  </p>
  <p>
    <a href="#steps">조리 순서</a>
  </p>
  <h2>재료</h2>
  <ul>
    <li>밥 2공기</li>
    <li>잘 익은 김치 1컵</li>
    <li>달걀 2개</li>
    <li>참기름 1큰술</li>
    <li>김가루 조금</li>
  </ul>
  <h2 id="steps">조리 순서</h2>
  <ol>
    <li>
      김치를 한입 크기로 썹니다.
    </li>
    <li>
      달군 팬에 기름을 두르고
      김치를 3분간 볶습니다.
    </li>
    <li>
      밥을 넣고 김치와 고루
      섞어 가며 볶습니다.
    </li>
    <li>
      참기름을 두르고 불을 끕니다.
    </li>
    <li>
      달걀 프라이와 김가루를
      올려 냅니다.
    </li>
  </ol>
</body>
</html>

두 파일 모두 검사기 Error · Warning이 0입니다. 확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

• 링크 글은 갈 곳이 드러나면 '목록으로 돌아가기'처럼 달라도 됩니다. '여기'처럼 갈 곳을 말하지 않는 글은 쓰지 않습니다.
• id의 이름은 steps가 아니어도 됩니다. 링크의 # 뒤 이름과 대소문자까지 같으면 됩니다.

흔한 잘못:

• id="#steps"처럼 id에 # 기호를 붙이면 링크를 눌러도 화면이 옮겨 가지 않습니다.
• </a>를 빠뜨리면 그 아래 글까지 링크가 됩니다(문제 2).
• 그림 주소를 ../images/kimchi.svg로 쓰면 recipe-note 바깥에서 찾아 깨집니다. kimchi.html은 맨 위 폴더에 있습니다.

폰 물음의 답은 ㉡ ㉣ ㉤ ㉠ ㉥ ㉢입니다. a는 p 안에 든 자식이라 p보다 먼저 닫고, 제목 h1은 문단이 닫힌 뒤에 옵니다.

다시 볼 레슨: 링크 a · 같은 페이지 안에서 옮겨 가기 · 그림 형식과 figure · 경로 읽기