단원 연습 문제

첫 줄의 둘째 <strong>을 </p>와 견주어 보세요. 그 태그가 여는 태그인지 닫는 태그인지부터 가립니다.

① — 윗줄 끝 낱말과 아랫줄 전체가 굵습니다.

• /가 빠진 <strong>은 닫는 태그가 아니라 strong을 하나 더 여는 태그입니다. 첫 줄에서 strong 둘이 열린 채 </p>를 만납니다.
• 브라우저는 오류 없이 나무를 고쳐 짓습니다. 문단은 </p>에서 strong과 함께 닫고, 닫지 않은 strong 둘을 다시 열어 아래 문단까지 감쌉니다(브라우저 규칙 2). 그래서 '커피 4000원'도 굵게 그려집니다.
• ② 닫는 태그의 / 하나쯤 빠져도 화면은 그대로라고 본 것입니다. /가 없으면 여는 태그입니다.
• ③ 태그가 틀린 곳에서 브라우저가 그리기를 멈춘다고 본 것입니다(틀리면 멈춘다는 생각). 브라우저는 고쳐 지어 끝까지 그립니다.

다시 볼 레슨: 요소·태그·속성 · 요소 안의 요소

(가)는 닫는 태그가 없는 요소 가운데에서, (라)는 &로 시작하는 특수 문자 가운데에서 찾습니다.

받는 답: (가) br · (나) ul · (다) strong · (라) <

같은 답으로 치는 꼴: <br> · <br /> · <ul> · <strong> — 꺾쇠와 /는 꼴만 다릅니다. BR처럼 대문자로 써도 브라우저는 같게 읽지만, 이 과목은 소문자로 씁니다.

틀리는 꼴 — 까닭:

• (나) ol — 번호가 붙는 목록이라 차례가 뜻일 때 씁니다. li는 목록의 한 줄입니다.
• (다) b — 화면의 굵기는 같지만 '중요하다'는 뜻이 나무에 남지 않습니다. em은 힘주어 읽는 자리입니다.
• (라) > — 반대쪽 꺾쇠 >입니다.

다시 볼 레슨: 요소·태그·속성 · 목록 ul·ol·li · 문단과 강조 · 공백 규칙과 특수 문자

줄마다 그 줄까지 열려 있는 요소를 바깥부터 차례로 적어 보세요.

<li>가 새로 시작될 때마다 그 앞의 li가 어떻게 되는지, 안쪽 <ul>이 나올 때 아직 열려 있던 li가 무엇인지 보세요.

㉠ ㉡ ㉣ — 여권 · 옷 · 충전기의 li입니다.

잰 값의 body > ul > li는 'body 바로 안의 ul, 그 바로 안의 li'라는 뜻입니다.

• li는 다음 <li>가 시작되는 자리에서 저절로 닫힙니다(브라우저 규칙 2). '여권'은 '옷' 앞에서, '옷'은 '충전기' 앞에서 닫힙니다.
• 안쪽 <ul>은 '옷'이 닫히기 전에 나왔으니 '옷'의 li 안에 듭니다. '잠옷'의 li는 그 안쪽 ul의 자식이고, </ul>에서 함께 닫힙니다.
• 흔한 오답은 ㉠ 하나입니다. 닫지 않은 li 안에 다음 li가 차례로 들어간다고 본 것입니다.
• ㉠ ㉡ ㉢ ㉣ 넷을 고른 것도 흔합니다. li는 모두 바깥 목록의 줄이라고 본 것입니다. '잠옷'은 '옷'에 딸린 안쪽 목록의 줄이라 화면에서 ◦ 점으로 그려집니다.

다시 볼 레슨: 요소 안의 요소 · 목록 ul·ol·li

새로고침하면 브라우저가 무엇을 다시 읽는지, 1번과 2번에서 바꾼 것이 각각 어디에 남았는지 보세요.

③ — 제목은 '카페 메뉴', 라테는 4800원입니다.

