단원 연습 문제

짝마다 두 코드에서 바뀐 곳을 찾고, 그 줄이 상자의 어느 겹(내용 · 안쪽 여백 · 테두리 · 바깥 여백)을 정하는지 적어 보세요.

(가)는 테두리가 그려지려면 무엇이 꼭 있어야 하는지, (나)는 위아래로 맞닿은 바깥 여백이 어떻게 되는지, (다)는 짧게 적기가 적지 않은 칸을 어떻게 하는지 떠올리세요.

(가) 같다 · (나) 같다 · (다) 다르다 — 뒤 코드는 글 아래 칠한 면이 더 넓다

• (가) 테두리는 종류가 있어야 그려집니다. 종류(solid 같은)를 빠뜨리면 종류가 처음 값 none이 되어 굵기도 0 — 테두리가 없는 뒤 코드와 같습니다.
• (나) 제목 아래 20px과 문단 위 20px은 위아래로 맞닿아 겹쳐, 큰 값 하나 20px만 남습니다 — 바깥 여백 겹침입니다. 문단 위 여백을 0으로 해도 틈은 제목의 20px 그대로입니다.
• (다) 짧게 적기 padding: 8px은 네 방향을 모두 정합니다. 앞 코드는 그 줄이 뒤에 와서 아래 20px을 8px로 되돌리고, 뒤 코드는 뒤에 쓴 padding-bottom이 아래만 20px로 바꿉니다(브라우저 규칙 4).
• (가) 다르다는 굵기와 색만 있으면 그려진다고 본 것입니다.
• (나) 다르다는 바깥 여백이 늘 더해진다고 본 것입니다(바깥 여백은 늘 더해진다는 생각) — 앞 코드를 40px 틈으로 본 것입니다.
• (다) 같다는 짧게 적기가 앞에서 정한 칸은 건드리지 않는다고 본 것입니다(짧게 적기는 적은 칸만 바꾼다는 생각).

다시 볼 레슨: 상자 네 겹 · 여백 짧게 적기

다섯 요소마다 그 요소에 직접 닿는 선언을 적어 보세요.

기본 스타일의 선언도 셉니다. 그다음 속성마다 물려받는 속성인지 보세요. 글자색은 물려받고 바탕색은 물려받지 않습니다. 바탕을 칠하지 않은 요소는 투명해서 뒤의 바탕이 비쳐 보입니다.

(가) ㉠ · (나) ㉠ ㉡ ㉢ ㉣

• (가) 바탕색은 물려받지 않는 속성이라, 안쪽 요소의 background-color는 처음 값인 투명입니다. 투명한 상자 뒤로 카드의 노랑이 비쳐 노랗게 보일 뿐입니다 — 보이는 색과 계산된 값이 다릅니다. 단추는 기본 스타일이 바탕을 직접 정해 회색 단추입니다.
• (나) 글자색은 물려받는 속성이라 닿는 선언이 없는 ㉡ ㉢ ㉣이 부모를 따라 회색입니다(브라우저 규칙 5). 단추는 기본 스타일이 글자색을 직접 정해 둬 물려받지 않습니다(크롬 기준).
• (가)에 ㉡ ㉢ ㉣까지 골랐다면 바탕색도 물려받는다고 본 것입니다(다 물려받는다는 생각).
• (나)에 ㉤까지 골랐다면 단추도 부모 글자색을 물려받는다고 본 것입니다. 단추 · 링크는 기본 스타일이 직접 닿습니다.

다시 볼 레슨: 물려받기 · 상자 네 겹

a가 처음에 어떤 display로 놓이는지 적어 보세요.

그 display에서 width가 먹는지 보세요.

③ — 글자만큼만 칠한 띠입니다.

• a는 처음 display가 inline입니다. 인라인 상자는 너비 · 높이 · 위아래 바깥 여백을 쓰지 않고, 안의 글자만큼 차지합니다. width 선언은 알아들었지만 효과가 없습니다 — Styles 창에서 흐린 글로 보입니다(크롬 기준).
• ①은 인라인에도 너비가 먹는다고 본 것입니다. 너비를 먹이려면 display: inline-block⁠을 줍니다.
• ②는 width를 주면 블록처럼 줄을 차지한다고 본 것입니다. 줄을 통째로 차지하는 것은 display: block입니다.

다시 볼 레슨: 블록과 인라인 display

상자 셈의 네 걸음을 차례로 적으세요. padding의 값 둘이 어느 방향인지부터 정합니다.

(가) 180 · (나) 226

