단원 1~4 섞어 풀기

주소가 적힌 줄마다, 브라우저가 페이지를 그리려면 그 파일이 지금 있어야 하는지 따져 보세요.

받는 답: 4 — menu.html · style.css · coffee.svg · latte.svg

• 브라우저는 menu.html을 먼저 받아 읽다가 link와 img의 주소를 만나면 그 파일을 따로 받으러 갑니다(브라우저 규칙 1). latte.svg도 받으러 가지만 없어서, 그 그림 자리만 깨지고 '라테 한 잔'이 보입니다. 나머지는 그대로 그려집니다.
• a의 order.html은 누르면 갈 곳이라, 누르기 전에는 받지 않습니다.

크롬으로 이 폴더를 열어 받는 파일을 지켜보면 menu.html · style.css · latte.svg(없음) · coffee.svg를 받으러 가고, order.html은 받지 않습니다.

• 흔한 오답은 5입니다. 링크의 order.html까지 함께 받는다고 본 것입니다.
• 3은 없는 latte.svg는 받으러 가지 않는다고 본 것입니다. 브라우저는 가 보고 나서야 없다는 것을 압니다.
• 1은 웹 페이지가 HTML 파일 하나라고 본 것입니다. HTML은 다른 파일의 주소를 적어 둘 뿐입니다.

다시 볼 레슨: 웹 페이지가 화면에 나오기까지 · 그림 넣기 img

짝마다 화면과 나무를 따로 따집니다.

(가) 같다 · (나) 같다 · (다) 같다 — 세 짝 모두 화면이 같습니다. 나무는 세 짝 모두 다릅니다.

• (가) 앞 코드는 쉼표 뒤 빈칸 자리에서 줄을 바꿨습니다. 줄바꿈과 들여쓰기는 나무에 글로 그대로 남고, 그릴 때 빈칸 하나로 합쳐집니다(브라우저 규칙 2). 그래서 화면은 같고, 나무의 글은 다릅니다.
• (나) strong과 b는 기본 모양이 같아 화면이 같습니다. 나무의 요소는 다르고, '중요하다'는 뜻은 strong에만 있습니다(브라우저 규칙 3).
• (다) 두 목록 모두 우리 규칙이 줄 앞 표시를 지웠고, 기본 스타일의 안쪽 여백은 둘 다 그대로라 화면이 같습니다. 나무에는 여전히 ul과 ol이 있어, 차례가 뜻인 목록인지는 다릅니다.
• 흔한 오답은 (가) 다르다입니다. 친 대로 줄이 나온다고 본 것입니다(친 대로 나온다는 생각).
• 나무까지 같다고 쓴 것은 화면이 같으면 코드가 짓는 것도 같다고 본 것입니다(태그가 모양이라는 생각).
• 짝 셋 가운데 하나는 다르리라 짐작하고 고른 답이라면, 짝마다 다시 따져 보세요.

다시 볼 레슨: 공백 규칙과 특수 문자 · 문단과 강조 · 브라우저 기본 스타일과 Styles 창

#0000ff를 빨강 · 초록 · 파랑 두 자리씩 나누어 보세요. ff는 그 빛을 가장 밝게, 00은 끈다는 뜻입니다.

㉠ ㉡ ㉣ — 세 선언이 같은 색입니다.

<h1>가</h1>
<h2>나</h2>
<h3>다</h3>
<p>라</p>

h1 {
  color: blue;
}

h2 {
  color: rgb(0 0 255);
}

h3 {
  color: #005bb5;
}

p {
  color: rgb(0, 0, 255);
}

• #0000ff는 빨강 00 · 초록 00 · 파랑 ff라 파랑 빛만 가장 밝게 켠 색이고, rgb(0 0 255)와 같습니다. 쉼표를 넣은 rgb(0, 0, 255)는 잰 값 칸이 보여 주는 꼴(계산된 값)로 같은 색입니다.
• 이름 색 blue도 #0000ff입니다.
• 흔한 오답은 ㉢까지 고른 것입니다. 파란빛이면 같은 색이라고 본 것입니다. #005bb5는 레시피 노트의 진한 파랑으로, 잰 값부터 다릅니다.
• ㉠을 뺀 것은 이름 색이 숫자 색과 다른 색이라고 본 것이고, ㉣을 뺀 것은 쉼표가 들어가면 다른 값이라고 본 것입니다.

