단원 연습 문제

선언마다 끝에 ;이 있는지 보세요.

;이 없는 곳이 있다면, 브라우저가 그 줄과 다음 줄을 어떻게 읽을지 따져 봅니다.

① — 빨간 제목이 왼쪽에 있습니다.

• 3번 줄 끝에 ;이 없어, 브라우저는 28px부터 4번 줄 text-align: center까지를 font-size의 값 하나로 읽습니다. 그런 값은 알아듣지 못하니 이 선언을 오류 없이 버립니다(브라우저 규칙 4). 그래서 크기와 정렬 둘이 함께 빠집니다.
• 2번 줄의 색 선언은 그대로 먹고, 크기는 h2의 기본 크기, 정렬은 기본인 왼쪽입니다.
• ② ;이 빠지면 그 줄만 버려진다고 본 것입니다. ;이 없는 3번 줄은 4번 줄까지 이어 읽혀, 정렬 선언도 함께 버려집니다.
• ③ 규칙에 틀린 곳이 있으면 그 규칙이 통째로 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각). 버리는 것은 알아듣지 못한 선언뿐입니다.

다시 볼 레슨: 규칙의 모양

CSS 파일 1번 줄에 무엇이 적혀 있는지 보고, 그 줄이 CSS의 꼴인지 HTML의 꼴인지 가려 보세요.

CSS 파일 1번 줄의 글이 바로 아래 줄과 이어져 무엇처럼 읽히는지 보세요.

받는 답: (가) 칠해지지 않는다 — 흰 바탕 그대로 · (나) #005bb5

(나)는 rgb(0, 91, 181) · rgb(0 91 181)로 써도 같은 답입니다. 잰 값의 rgba(0, 0, 0, 0)은 칠하지 않은 투명한 바탕이라는 뜻입니다.

• CSS 파일 안의 <style>은 태그가 아니라 알아듣지 못하는 글입니다. 이 글이 첫 규칙의 선택자 body 앞에 붙어 선택자째 틀린 글이 되고, 브라우저는 그 규칙을 통째로 버립니다(브라우저 규칙 4).
• 둘째 규칙 h1부터는 그대로 먹습니다. 맨 끝의 </style>도 알아듣지 못하는 글이지만, 뒤에 규칙이 없어 버릴 것이 없습니다.
• 흔한 오답은 (가) 칠해진다입니다. <style> 줄을 브라우저가 건너뛴다고 본 것입니다. CSS 파일에는 CSS만 씁니다.
• (나)를 기본 글자색(검정)으로 쓴 것은 틀린 줄이 있으면 파일 전체가 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각).

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

style 속성 하나가 닿는 범위가 어디까지인지 떠올려 보세요. (나)는 세 줄을 함께 고르는 선택자부터 정합니다.