• width는 따로 정하지 않으면 내용 칸만 잽니다. Computed 창의 width도 내용 칸 180px이고, 차지하는 너비는 그 바깥에 안쪽 여백과 테두리를 더한 값입니다(브라우저 규칙 6).
• padding: 12px 20px은 위아래 12 · 좌우 20입니다. 너비에는 좌우 20만 듭니다.
• (나)에서 흔한 오답은 180입니다(width가 차지하는 너비라는 생각).
• 210은 좌우에 12를 더한 것 — 값 둘의 차례를 거꾸로 본 것입니다. 246은 바깥 여백까지 더한 것입니다.

다시 볼 레슨: 너비와 box-sizing · 여백 짧게 적기

.page의 부모 body의 내용 칸 너비와 .page가 차지하는 너비를 먼저 셈하세요.

max-width도 따로 정하지 않으면 내용 칸을 잽니다. auto 둘은 남는 자리를 똑같이 나눕니다.

①입니다.

• body는 기본 스타일로 바깥 여백 8px이 있어 내용 칸이 900 − 16 = 884px입니다.
• .page는 내용 칸 600에 좌우 안쪽 여백 20씩을 더해 640px을 차지합니다(브라우저 규칙 6).
• 남는 자리 884 − 640 = 244를 auto 둘이 나눠 왼쪽이 122px입니다.
• ③ 142는 max-width 600이 안쪽 여백까지 든 너비라고 본 것입니다(width가 차지하는 너비라는 생각).
• ② 130은 창 폭 900에서 바로 나눈 것입니다. body의 바깥 여백 8px이 양쪽에서 먼저 빠집니다.

다시 볼 레슨: 가운데 모으기 · 너비와 box-sizing

두 선언을 하나씩 보고, 알아듣지 못하는 값이 든 선언이 있는지 표시하세요.

브라우저는 알아듣지 못한 선언 하나만 버리고 나머지는 그대로 씁니다. 버린 선언은 없던 것과 같습니다.

(가) 520 · (나) 0

• 24에 단위가 없어 margin: 0 auto 24; 한 줄을 통째로 버립니다(브라우저 규칙 4). main의 바깥 여백은 처음 그대로 0이라 가운데로 모이지 않고 왼쪽에 붙습니다.
• max-width: 520px은 그대로 먹어 너비는 520px입니다.
• (나) 372는 단위 빠진 24만 버리고 0 auto는 먹는다고 본 것입니다. 버리는 단위는 값 하나가 아니라 선언 하나입니다.
• (가) 1264는 규칙 전체가 버려진다고 본 것입니다(CSS도 멈춘다는 생각).
• 고치려면 24px로 단위를 붙입니다.

다시 볼 레슨: 규칙의 모양 · 가운데 모으기

값이 셋일 때 첫째 · 둘째 · 셋째가 어느 방향인지, 빠진 방향은 어느 값을 따르는지 적어 보세요.

받는 답: 0 12px 24px

<div class="day">
  첫날 — 경포대
</div>

.day {
  margin: 0 12px 24px;
}

• 값 셋은 위 · 좌우 · 아래입니다. 넷째(왼쪽)가 빠지면 맞은편 오른쪽 값을 따릅니다.
• 다르게 써도 되는 곳: 값 넷 0 12px 24px 12px도 같은 여백입니다. 0 대신 0px도 같습니다.
• 흔한 오답은 0 24px 12px입니다. 셋째 값을 왼쪽이나 오른쪽으로 본 것입니다 — 그러면 아래가 12px, 좌우가 24px이 됩니다.

다시 볼 레슨: 여백 짧게 적기

두 규칙의 선택자마다 명시도를 세 칸으로 세어 보세요.

차례는 명시도까지 같을 때만 봅니다.

4입니다.

• 클래스 둘(0-2-0)이 태그 하나(0-0-1)보다 명시도가 높아, 뒤에 쓴 h2 규칙에 지지 않습니다(브라우저 규칙 5).
• 흔한 오답은 16입니다. 나중에 쓴 규칙이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각).

다시 볼 레슨: 명시도 · 나중에 쓴 규칙

(가)는 리셋 규칙 * 안에 늘 쓰는 한 줄입니다. (라)는 넘친 글을 잘라 감추는 값과 다릅니다.

받는 답: (가) box-sizing: border-box · (나) border-radius · (다) inline-block · (라) auto

• 같은 답으로 치는 꼴: (라) scroll도 상자 안에서 굴려 봅니다. scroll은 넘치지 않아도 스크롤 막대 자리를 늘 그려, 넘칠 때만 막대가 생기는 auto를 받는 답으로 둡니다.
• 틀리는 꼴 — (가) box-sizing: content-box⁠는 처음 값이라 내용 칸만 잽니다. (나) border-style은 테두리 종류입니다. (다) inline은 너비 · 높이를 쓰지 않고, block은 줄을 통째로 차지합니다. (라) hidden은 넘친 글을 잘라 감춰 끝까지 읽을 수 없습니다.