다시 볼 레슨: 색 쓰기

폴더 나무에서 두 페이지가 저마다 어느 폴더에 있는지부터 짚어 보세요.

두 페이지마다 그 파일이 든 폴더에서 images/gyeran-mari.svg⁠를 따라가 보세요.

받는 답: (가) index.html만 · (나) ../../images/gyeran-mari.svg

결과 화면과 잰 값은 이 줄을 index.html에서 그린 것입니다.

• 같은 주소라도 그 주소를 적은 파일이 든 폴더에서 출발합니다(브라우저 규칙 1). index.html에서는 recipe-note 안의 images/gyeran-mari.svg⁠에 닿아 그려집니다.
• 계란말이 페이지에서는 recipes/egg/ 안의 images/를 찾습니다. 그런 폴더가 없어 깨진 표시와 '계란말이 한 접시'가 보입니다. 크롬으로 폴더를 만들어 재 보면 이 그림의 원본 너비는 0px입니다.
• (나)는 ../../로 recipes/egg/에서 두 칸 올라가 recipe-note/에 선 뒤 images/로 들어갑니다.
• 흔한 오답은 (가) 두 페이지 모두입니다. 주소가 늘 사이트 맨 위에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각).
• (나)에 ../images/gyeran-mari.svg⁠를 쓴 것은 한 칸만 올라간 것입니다. recipes/ 안에서 images/를 찾아 여전히 깨집니다.
• (나)에 /images/gyeran-mari.svg⁠를 쓴 것은 /로 시작하면 사이트 맨 위에서 찾는다고 본 것입니다. 내 컴퓨터에서 연 파일은 디스크 맨 위에서 찾아 여전히 깨집니다.

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

head와 header가 저마다 html의 어느 자리에 있는지 보세요.

받는 답: (가) 레시피 노트 · (나) 내가 만든 요리 기록 / 레시피 목록

• head는 문서 정보를 두는 자리라 페이지에 그려지지 않고, 그 안의 title 글은 탭에 보입니다.
• header는 body 안에서 페이지의 머리 부분을 묶는 요소라 그 안의 글이 페이지에 그려집니다(브라우저 규칙 2).
• 흔한 오답은 (나)를 '레시피 목록'만 쓴 것입니다. header도 head처럼 그려지지 않는 자리라고 본 것입니다. 이름이 비슷해도 다른 요소입니다.
• (가)에 '레시피 목록'을 쓴 것은 페이지 제목 h1과 탭 글 title을 바꿔 본 것입니다.

다시 볼 레슨: 문서 뼈대

줄마다 어떤 태그로 쓰였는지 적어 보세요.

CSS를 가리고 HTML만 보세요. 제목 차례는 화면의 크기가 아니라 무엇에서 나오나요?

㉠ ㉢ — h1과 h2입니다.

잰 값의 역할은 화면 읽기 프로그램이 그 요소를 무엇으로 받는지입니다 — heading은 제목, paragraph는 문단입니다.

• 제목 차례는 나무의 제목 요소에서 나옵니다(브라우저 규칙 3). CSS로 h1을 본문만큼 작게 해도 h1은 1단계 제목이고, 문단을 크게 키워도 문단입니다.
• <p><b>10월 출사</b></p>는 화면에서 제목처럼 크고 굵어 보여도 굵은 글이 든 문단이라, 제목 차례에 들지 않습니다.
• 흔한 오답은 ㉡ ㉢ ㉣입니다. 크고 굵게 보이는 글이 제목이라고 본 것입니다(태그가 모양이라는 생각).
• ㉠을 뺀 것은 작게 꾸민 h1이 제목에서 빠진다고 본 것입니다. 크기는 모양일 뿐입니다.