• 새로고침하면 브라우저는 저장된 파일을 다시 받아 읽고 나무를 새로 짓습니다(브라우저 규칙 1 · 2). 파일에는 2번에서 저장한 '4800원'이 있고, 제목은 처음 그대로 '카페 메뉴'입니다.
• Elements 패널의 나무는 브라우저가 지은 나무를 보여 주는 사본입니다. 그래서 문제 3처럼 고쳐 지은 나무도 Elements에서는 고친 꼴로 보이고, 거기서 바꾼 글은 파일에 남지 않습니다.
• ① 새로고침해도 화면이 그대로라고 본 것입니다. 새로고침은 파일을 다시 읽어 처음부터 다시 그립니다.
• ② Elements에서 바꾼 것도 파일에 남는다고 본 것입니다(사본을 파일로 보는 생각). 고친 것을 남기려면 편집기에서 파일을 고쳐 저장합니다.

다시 볼 레슨: 개발자 도구로 요소 나무 보기 · 고친다 → 저장한다 → 새로고침한다

제목마다 바로 위 제목보다 몇 단계 아래인지 세어 보세요. '끓이는 순서'의 바로 위 갈래는 무엇인가요?

받는 답:

<!-- 1. 제목 단계 정하기 -->
<h1>미역국</h1>
<h2>재료</h2>
<h3>불리는 법</h3>
<h2>끓이는 순서</h2>

검사기 Error · Warning은 0입니다. 제목만 모은 차례는 아래와 같습니다.

• 미역국

  • 재료
    • 불리는 법
  • 끓이는 순서

• 제목의 숫자는 글자 크기가 아니라 단계입니다(브라우저 규칙 3). '불리는 법'은 '재료'보다 한 단계 아래라 h3이고, 기본 크기도 h2보다 작아 첫째 결과가 저절로 맞습니다.

• '끓이는 순서'는 '재료'와 나란한 갈래라 h2로 돌아옵니다. 올라올 때는 여러 단계를 한 번에 올라와도 됩니다.

• 흔한 오답은 '불리는 법'을 h4로 쓴 것입니다. 작은 제목을 작은 글자로 보이려고 고른 것입니다(태그가 모양이라는 생각). 화면은 멀쩡해도 제목 차례에 3단계가 비고, 검사기가 그 줄을 Error로 잡습니다.

<h1>미역국</h1>
<h2>재료</h2>
<h4>불리는 법</h4>
<h2>끓이는 순서</h2>

• '끓이는 순서'를 h3로 쓴 것도 흔합니다. 바로 앞 '불리는 법'과 같은 단계라고 본 것입니다. 그러면 '끓이는 순서'가 '재료' 아래 작은 제목으로 들어갑니다.

다시 볼 레슨: 제목 h1~h6 · 검사기로 틀린 HTML 찾기

9번 줄에서 연 주석이 어디에서 닫히는지 끝까지 찾아보세요.

받는 답: (가) 플로우 카페 · (나) 이번 주 메뉴

• title의 글은 탭에, body 안의 글은 페이지에 그려집니다(브라우저 규칙 2).
• 주석은 <!--부터 -->까지입니다. 9번 줄에서 연 주석은 끝내 -->를 만나지 못해, 그 아래 문단 둘과 </body> · </html>까지 모두 주석이 됐습니다. 오류 메시지 없이 페이지에는 제목 하나만 남습니다. 검사기는 이 자리를 Error로 잡습니다.
• (나)의 흔한 오답은 '이번 주 메뉴 / 쿠키 2000원'입니다. 주석이 그 줄이나 다음 줄에서 저절로 끝난다고 본 것입니다. 녹차만 빼려면 10번 줄 끝에 -->를 씁니다.
• (가)에 '이번 주 메뉴'를 쓴 것은 title과 h1을 바꿔 본 것입니다. 페이지의 제목은 h1, 탭의 글은 title입니다.

다시 볼 레슨: 문서 뼈대 · 고친다 → 저장한다 → 새로고침한다

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

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

(가) 같다 · (나) 다르다 — 뒤 코드는 '녹차'와 '3500원' 사이가 한 칸 띈다 · (다) 같다. 화면이 같은 (가)와 (다)도 나무는 다릅니다.