다시 볼 레슨: 너비와 box-sizing · 블록과 인라인 display · 둥근 모서리·그림자·넘치는 내용

두 주소의 출발점을 폴더 나무에 하나씩 표시하고, 거기서 그림까지 가는 길을 적어 보세요.

주소마다 그 주소를 적은 파일이 어느 폴더에 있는지 먼저 짚으세요. HTML의 주소는 HTML 파일의 폴더에서, CSS 안 url()은 CSS 파일의 폴더에서 출발합니다.

받는 답: (가) images/japchae.svg · (나) ../images/japchae.svg

<!-- index.html -->
<img
  src="images/japchae.svg"
  …
/>

/* css/style.css */
.hero {
  background-image: url(
    "../images/japchae.svg"
  );
}

• (가) img의 src는 index.html이 있는 recipe-note/에서 출발해 images/ 안으로 갑니다.
• (나) 같은 그림이어도 url()은 style.css가 있는 css/에서 출발합니다. ../로 한 단계 올라가 recipe-note/에서 images/로 들어갑니다(브라우저 규칙 1).
• (나)에서 흔한 오답은 (가)와 같은 images/japchae.svg입니다. url()도 HTML 파일에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각). 그러면 브라우저는 css/images/japchae.svg⁠를 찾아 배경이 비고, 오류도 뜨지 않습니다.
• 이 문제의 결과는 정답 칸에 그리지 않습니다. 결과 화면은 CSS를 파일로 따로 잇지 않고 한 페이지 안에 넣어 그려서, url()의 출발점이 실제 폴더와 달라지기 때문입니다. 컴퓨터에서 폴더를 만들어 확인해 보세요.

다시 볼 레슨: 배경 그림과 그러데이션 · 경로 읽기

.brand 규칙의 선언을 위에서부터 읽으며 줄마다 무엇을 정하는지 적어 보세요.

바탕색을 정하는 줄을 모두 찾아 보세요. 짧게 적기 줄도 셉니다. 짧게 적기 background는 적지 않은 칸(색 · 크기 · 자리 …)을 처음 값으로 되돌립니다. 그림만 바꾸는 풀어 적은 속성이 따로 있습니다.

받는 답: 5번 줄의 background:를 background-image:로 고칩니다. 고친 style 요소 안 규칙을 떼어 그리면 이렇습니다.

<p class="brand">
  플로우 카페
</p>

.brand {
  height: 48px;
  background-color: #d6ecff;
  background-image:
    url("images/logo.png");
}

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

• 1번 — 로고 그림이 보이니 규칙도 그림 파일도 닿았습니다.
• 2번 — Elements 패널에 p.brand가 있습니다.
• 3번 — Styles 창에 .brand 규칙이 보입니다. 닿았습니다.
• 4번 — 경고 표시가 없으니 다 알아들었습니다. 이겼나를 봅니다. 같은 규칙 아래 줄의 짧게 적기 background를 펼치면 background-color가 들어 있습니다 — 적지 않은 색 칸을 처음 값인 투명으로 되돌려, 앞 줄의 연하늘을 이겼습니다(나중이 이김 — 브라우저 규칙 4 · 5).

다르게 고쳐도 되는 곳:

• 4번 줄 background-color 줄을 background 두 줄 아래로 옮겨도 연하늘이 이깁니다 — 줄 둘을 고쳐야 해서 받는 답으로 두지 않았습니다.