다시 볼 레슨: 제목 h1~h6 · 문단과 강조 · 글자 꾸미기

선언마다 값이 알아들을 수 있는 꼴인지, 끝에 ;이 있는지 한 줄씩 보세요.

;이 없는 줄은 다음 줄과 어떻게 이어 읽힐까요?

㉠ ㉡ ㉢ — 셋이 버려지고 ㉣만 먹습니다.

• ㉠은 # 기호가 없어 색 값으로 알아듣지 못합니다.
• ㉡은 끝에 ;이 없어, 브라우저가 3번 줄과 4번 줄을 이어 font-size 선언 하나로 읽습니다. 그 값이 28px font-weight: normal⁠이 되어 알아듣지 못하니, ㉡과 ㉢이 함께 버려집니다.
• 버린 선언 말고는 그대로 먹습니다(브라우저 규칙 4). ㉣만 남아 제목이 가운데에 놓이고, 색 · 크기 · 굵기는 h2의 기본 스타일 그대로입니다. Styles 창에서는 버린 줄에 경고 표시와 취소선이 보입니다(크롬 기준).
• 흔한 오답은 ㉠ ㉡입니다. ;이 빠지면 그 줄만 버려진다고 본 것입니다.
• ㉠ ㉡ ㉢ ㉣ 넷 모두는 틀린 줄이 있으면 규칙이 통째로 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각).

다시 볼 레슨: 규칙의 모양 · 색 쓰기

편집기 탭의 ●이 무엇을 알리는 표시인지, 브라우저가 무엇을 읽는지 떠올려 보세요.

① — 파랑 그대로입니다.

• ●은 고친 것을 아직 저장하지 않았다는 표시입니다. 브라우저는 편집기 창이 아니라 저장된 파일을 읽으므로(브라우저 규칙 1), 새로고침해도 파일에 남은 #005bb5로 그립니다. 저장(Ctrl+S, macOS는 ⌘+S)한 뒤 새로고침하면 빨개집니다.
• CSS가 생각대로 안 먹을 때 찾는 차례 1번 '파일이 닿았나'의 첫 물음 '저장했나'가 이 자리입니다.
• ② 편집기에 보이는 글이 곧 파일이라고 본 것입니다.
• ③ 편집기에 열린 파일은 브라우저가 읽지 못한다고 본 것입니다. 브라우저는 마지막으로 저장된 파일을 그대로 읽습니다.

다시 볼 레슨: 고친다 → 저장한다 → 새로고침한다 · 브라우저 기본 스타일과 Styles 창

color가 칠하는 것이 글자인지 바탕인지 떠올려 보세요.

③ — 흰 바탕에 아주 옅은 하늘색 제목이 있습니다.

• color는 글자색입니다. 바탕을 칠하는 속성은 background-color입니다. 흰 바탕에 옅은 하늘색 글자는 대비가 낮아 거의 읽히지 않습니다.
• ① 바라던 모습입니다. color로 바탕이 칠해진다고 본 것입니다. 하늘색 띠를 깔려면 background-color: #d6ecff;⁠를 씁니다.
• ② color가 글자와 바탕을 함께 칠한다고 본 것입니다.

다시 볼 레슨: 색 쓰기

(가)는 head 안에, (나)는 목적지 요소의 여는 태그 안에 씁니다.

받는 답: (가) title · (나) id · (다) font-family · (라) ol

같은 답으로 치는 꼴: 꺾쇠까지 쓴 <title> · <ol>.

틀리는 꼴 — 까닭:

• (가) h1 — 페이지 맨 위에 그려지는 제목입니다. head는 title을 담는 문서 정보 자리입니다.
• (나) href — 링크 쪽에 #이름을 적는 속성입니다. 목적지에는 id를 # 없이 씁니다.
• (다) font-size — 글자 크기입니다.
• (라) ul — 차례에 뜻이 없는 점 목록입니다. li는 목록의 한 줄입니다.

다시 볼 레슨: 문서 뼈대 · 같은 페이지 안에서 옮겨 가기 · 글자 꾸미기 · 목록 ul·ol·li