• (가) b와 strong은 기본 모양이 같아 화면이 같습니다. 나무의 요소 이름은 달라서, 화면 읽기 프로그램과 검색은 strong 쪽만 '중요하다'로 받습니다(브라우저 규칙 3).
• (나) 앞 코드는 '녹차'와 <em> 사이에 아무것도 없습니다. 뒤 코드는 그 자리에서 줄을 바꿔, 줄바꿈이 빈칸 하나로 그려졌습니다(브라우저 규칙 2).
• (다) 둘 다 '꼭'이 굵고 기울어 화면은 같습니다. 나무에서는 앞 코드가 strong 안에 em, 뒤 코드가 em 안에 strong이라 부모와 자식이 바뀌었습니다.
• 둘째 물음에 '나무도 같다'고 쓴 것이 가장 흔한 오답입니다. 화면이 같으면 요소도 같다고 본 것입니다(태그가 모양이라는 생각). 모양은 같아도 나무의 요소와 그 뜻은 다를 수 있습니다.
• (나) 같다는 줄바꿈이 아무것도 남기지 않는다고 본 것입니다. 붙여 보이려면 <em>을 '녹차' 바로 뒤에 이어 씁니다.

다시 볼 레슨: 문단과 강조 · 공백 규칙과 특수 문자 · 요소 안의 요소

두 ol이 저마다 어느 li를 바로 안에 담고 있는지 나눠 보세요.

받는 답: '액자 끼우기' 2 · '전시장 꾸미기' 2

잰 값 줄은 '제 목록에서 둘째인 li'를 고른 것입니다. 둘 다 번호 2가 붙는 줄입니다.

• 브라우저는 ol마다 그 바로 안의 li를 위에서부터 세어 번호를 매깁니다(브라우저 규칙 2). 바깥 ol의 줄은 '사진 고르기' · '전시장 꾸미기' 둘이라 '전시장 꾸미기'는 2번입니다.
• 안쪽 ol은 '사진 고르기'의 li 안에 든 따로 된 목록이라, 제 줄 '인화하기' · '액자 끼우기'를 1 · 2로 셉니다.
• 흔한 오답은 '액자 끼우기' 3 · '전시장 꾸미기' 4입니다. 위에서부터 모든 li를 한 줄로 이어 센 것입니다.
• '전시장 꾸미기' 4만 틀렸다면, 안쪽 목록은 따로 세면서 바깥 목록이 안쪽 줄까지 센다고 본 것입니다. 바깥 ol은 제 바로 안의 li만 셉니다.

다시 볼 레슨: 목록 ul·ol·li

코드에서 <br />가 있는 자리와, 코드의 줄이 바뀌는 자리를 모두 짚어 보세요.

줄을 바꾸는 요소가 몇 개인지 세고, '접수 마감' 뒤의 줄바꿈과 들여쓰기가 화면에서 무엇이 되는지 보세요.

② — 두 줄로, 둘째 줄의 두 말이 한 칸 떨어져 있습니다.

• 줄을 바꾼 것은 br 하나뿐입니다. '접수 마감' 뒤의 줄바꿈과 들여쓰기는 나무에 글로 남고, 화면에 그릴 때 빈칸 하나로 합쳐집니다(브라우저 규칙 2).
• ① 친 대로 줄이 나온다고 본 것입니다(친 대로 나온다는 생각). 줄을 나누려면 br나 요소를 씁니다.
• ③ 줄바꿈은 아무것도 남기지 않는다고 본 것입니다. 줄바꿈도 빈칸 하나가 되어 '마감'과 '10월' 사이가 띕니다.

다시 볼 레슨: 공백 규칙과 특수 문자 · 요소·태그·속성

(가)는 나무에 남는 요소를 바깥부터 적어 보고, (나)는 '평일'과 '9시' 사이에 적힌 글자를 하나씩 적어 보세요.

문단을 여는 태그가 몇 번 나오는지 세고,  가 보통 빈칸처럼 합쳐지는지 떠올려 보세요.

받는 답: (가) 1 · (나) 3