받는 답: (가) ㉠ ㉡ · (나) li { color: #6e6e73; }

잰 값 둘째 줄의 li:last-child는 '목록의 마지막 li'(녹차)를 고른 것입니다.

• style 속성은 그 속성을 쓴 요소 하나에만 닿습니다. 이 습관이 짓는 것은 줄마다 따로 붙은 모양이라, 속성을 빠뜨린 녹차 줄은 기본 글자색 그대로입니다.
• (나)는 li를 고르는 규칙 하나로 세 줄에 함께 닿습니다. 색을 바꿀 때도 이 한 곳만 고칩니다.

<ul>
  <li>커피 4000원</li>
  <li>라테 4500원</li>
  <li>녹차 3500원</li>
</ul>

li {
  color: #6e6e73;
}

다르게 써도 되는 곳: ul { color: #6e6e73; }⁠도 세 줄이 같은 회색이 됩니다. ul에 준 글자색을 안의 li가 물려받습니다.

• (가)에 ㉢까지 고른 것은 style 속성이 같은 이름의 요소에 다 닿는다고 본 것입니다.
• (나)에 li { style="color: #6e6e73;" }⁠처럼 쓴 것은 속성의 꼴과 규칙의 꼴을 섞은 것입니다. 규칙의 중괄호 안에는 선언만 씁니다.

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

폴더 나무에서 about.html과 style.css가 저마다 어느 폴더에 있는지 짚어 보세요.

about.html이 든 폴더에서 출발해 style.css까지 가는 길을 폴더 나무에서 따라가 보세요.

③ — href="../css/style.css"⁠입니다.

• link의 주소도 그 주소를 적은 파일이 든 폴더에서 출발합니다(브라우저 규칙 1). 출발점 pages/에서 ../로 cafe/에 올라간 뒤 css/로 들어가 style.css에 닿습니다.
• ① index.html에서 쓰던 주소를 그대로 쓴 것입니다(출발점이 늘 같다는 생각). 브라우저는 pages/css/style.css를 찾다가 없어서 CSS가 하나도 닿지 않습니다.
• ② /로 시작하면 사이트 맨 위에서 찾는다고 본 것입니다. 내 컴퓨터에서 연 파일은 디스크 맨 위에서 찾아 못 찾습니다.

크롬으로 이 폴더를 만들어 열어 보면, ③만 css/style.css의 규칙이 제목에 닿고 ① · ②는 제목이 기본 글자색 그대로입니다.

다시 볼 레슨: 경로 읽기 · CSS 연결하기

둘째 규칙의 값을 첫째 규칙의 값과 한 글자씩 견주어 보세요.

받는 답: #6e6e73

같은 답으로 치는 꼴: rgb(110, 110, 115) · rgb(110 110 115) · #6E6E73. 잰 값 칸에는 브라우저가 고쳐 적은 계산된 값 rgb(110, 110, 115)로 보입니다.

• 둘째 규칙의 1d1d1f는 # 기호가 없어 색 값으로 알아듣지 못합니다. 브라우저는 오류 없이 그 선언만 버립니다(브라우저 규칙 4). Styles 창에서는 그 줄에 경고 표시와 취소선이 보입니다(크롬 기준).
• 둘째 규칙에 남은 선언이 없어, 첫째 규칙의 색이 그대로입니다.
• 흔한 오답은 #1d1d1f입니다. # 기호가 없어도 색으로 읽는다고 보고, 뒤에 쓴 규칙이 이긴다고 본 것입니다. 알아듣지 못한 선언은 겨루기에 들지 않습니다.
• 기본 글자색(검정)도 흔한 오답입니다. 틀린 줄이 있으면 CSS가 다 안 먹는다고 본 것입니다(CSS도 멈춘다는 생각).

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

선언 셋을 씁니다. 나와야 할 결과 두 줄을 함께 보세요 — 둘째 줄은 제목의 줄 높이입니다.

줄 높이는 제목에도 1.6배로 다시 셈되어야 하니, 단위를 붙인 길이로 적을지 단위 없는 수로 적을지 정하세요.

받는 답:

<h1>김치볶음밥</h1>
<p>15분이면 됩니다.</p>

body {
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

• font-family는 목록의 앞에서부터 이 기기에 있는 글꼴을 찾고, 끝의 sans-serif는 글꼴 하나가 아니라 종류 이름이라 어느 기기에나 있습니다.
• 단위 없는 수 1.6은 '그 요소 글자 크기의 1.6배'로 요소마다 다시 셈됩니다. 문단은 16 × 1.6 = 25.6px, 32px 제목은 51.2px입니다(body에 준 글자 값은 안쪽이 물려받고, 단위 없는 수는 수 그대로 내려갑니다).

다르게 써도 되는 곳: 세 선언의 차례는 바꿔도 됩니다. 글꼴 목록을 나누지 않고 한 줄에 써도 같습니다 — 이 과목은 32칸에 맞추려고 쉼표 뒤에서 나눠 씁니다.

• 흔한 오답은 line-height: 25.6px;입니다. 첫째 결과는 맞지만, 길이로 정한 줄 높이는 그대로 물려받아 32px 제목도 25.6px이 되고 두 줄이 겹칩니다.

<h1>김치볶음밥</h1>
<p>15분이면 됩니다.</p>

body {
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 25.6px;
}

• 글꼴 목록을 system-ui sans-serif처럼 쉼표 없이 쓰면 브라우저가 알아듣지 못해 그 선언을 버리고(Styles 창에서는 경고 표시와 취소선), 기본 글꼴로 그려집니다(브라우저 규칙 4).

다시 볼 레슨: 글자 꾸미기 · 규칙의 모양

규칙이 직접 고른 요소는 body 하나입니다. 다섯 요소가 저마다 글자색을 어디서 받는지 보세요.

안쪽 요소마다 글자색을 정하는 다른 선언(기본 스타일)이 있는지 떠올려 보세요.

㉠ ㉡ ㉢ — 제목 · 문단 · 강조 글입니다.

• body에 준 글자색은 안쪽 요소가 물려받습니다. h1 · p는 body에서, strong은 p에서 받습니다.
• 링크와 단추는 브라우저 기본 스타일이 글자색을 따로 정해 둡니다. 제 값이 있는 요소는 물려받지 않아, 링크는 기본 파랑, 단추는 기본 글자색 그대로입니다(크롬 기준).
• 흔한 오답은 다섯 모두입니다. body에 준 글자 값은 안쪽 모든 요소에 닿는다고 본 것입니다. 링크와 단추의 색은 a · button을 고르는 규칙을 따로 써서 정합니다.
• ㉠ ㉡만 고른 것은 강조 글 strong도 제 색을 따로 가진다고 본 것입니다. strong은 굵기만 기본 스타일이 정하고, 색은 물려받습니다.

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

세 방법마다 나무에 남는 요소가 무엇인지, 화면의 크기가 얼마가 되는지 따로 따져 보세요.

② — 크기는 CSS로 바꿉니다.

<h2>디저트</h2>
<h3>오늘의 쿠키</h3>
<p>쿠키 2000원</p>

h3 {
  font-size: 16px;
}

• 제목의 숫자는 글자 크기가 아니라 단계입니다(브라우저 규칙 3). CSS로 크기를 바꿔도 나무에는 h3가 남아, 제목 차례에서 '오늘의 쿠키'는 그대로 '디저트' 아래 3단계입니다.
• ① 작은 글자를 내려고 숫자를 고른 것입니다(태그가 모양이라는 생각). h5는 본문보다 작은 기본 크기이고, 제목 차례에 3 · 4단계가 비어 검사기가 Error를 냅니다.

<h2>디저트</h2>
<h5>오늘의 쿠키</h5>
<p>쿠키 2000원</p>

• ③ 크기는 본문과 같아지지만, '오늘의 쿠키'가 제목에서 빠져 제목 차례에 들지 않습니다. 화면 읽기 프로그램이 제목만 골라 읽을 때 이 글을 건너뜁니다.

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

짝마다 뒤 코드의 규칙이 바꾼 속성 하나를 찾고, 그 속성의 기본 스타일 값이 무엇이었는지 떠올려 보세요.

(가) 같다 · (나) 다르다 — 뒤 코드는 '꼭'이 굵지 않다 · (다) 다르다 — 뒤 코드는 줄 앞의 번호가 없다. (다)의 뒤 코드에서 목록 글은 여전히 안으로 들어가 있습니다.

잰 값 끝 줄은 (다) 뒤 코드의 ol을 잰 것입니다.

• 우리 규칙은 같은 요소의 같은 속성에서 기본 스타일을 이깁니다(브라우저 규칙 5). 이기는 것은 적은 속성 하나뿐이고 나머지 기본 스타일은 남습니다.
• (가) h1의 기본 크기가 이미 32px이라, 같은 값을 덧칠해도 화면은 그대로입니다.
• (나) strong의 굵기는 기본 스타일이 준 모양이라, 우리 규칙으로 보통 굵기가 됩니다. 나무에는 여전히 strong이 있어 뜻은 그대로입니다.
• (다) 번호만 사라지고, 기본 스타일의 왼쪽 안쪽 여백 40px은 남아 글이 안으로 들어가 있습니다. 들여 쓴 틈은 번호가 아니라 이 여백이 만든 것입니다.
• (가) 다르다는 우리 규칙을 쓰면 무엇이든 바뀐다고 본 것입니다. 기본 스타일과 같은 값이면 화면은 그대로입니다.
• (다)의 둘째 물음에 '왼쪽 끝에 붙는다'고 쓴 것은 들여 쓴 틈을 번호가 만든다고 본 것입니다.

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

1번과 2번에서 바꾼 것을 따로 적고, 새로고침 뒤 브라우저가 무엇을 읽는지 보세요.

새로고침하면 브라우저는 무엇을 다시 읽나요? 1번에서 바꾼 것 가운데 2번에서 파일에 옮겨 적은 것만 남습니다.

③ — 파랑 · 40px입니다. 새로고침 뒤 브라우저가 읽는 style.css는 이렇습니다.

<h1>김치볶음밥</h1>

h1 {
  color: #005bb5;
  font-size: 40px;
}

• Styles 창에서 바꾼 값은 브라우저 안의 사본이지 style.css 파일이 아닙니다. 새로고침하면 브라우저가 저장된 파일을 다시 읽어 그립니다(브라우저 규칙 1).
• 파일에는 2번에서 옮겨 적은 font-size: 40px;이 있고, 색은 옮겨 적지 않아 파일에 적힌 #005bb5 그대로입니다.
• ① Styles 창에서 바꾼 것도 파일에 남는다고 본 것입니다(사본을 파일로 보는 생각). 남기고 싶은 값은 파일에 옮겨 적고 저장합니다.
• ② 새로고침하면 Styles 창의 사본처럼 파일에 적은 것도 처음으로 돌아간다고 본 것입니다. 저장한 파일의 내용은 그대로 남습니다.

다시 볼 레슨: 브라우저 기본 스타일과 Styles 창 · 개발자 도구로 요소 나무 보기

(나)는 글자색 속성 이름 앞에 무엇이 붙습니다. (라)는 list-로 시작합니다.

받는 답: (가) link · (나) background-color · (다) text-align: center · (라) list-style-type

같은 답으로 치는 꼴: (가) <link> · (다) 끝에 ;을 붙인 text-align: center;.

틀리는 꼴 — 까닭:

• (가) style — 그 페이지 안에 규칙을 바로 쓰는 요소입니다. 파일을 잇는 것은 link이고, a는 다른 페이지로 가는 링크입니다.
• (나) color — 글자색입니다.
• (다) text-align: middle — middle은 이 속성이 알아듣지 못하는 값이라 선언째 버려집니다.
• (라) list-style — 속성 여럿을 한 줄로 정하는 짧게 적기입니다(뒤 단원). 점 모양 하나만 정하는 속성은 list-style-type입니다.

다시 볼 레슨: CSS 연결하기 · 색 쓰기 · 글자 꾸미기 · 브라우저 기본 스타일과 Styles 창

목록 페이지는 꾸며지고 이 페이지에는 우리 규칙이 하나도 없습니다. 찾는 차례 몇 번부터 볼지 정하세요.

목록 페이지가 꾸며지니 style.css의 규칙은 멀쩡합니다. 이 페이지에 그 파일이 닿았는지부터 보세요 — 폴더의 파일 이름과 한 글자씩 견줍니다.

받는 답: 4번 줄을 href="style.css"로 고칩니다.

<!-- kimchi.html -->
<link
  rel="stylesheet"
  href="style.css"
/>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

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

h1 {
  color: #005bb5;
}

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

• 1번 — 파일이 닿았나. 목록 페이지가 꾸며지니 style.css는 저장돼 있고 규칙도 멀쩡합니다. 그런데 이 페이지에는 우리 규칙이 하나도 닿지 않았습니다. 규칙 하나가 아니라 전부가 안 먹으면 파일이 닿지 않은 것이라, link 주소를 폴더의 파일 이름과 견줍니다 — 4번 줄의 sytle은 style과 글자 차례가 다릅니다.
• 브라우저는 recipe-note/sytle.css⁠를 찾다가 없어서 그만둡니다. 오류 창은 뜨지 않고 기본 스타일만으로 그립니다(브라우저 규칙 1). 그래서 2번(나무) · 3번(규칙이 닿았나)까지 갈 일이 없습니다.

다르게 고쳐도 되는 곳: 없습니다. 주소는 파일 이름과 글자 하나까지 같아야 합니다.

• 흔한 오답은 h1 규칙에 !important를 붙이는 것입니다. 파일이 닿지 않아 규칙이 겨루기에 들지도 못하니, 제목은 여전히 기본 모양입니다.
• style.css의 이름을 sytle.css로 바꾸는 것도 흔합니다. 김치볶음밥 페이지는 꾸며지지만, 이번에는 href="style.css"라고 적은 목록 페이지에 CSS가 하나도 닿지 않습니다 — 증상만 옮긴 것입니다.

다시 볼 레슨: 브라우저 기본 스타일과 Styles 창 · CSS 연결하기

'9시'만 감싼 요소가 무엇인지 찾으세요. 그 요소를 고르는 선택자가 1, 색 선언이 2입니다.

모범 답입니다.

<h2>셋째 날</h2>
<p>
  <strong>9시</strong>에
  협재 가는 버스를 탑니다.
</p>

/* 1. 고를 요소 */
strong {
  /* 2. 바꿀 속성과 값 */
  color: #d70015;
}

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

다르게 써도 되는 곳:

• 색을 rgb(215 0 21)로 써도 같은 색입니다.
• 주석 둘은 지워도 화면이 같습니다.

흔한 잘못:

• 1에서 p를 고르면 문장 전체가 빨개집니다. 안의 strong도 문단의 색을 물려받습니다.

<p>
  <strong>9시</strong>에
  협재 가는 버스를 탑니다.
</p>

p {
  color: #d70015;
}

• 2에서 color 대신 background-color를 쓰면 글자는 그대로이고 '9시' 뒤 바탕만 빨개집니다.

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

3단원 연습 문제 13번의 모범 답입니다. recipe-note 폴더에 두 파일과 images 폴더(안에 그림 넣기 img에서 받은 kimchi.svg)가 있는 상태에서 시작합니다.

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

표의 줄마다 규칙 하나입니다. 글꼴 · 글자 크기 · 줄 높이는 body에 주면 안쪽 요소가 물려받습니다. 링크의 색은 물려받지 않으니 a를 따로 고릅니다.

모범 답입니다. style.css를 두 HTML과 같은 폴더에 둡니다.

/* style.css */
body {
  background-color: #f5f5f7;
  color: #1d1d1f;
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

a {
  color: #005bb5;
}

두 HTML의 title 바로 아래에 같은 link 네 줄을 넣습니다.

<head>
  …
  <title>김치볶음밥</title>
  <link
    rel="stylesheet"
    href="style.css"
  />
</head>

김치볶음밥 페이지의 맨 위를 이 style.css로 그리면 이렇습니다.

<p>
  <a href="index.html">
    레시피 목록으로
  </a>
</p>
<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

/* style.css */
body {
  background-color: #f5f5f7;
  color: #1d1d1f;
  font-family:
    system-ui,
    sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 32px;
}

h2 {
  font-size: 22px;
}

a {
  color: #005bb5;
}

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

다르게 써도 되는 곳:

• 규칙의 차례와 한 규칙 안 선언의 차례는 바꿔도 됩니다. 이 단원의 규칙들은 서로 다른 요소를 골라 겨루지 않습니다.
• link의 rel과 href 줄은 서로 바꿔도 됩니다.
• 색을 rgb(245 245 247)처럼 써도 같은 색입니다.

흔한 잘못:

• 목록 페이지에 link를 빠뜨리면 김치볶음밥 페이지만 연회색이고 목록 페이지는 흰 바탕 그대로입니다. link는 그 줄을 쓴 페이지에만 CSS를 잇습니다.
• style.css 첫 줄에 <!-- style.css -->를 쓰면 첫 규칙 body가 통째로 버려져 바탕 · 글꼴 · 줄 높이가 모두 빠집니다. 파일 이름 주석은 /* style.css */로 씁니다.
• body의 color로 링크까지 칠하려 하면 링크는 기본 파랑 그대로입니다(문제 7).

폰 물음의 답은 ㉢ ㉠ ㉣ ㉡입니다. ㉠과 ㉣은 서로 바꿔도 됩니다 — 속성의 차례는 뜻이 없습니다.

다시 볼 레슨: 레시피 한 페이지 만들기 · CSS 연결하기 · 글자 꾸미기 · 색 쓰기