맨 위 Error의 줄 번호로 가서, 그 줄의 닫는 태그가 무엇을 닫으려는 것인지 여는 태그와 짝지어 보세요.

받는 답: 11번 줄을 </ol>로 고칩니다. 고친 파일의 body 안을 그리면 이렇습니다.

<ol>
  <li>짐 싸기</li>
  <li>공항 가기</li>
</ol>
<p>즐거운 여행!</p>

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

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

• ol을 </ul>로 닫으려 했지만, 열린 ul이 없어 브라우저는 그 닫는 태그를 버립니다. ol이 열린 채 남아 다음 문단까지 ol 안에 지었고, 그래서 문단이 목록처럼 안으로 들어가 그려졌습니다(브라우저 규칙 2). 오류 메시지 없이 그려지니, 틀린 곳은 검사기가 찾아 줍니다.
• 증상은 12번 줄 문단에 보이지만, 고칠 곳은 11번 줄입니다.
• 흔한 오답은 11번 줄을 지우는 것입니다. ol을 닫는 태그가 여전히 없어 문단이 그대로 ol 안입니다.
• 11번 줄은 두고 그 앞에 </ol>을 더하는 것도 흔합니다. 화면과 나무는 맞아져 위 상자도 이룸으로 보지만, 남은 </ul>에 검사기 Error 'Stray end tag “ul”.'이 그대로 남습니다.

다시 볼 레슨: 목록 ul·ol·li · 검사기로 틀린 HTML 찾기 · 요소 안의 요소

Styles 창에 li 규칙이 보이지 않습니다. 찾는 차례 몇 번에서 막혔는지부터 정하세요.

li 규칙이 Styles 창에 안 보이는데 선택자 li는 맞습니다. 그러면 그 위 규칙을 보세요 — 여는 {마다 닫는 }가 짝을 이루는지 셉니다.

받는 답: 7번 줄 color: #005bb5; 다음에 } 한 줄을 넣어 h2 규칙을 닫습니다.

<h2>재료</h2>
<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

/* style.css */
body {
  background-color: #f5f5f7;
}

h2 {
  color: #005bb5;
}

li {
  color: #6e6e73;
}

찾는 차례 3번에서 찾습니다.

• 1번 — 바탕과 제목 색이 바뀌었으니 style.css는 닿았습니다.
• 2번 — Elements 패널에서 ul 안에 li 둘이 있습니다.
• 3번 — li를 고르면 Styles 창에 li 규칙이 보이지 않습니다. 규칙이 닿지 않았으니 선택자를 봅니다. 선택자 li는 맞으니 그 위 규칙의 중괄호를 셉니다 — 6번 줄 h2 {의 짝 }가 없습니다.

닫는 중괄호가 빠지면 브라우저는 아래 규칙까지 앞 규칙 안의 것으로 읽어, li 규칙이 목록에 닿지 않습니다. 어떻게 읽히는지는 8단원 '하위·자식·형제 선택자'에서 봅니다. 오류 메시지는 없고, 빠진 중괄호 아래의 규칙만 이상하게 먹습니다.

다르게 고쳐도 되는 곳: 8번 빈 줄 자리에 }를 써도 같습니다. 규칙 사이를 띄우려면 그 아래에 빈 줄을 둡니다.

• 흔한 오답은 li 규칙에 !important를 붙이는 것입니다. 규칙이 목록에 닿지 않으니 여전히 기본 글자색입니다.
• 파일 맨 끝에 }를 하나 더 붙이는 것도 흔합니다. li 규칙은 여전히 h2 규칙 안에 든 채라 목록이 그대로입니다.
• 아래에 ul { color: #6e6e73; } 규칙을 더 쓰는 것도 같은 까닭으로 목록이 그대로입니다 — 증상만 덮으려는 고치기 셋 모두 목록 색을 바꾸지 못합니다.

다시 볼 레슨: 브라우저 기본 스타일과 Styles 창 · 규칙의 모양 · 레시피 한 페이지 만들기