• 나무에는 문단 p 하나 안에 br 둘과 특수 문자   셋이 듭니다. br 둘은 같은 문단 안에서 줄을 두 번 바꿔 빈 줄 하나를 만들 뿐, 문단을 나누지 않습니다(브라우저 규칙 2).
•  는 합쳐지지 않는 빈칸이라, 셋을 이어 쓰면 세 칸 그대로 그려집니다.
• 이 습관이 짓는 것은 '빈 줄이 든 문단 하나'입니다. 글이 나뉘면 문단을 나누고, 문단 사이 틈과 글자 사이 칸은 CSS가 맡습니다 — 빈칸 폭은 글꼴마다 달라  로 맞춘 칸은 다른 기기에서 어긋납니다.
• (가)의 흔한 오답은 2입니다. 빈 줄 자리에서 문단이 나뉜다고 본 것입니다.
• (나)의 흔한 오답은 1입니다.  도 보통 빈칸처럼 하나로 합쳐진다고 본 것입니다.

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

㉡은 태그 넷을 나오는 차례대로, ㉢은 제목 태그의 숫자를 차례대로 적어 보세요.

㉡은 여닫는 차례를, ㉢은 제목 숫자가 한 단계씩만 내려가는지를 보세요. ㉠의 />가 오류인지도 떠올려 봅니다.

㉡ ㉢ — 검사기의 메시지는 아래와 같습니다.

<p>영업 중<br />9시부터</p>

<p><em>라테</p></em>

<h1>여행 일정</h1>
<h2>첫날</h2>
<h4>점심</h4>

• ㉡은 em을 닫기 전에 p를 닫았습니다. 뒤에 글이 없어 고쳐 지은 나무가 바른 코드와 같아졌고, 그래서 화면만 보면 틀린 줄을 모릅니다(브라우저 규칙 2).
• ㉢은 h2 바로 아래에 h4를 두어 3단계를 건너뛰었습니다. 화면은 멀쩡하지만 제목 차례에 빈 단계가 생깁니다.
• 흔한 오답은 '없음'입니다. 화면이 멀쩡하면 HTML도 맞다고 본 것입니다. 브라우저가 틀린 태그도 고쳐 그리니, 틀린 곳은 검사기가 찾아 줍니다.
• ㉠을 고른 것은 Info를 오류로 본 것입니다. />에 나오는 Info는 알림이라, 'errors & warnings only'를 켜면 목록에서 빠집니다. 이 과목은 빈 요소를 />로 씁니다.

다시 볼 레슨: 검사기로 틀린 HTML 찾기 · 요소 안의 요소 · 제목 h1~h6

검사기가 가리킨 2번 줄에서 여는 태그와 닫는 태그를 짝지어, 짝이 엇갈린 곳을 찾아보세요.

받는 답: 2번 줄을 <p><em>일요일</em> 8시에 모여요.</p>⁠로 고칩니다. 아래는 고친 코드를 32칸에 맞게 나눠 쓴 것입니다.

<h1>사진 동아리</h1>
<p>
  <em>일요일</em> 8시에 모여요.
</p>
<p>장소는 학교 정문입니다.</p>

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

• 검사기 Error는 브라우저가 내 생각과 다른 나무를 지은 자리를 알려 줍니다. 4단원에서 세울 '안 먹을 때 찾는 차례'로는 2번 '요소가 나무에 내 생각대로 있나'에서 찾은 것입니다.
• 틀린 코드에서 em보다 p를 먼저 닫아, 브라우저가 '일요일'만 문단에 남기고 ' 8시에 모여요.'를 문단 밖 새 줄로 옮겨 지었습니다(브라우저 규칙 2). 고친 나무는 <p><em>일요일</em> 8시에 모여요.</p>⁠입니다.

다르게 고쳐도 되는 곳: 2번 줄을 받는 답처럼 한 줄로 써도 화면은 같습니다.

• 흔한 오답은 </p>만 지운 <p><em>일요일 8시</em>에 모여요.⁠입니다. 문장은 한 줄로 붙지만 '8시'까지 기울고, 닫는 태그를 빼 두게 됩니다.
• 3번 줄을 고치는 것도 흔합니다. 갈라져 보인 문장 바로 아래 줄이 틀렸다고 본 것입니다. 검사기가 가리킨 줄은 2번입니다.
• </em>을 '일요일' 뒤에 넣고 </p>를 줄 끝으로 옮겼지만 '8시' 뒤의 </em>을 남긴 줄도 화면과 나무가 받는 답과 같아, 위 상자는 이룸으로 봅니다. 그래도 검사기에는 남은 </em>에 'Stray end tag “em”.'이 나옵니다 — 고친 코드도 검사기에 다시 넣어 Error 0을 봅니다.

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