• 4번 줄을 지우고 5번 줄의 짧게 적기에 색을 함께 적어도(background: #d6ecff 뒤에 url()) 같습니다.

• 흔한 오답은 background-color 줄에 !important를 붙이는 것입니다. 바탕이 돌아와 위 상자도 이룸으로 보지만, 짧게 적기가 색을 되돌리는 줄은 그대로 남고 다음 구역 규칙이 이 색을 바꾸지 못합니다 — 증상만 덮은 것입니다.

• 4번 줄의 색 값만 다른 꼴(rgb(214 236 255))로 바꾸는 것도 흔합니다. 그 줄이 지는 것은 값 때문이 아니라 아래 줄 때문이라 그대로 투명입니다.

다시 볼 레슨: 배경 그림과 그러데이션 · 여백 짧게 적기

걸음마다 셈에 넣을 값을 CSS에서 찾아 적어 보세요. 둘째 결과는 네 걸음을 바깥에서 안으로 거꾸로 밟습니다.

걸음마다 '왼쪽 · 오른쪽 두 쪽'을 셈에 넣습니다. box-sizing: border-box⁠면 width가 곧 차지하는 너비입니다. 거기서 테두리와 안쪽 여백을 빼면 내용 칸이 남습니다.

모범 답 — 첫째 결과입니다.

<article class="recipe-card">
  <h2>된장찌개</h2>
</article>

.recipe-card {
  width: 230px;
  padding: 14px;
  border: 2px solid #d2d2d7;
  margin: 10px;
}

둘째 결과 — border-box면 차지하는 너비가 230이고, 거꾸로 빼면 230 − 2 × 2 − 14 × 2 = 198입니다.

<article class="recipe-card">
  <h2>된장찌개</h2>
</article>

.recipe-card {
  box-sizing: border-box;
  width: 230px;
  padding: 14px;
  border: 2px solid #d2d2d7;
  margin: 10px;
}

위 두 결과가 맞고 표의 칸을 모두 채웠으면 맞습니다. 넷째 걸음까지 적어 둡니다 — 카드 둘 사이의 간격을 셈할 때 그 칸이 답을 냅니다.

흔한 잘못:

• 둘째 · 셋째 걸음에서 한 쪽만 더해 244 · 246을 쓴 것은 왼쪽 · 오른쪽 두 쪽을 놓친 것입니다.
• 넷째 걸음에서 바깥 여백까지 더해 282를 쓴 것은 바깥 여백을 상자의 너비로 본 것입니다. 바깥 여백은 상자 밖의 빈 자리입니다.

다시 볼 레슨: 너비와 box-sizing

recipe-note 폴더에 세 파일을 받아 둡니다.

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

recipe-note 안에 images 폴더를 만들고 그림 여섯을 받아 둡니다. 앞 단계에서 받았으면 그대로 씁니다.

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

걸음마다 그 걸음의 확인 목록을 봅니다. 걸음 2의 카드 너비는 상자 셈으로 먼저 어림하고 Computed 창에서 맞춰 봅니다.

모범 답입니다. 바뀐 곳 가운데 몇 곳만 싣습니다 — 다 고친 style.css는 아래 받기 파일과 같습니다(index.html · kimchi.html은 9단원 끝 상태 그대로).

/* 리셋 */
* {
  box-sizing: border-box;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* 레시피 목록 */
.recipe-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.recipe-card {
  max-width: 320px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow:
    0 2px 8px #d2d2d7;
}

• style.css 받기

목록 카드 둘을 떼어 넓은 창(1280px)에서 그린 모습입니다. 받기 파일과 같은 선언만 골랐습니다.

<main>
  <ul class="recipe-list">
    <li class="recipe-card">
      잡채
    </li>
    <li class="recipe-card">
      미역국
    </li>
  </ul>
</main>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px;
}

.recipe-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.recipe-card {
  max-width: 320px;
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  box-shadow:
    0 2px 8px #d2d2d7;
}

첫 결과 화면은 앞 CSS만, 둘째 결과 화면은 이어 쓴 CSS까지 그린 것입니다. margin-left 160px은 폭 1280 틀의 값입니다. 내 창에서 잰 값은 창 폭과 스크롤 막대에 따라 달라도, margin-right와 같으면 맞습니다.

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

다르게 써도 되는 곳:

• 한 규칙 안 선언의 차례는 바꿔도 됩니다.
• 카드의 margin: 0 0 16px은 margin: 0; 다음 줄 margin-bottom: 16px;처럼 풀어 적어도 같습니다. 차례를 거꾸로 쓰면 짧게 적기가 16px을 되돌립니다.
• 바탕은 background-color로 적어도 같습니다.

흔한 잘못:

• 리셋을 빼면 글자 칸이 폼 밖으로 삐져나옵니다 — 너비 100%에 안쪽 여백과 테두리가 더해집니다(width가 차지하는 너비라는 생각).
• 카드에 max-width 대신 width: 320px을 주면, 360px보다 좁은 창에서 카드가 오른쪽으로 넘칩니다.
• 그림자 색을 더 진한 회색으로 고르면, 16단원 다크 모드의 어두운 바탕에서 카드 둘레가 빛나는 테두리처럼 보입니다. 11단원에서 반투명한 검정으로 바꿉니다.

폰 물음의 답은 ②입니다. 리셋이 없으면 너비 100%는 내용 칸만 재어, 안쪽 여백과 테두리만큼 폼보다 넓어집니다. ①은 width가 차지하는 너비라고 본 것이고(width가 차지하는 너비라는 생각), ③은 상자가 가운데에서 양쪽으로 커진다고 본 것입니다. 상자는 왼쪽 끝 자리를 그대로 두고 오른쪽으로 커집니다.

다시 볼 레슨: 상자 네 겹 · 너비와 box-sizing · 가운데 모으기 · 여백 짧게 적기 · 둥근 모서리·그림자·넘치는 내용