1은 <!DOCTYPE html>과 html · head · body를 여닫는 줄입니다. 2는 head 안에, 3은 body 안에 들어갑니다.

모범 답입니다. 이름 자리에는 내 이름을 씁니다.

<!-- hello.html -->
<!-- 1. 뼈대 -->
<!DOCTYPE html>
<html lang="ko">
<head>
  <!-- 2. head 채우기 -->
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width"
  />
  <title>김하늘</title>
</head>
<body>
  <!-- 3. body 채우기 -->
  <h1>안녕하세요</h1>
  <p>웹 페이지를 처음 만듭니다.</p>
</body>
</html>

검사기 Error · Warning은 0입니다( /> 줄마다 Info가 있습니다 — 접어 둡니다). 확인 목록을 다 채웠으면 맞습니다. 코드가 모범 답과 달라도 됩니다.

다르게 써도 되는 곳:

• 뷰포트 줄과 title의 차례는 바꿔도 됩니다. charset 줄은 head를 연 바로 다음에 둡니다.
• <meta charset="utf-8">⁠처럼 /> 없이 써도 같은 나무입니다.
• 하위 목표 주석은 지워도 화면이 같습니다. 주석은 화면에 그려지지 않는 메모입니다.

흔한 잘못:

• 2를 빠뜨려 title이 없으면 탭에 파일 이름이 보이고, 검사기가 head에 title이 없다는 Error를 냅니다.
• 1의 첫 줄 <!DOCTYPE html>을 빠뜨리면 겉은 비슷해도 브라우저가 옛날 페이지 흉내(호환 모드)로 그리고, 검사기가 Error를 냅니다. 확인 목록 끝 줄이 이것을 보는 자리입니다.

다시 볼 레슨: 문서 뼈대 · 검사기로 틀린 HTML 찾기

세 걸음마다 저장하고 새로고침해 그 걸음의 확인 목록을 봅니다. 폰 물음은 줄을 나눈 자리 바로 앞뒤의 글자를 보세요.

폰 물음은 줄을 나눈 자리에 원래 빈칸이 있었는지 보세요.

모범 답입니다. 하위 목표 1(제목 단계)은 13 · 20 · 28번 줄, 2(문단과 목록)는 14~19번 줄의 두 문단과 21~27 · 29~48번 줄의 두 목록, 3(강조할 곳)은 16번 줄의 strong입니다. 3단원 연습 문제가 이 파일에서 이어 갑니다.

<!-- 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>

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

다르게 써도 되는 곳:

• 재료 다섯 줄의 차례는 바꿔도 됩니다. ul은 차례에 뜻이 없는 목록입니다. 조리 순서는 바꾸면 뜻이 달라집니다.
• 소개 문단은 빈칸이 있던 자리면 어디서 줄을 나눠도 화면이 같습니다. 32칸 안이면 한 줄에 써도 됩니다.
• 하위 목표 주석을 남겨 두어도 화면은 같습니다.

흔한 잘못:

• 조리 순서를 ul로 쓰면 번호 대신 점이 붙습니다. 번호를 1.처럼 글로 쓰면 ol의 번호와 겹쳐 '1. 1. 김치를…'이 됩니다.
• 재료의 한 줄을 li 없이 ul 바로 안에 쓰면 점 없는 줄이 섞이고, 검사기가 Error를 냅니다.

폰 물음의 답은 ②입니다. </strong>과 '와' 사이는 빈칸이 없는 자리인데, 그 자리에서 줄을 바꿔 빈칸이 생깁니다(브라우저 규칙 2).

<p>
  <strong>잘 익은 김치</strong>
  와 찬밥만 있으면 됩니다.
</p>

①은 '와' 뒤에서, ③은 '익은'과 '김치' 사이의 빈칸 자리에서 줄을 바꿔 화면이 그대로입니다.

다시 볼 레슨: 제목 h1~h6 · 문단과 강조 · 목록 ul·ol·li · 공백 규칙과 특수 문자