단원 1~16 섞어 풀기

칸마다 친 줄바꿈이 브라우저가 그릴 때 어떻게 되는지 하나씩 적어 보세요.

p 안의 줄바꿈은 빈칸 하나로 합쳐집니다. 친 그대로 두는 요소가 따로 있습니다.

㉡ · ㉢ · ㉣입니다.

보이는 글의 ' / '는 줄이 바뀐 자리입니다.

• ㉠ p 안에서 친 줄바꿈은 그릴 때 빈칸 하나가 되어 한 줄 '라테 녹차'입니다(브라우저 규칙 2).
• ㉡ pre와 ㉢ textarea는 안의 줄바꿈과 빈칸을 친 그대로 둡니다.
• ㉣ br는 줄을 바꾸라는 요소라 두 줄입니다.
• ㉠도 골랐다면 친 대로 화면에 나온다고 본 것입니다(친 대로 나온다는 생각).
• ㉣만 골랐다면 pre · textarea도 p처럼 합친다고 본 것입니다. 메뉴판 같은 글은 p 안에서 br나 목록으로 나눕니다.

다시 볼 레슨: 공백 규칙과 특수 문자 · 여러 줄 글과 고르는 칸

두 표 모두 width: 160px에서 출발합니다. 표마다 걸음 칸에 넣을 값을 CSS에서 찾아 적어 보세요.

표마다 그 160이 상자 네 겹 가운데 어디까지를 재는지 먼저 정하세요. border-box면 width가 테두리까지를 잽니다. 그때는 셈을 거꾸로 — 160에서 테두리와 안쪽 여백을 빼서 내용 칸을 구합니다.

(가) 192 · (나) 160 · (다) 128

• 첫째 표는 box-sizing 처음 값이라 width가 내용 칸만 잽니다. 그 바깥에 안쪽 여백과 테두리를 더해 192입니다(브라우저 규칙 6).
• 둘째 표는 width가 테두리까지라 차지하는 너비가 160 그대로이고, 내용 칸이 그만큼 줄어 128입니다.
• (가)를 160이라고 썼다면 width가 차지하는 너비라고 본 것입니다(width가 차지하는 너비라는 생각).
• (나)를 192라고 썼다면 border-box를 놓친 것입니다. 208 · 176은 바깥 여백까지 더한 값입니다.

다시 볼 레슨: 너비와 box-sizing · 상자 네 겹

속성마다 이 p에 닿는 선언을 모두 모읍니다. padding: 8px 한 줄은 네 방향 줄로 나눠 적고, 필요한 방향만 표에 옮깁니다.

짧게 적기는 적지 않은 칸까지 값을 냅니다. 닿는 선언이 하나라도 있는 속성은 부모에게 물려받지 않습니다.

받는 답: padding-top 20px · padding-left 8px · color #1d1d1f

차례 칸은 규칙 차례입니다 — body 1 · div .tip 2 · .tip 3 · p 4. 한 규칙의 선언은 같은 번호라, padding-left의 두 줄처럼 번호까지 같으면 그 규칙 안에서 나중에 쓴 줄이 이깁니다. 줄은 명시도의 점수판처럼 이긴 선언부터 적었습니다 — 코드 차례로 적어도 칸의 값이 같으면 맞습니다.

첫 결과 화면은 첫째 블록만, 둘째는 둘째 블록까지 이어 그린 것입니다.

rgb(29, 29, 31)로 써도 같은 답입니다.

• padding-top — 출처가 같아 명시도로 갑니다. div .tip(0-1-1)이 뒤에 쓴 .tip(0-1-0)을 이겨, 짧게 적기가 낸 위 8px은 집니다.
• padding-left — 같은 규칙 안 두 줄이라 명시도까지 같고, 나중에 쓴 짧게 적기가 왼쪽 칸에도 8px을 내 16px을 이깁니다(브라우저 규칙 4 · 5).
• color — p 규칙이 직접 닿아 body의 회색을 물려받지 않습니다. 명시도가 낮아도 물려받은 값보다 닿은 선언이 먼저입니다(브라우저 규칙 5).
• padding-top을 8px로 썼다면 뒤에 쓴 규칙이 늘 이긴다고 본 것입니다(뒤가 늘 이긴다는 생각).
• padding-left를 16px로 썼다면 짧게 적기가 앞에서 정한 칸은 건드리지 않는다고 본 것입니다(짧게 적기는 적은 칸만 바꾼다는 생각).
• color를 #6e6e73으로 썼다면 부모 값이 늘 내려온다고 본 것입니다.

반만 쓴 표는 안 쓴 것과 같습니다 — 세 줄이 저마다 다른 칸에서 갈렸습니다.

다시 볼 레슨: 명시도 · 나중에 쓴 규칙 · 여백 짧게 적기 · 물려받기

나무를 그려 .menu 안의 div 넷이 저마다 무엇 안에 드는지 적어 보세요.

.menu의 직계 자식이 몇 개인지 세어 보세요. display: flex는 부모가 정하고 직계 자식에게만 닿습니다. 손자는 제 부모의 놓는 방식을 따릅니다.

③ — 왼쪽에 라테 · 녹차가 위아래, 오른쪽에 쿠키입니다.

• .menu의 직계 자식은 둘 — 라테 · 녹차를 담은 div와 쿠키 div입니다. 이 둘이 flex 항목이 되어 한 줄에 나란히 놓입니다(브라우저 규칙 7).
• 라테와 녹차는 항목 안의 블록이라 일반 흐름대로 위아래로 쌓입니다.
• ①은 flex가 후손까지 닿는다고 본 것입니다(flex가 후손까지라는 생각). 셋을 한 줄에 두려면 안쪽 div에도 display: flex를 주거나 묶음을 풀어야 합니다.
• ②는 flex가 아무 일도 하지 않는다고 — 나란히 놓일 요소 자신에게 줘야 한다고 — 본 것입니다.

다시 볼 레슨: flex는 부모에

띠의 주축이 가로인지 세로인지 먼저 정하고, 주축 정렬과 교차축 정렬의 이름을 떠올리세요.

받는 답: 첫째 justify-content · 둘째 align-items

<div class="band">
  <span class="badge">
    모집
  </span>
</div>

.band {
  display: flex;
  height: 80px;
  justify-content: center;
  align-items: flex-end;
}

.badge {
  width: 80px;
  height: 24px;
}

• flex-direction 처음 값이 row라 주축은 가로입니다. 주축 정렬 justify-content가 가로 가운데를, 교차축 정렬 align-items가 세로 아래 끝을 맡습니다(브라우저 규칙 7).
• 둘을 바꿔 쓰면 배지가 왼쪽 자리 232 · 위 자리 36 — 오른쪽 끝, 세로 가운데에 놓입니다.
• span도 flex 항목이 되면 width · height를 씁니다. 그래서 배지 크기가 글자와 상관없이 80 × 24입니다.

다시 볼 레슨: 주축 정렬 · 교차축 정렬 · 자주 쓰는 세 모양

짝마다 앞 코드의 여는 태그와 닫는 태그를 하나씩 짝지어 표시해 보세요.

닫는 태그가 없거나 엇갈린 곳에서 브라우저가 어디서 요소를 닫을지 표시해 보세요. 브라우저는 틀린 HTML에서 멈추지 않고, 정해진 규칙대로 고쳐 지어 끝까지 그립니다.

(가) 같다 · (나) 다르다 — 앞 코드는 '기차'도 점이 붙은 목록 줄이다 · (다) 같다

• (가) 새 p가 열리면 열려 있던 p는 저절로 닫힙니다. 두 문단으로 고쳐 지어 뒤 코드와 같습니다(브라우저 규칙 2).
• (나) 새 li가 열리면 앞 li가 닫혀, 앞 코드는 두 줄 목록입니다. 뒤 코드의 '기차'는 목록 밖 문단이라 점이 없고 들여 있지 않습니다.
• (다) 엇갈린 태그를 브라우저가 고쳐 지어, 둘째 문단의 '챙기기'도 strong 안에 다시 넣습니다. 두 낱말 모두 굵게, 두 문단으로 그려져 뒤 코드와 같습니다.
• (가) · (다)를 다르다고 했다면 틀린 곳에서 그리기가 멈추거나 그 뒤가 다 깨진다고 본 것입니다(틀리면 멈춘다는 생각). 화면이 같아도 검사기는 (다)에 오류를 냅니다 — 고쳐 짓기에 기대지 말고 바르게 닫습니다.

다시 볼 레슨: 요소 안의 요소 · 문단과 강조

먼저 두 폭에서 목록 상자의 너비를 구하세요 — body의 바깥 여백 8px과 max-width를 봅니다.

열 사이 간격은 열 수보다 하나 적습니다. 간격까지 더한 폭이 목록 너비를 넘지 않는 가장 큰 열 수가 답입니다.

폭 360에서 1 · 폭 1280에서 3

<ul class="photos">
  <li>바다</li>
  <li>시장</li>
  <li>절</li>
  <li>숲</li>
  <li>다리</li>
  <li>섬</li>
</ul>

.photos {
  display: grid;
  grid-template-columns:
    repeat(
      auto-fill,
      minmax(170px, 1fr)
    );
  gap: 16px;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
}

• 남는 폭은 1fr이 열마다 나눠 가져, 폭 1280의 세 열은 (720 − 32) ÷ 3 ≈ 229px씩입니다.
• 2 · 4라고 썼다면 열 사이 간격을 빼고 센 것입니다(344 ÷ 170 · 720 ÷ 170). 간격도 폭을 차지합니다.
• 폭 1280을 6이라고 썼다면 창 폭으로 센 것입니다. 열 수는 목록이 놓인 상자의 폭(여기서는 max-width 720)으로 셉니다.

다시 볼 레슨: 들어가는 만큼 열 만들기 · 가운데 모으기

p에 직접 닿는 선언이 있는지 먼저 보세요.

닿는 선언이 없을 때 부모 값을 받는 속성과 처음 값으로 가는 속성이 따로 있습니다. 두 속성이 각각 어느 쪽인지 따져 보세요.

(가) #d70015 · (나) none

• 글자색은 물려받는 속성이라, 닿는 선언이 없는 p가 부모 .news의 빨강을 받습니다(브라우저 규칙 5).
• 테두리는 물려받지 않는 속성이라 p는 처음 값 none — 테두리가 없습니다. 빨간 테두리는 바깥 상자 하나에만 그려집니다.
• (나)를 solid라고 썼다면 부모의 속성을 다 물려받는다고 본 것입니다(다 물려받는다는 생각). 그랬다면 문단마다 테두리가 겹쳐 그려졌을 것입니다.
• rgb(215, 0, 21) · rgb(215 0 21)도 같은 답입니다.

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

먼저 꼬리표의 기준 상자를 정하고, 그 상자의 왼쪽 위 모서리와 너비를 상자 셈으로 구해 보세요. body의 바깥 여백은 8px입니다.

기준 상자는 나무를 따라 바깥으로 찾은 첫 position 조상입니다. top · right는 기준 상자의 안쪽 여백 바깥 가장자리에서 잽니다.

(가) 8 · (나) 288

• 꼬리표는 바로 위 부모 .spot이 아니라 position을 준 .summer를 기준으로 놓입니다(브라우저 규칙 8). top: 0 · right: 0은 그 상자의 안쪽 여백 바깥 가장자리(위 8 · 오른쪽 288)에 붙습니다.
• 28 · 268이라고 썼다면 부모 .spot을 기준으로 본 것입니다(부모 기준이라는 생각).
• (나)를 248이라고 썼다면 width 240이 칸이 차지하는 너비라고 본 것입니다(width가 차지하는 너비라는 생각). 안쪽 여백 20씩이 바깥에 더해집니다.

다시 볼 레슨: 기준 상자와 absolute · 너비와 box-sizing

네 주소마다 출발점을 폴더 나무에 표시하고, 거기서 그림까지 한 칸씩 따라가 보세요.

index.html과 trip.css가 저마다 어느 폴더에 있는지 먼저 짚으세요. HTML의 주소는 HTML 파일의 폴더에서, CSS 안 url()은 CSS 파일의 폴더에서 출발합니다. trip/ 위로 올라가면 이 폴더 밖입니다.

㉡ · ㉣입니다.

• img의 src는 index.html이 있는 trip/에서, url()은 trip.css가 있는 css/에서 출발합니다(브라우저 규칙 1). 같은 images/ 폴더의 그림이어도 적는 주소가 다릅니다.
• ㉡ · ㉢을 골랐다면 url()도 HTML 파일에서 출발한다고 본 것입니다(출발점이 늘 같다는 생각). 그렇게 보면 ㉢은 폴더 밖, ㉣은 trip/images/라 거꾸로 셉니다.
• 그림을 받지 못해도 오류는 뜨지 않습니다. img는 깨진 그림 표시와 alt 글이, 배경은 빈 바탕이 남습니다.
• 이 문제의 결과는 정답 칸에 그리지 않습니다. 결과 화면은 CSS를 파일로 따로 잇지 않고 한 페이지 안에 넣어 그려 url()의 출발점이 실제 폴더와 달라집니다. 컴퓨터에서 폴더를 만들어 확인해 보세요.

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

두 폭마다 조건 min-width: 640px이 맞는지 먼저 적어 보세요.

min-width: 640px은 '640px 이상'입니다. 조건이 맞지 않는 폭에서는 블록 안 규칙이 아예 닿지 않습니다.

폭 639에서 1 · 폭 640에서 2

<ul class="specials">
  <li>아이스티</li>
  <li>와플</li>
  <li>스콘</li>
</ul>

.specials {
  display: grid;
}

@media (min-width: 640px) {
  .specials {
    grid-template-columns:
      repeat(2, 1fr);
  }
}

• 640은 '640 이상'에 듭니다. 조건이 맞아 두 열 규칙이 닿고, 셋째 메뉴는 둘째 줄로 갑니다(브라우저 규칙 4).
• 639에서는 조건이 맞지 않아 블록이 닿지 않고, 열을 정하지 않은 격자는 한 열입니다.
• 1 · 1이라고 썼다면 640을 빼고 641부터라고 본 것입니다(경계를 빼는 생각).
• 2 · 2라고 썼다면 조건 블록 안 규칙이 늘 든다고 본 것입니다.

다시 볼 레슨: 모바일 먼저와 미디어 쿼리 · 열 만들기

--surface를 두는 규칙마다 그 규칙이 고르는 요소를 나무에 표시해 보세요.

카드마다 자기 요소와 조상 가운데 --surface를 둔 요소를 찾아보세요. 변수도 물려받는 값이라, 꺼내 쓰는 요소에서 가장 가까운 조상의 값을 씁니다. 조건 블록은 :root의 값만 바꿨습니다.

③입니다. 결과 화면은 밝은 화면으로 그려집니다 — 첫째는 앞 CSS만, 둘째는 조건 블록까지 그린 것이고, 아래 잰 값이 어두운 화면에서 잰 값입니다.

• 잡채 카드는 제게도 부모에게도 --surface가 없어 :root의 값을 꺼냅니다. 어두운 화면에서는 조건 블록의 #1d2633입니다(브라우저 규칙 5).
• 떡볶이 카드는 자기 요소에 둔 #fff3c4를 먼저 꺼내, :root가 바뀌어도 노란 채입니다. 어두운 화면에서도 노랑이 맞다면 그대로 두고, 아니라면 조건 블록에 .spicy의 어두운 값도 둡니다.
• ①은 :root의 값만 바꾸면 꺼내 쓰는 곳이 모두 바뀐다고 본 것입니다. 가운데에서 다시 둔 변수가 있으면 그 아래는 그 값을 씁니다.
• ②는 var()가 처음에 꺼낸 값을 한 번 베껴 둔다고 본 것입니다.

다시 볼 레슨: CSS 변수 · 변수만 바꾸는 다크 모드

다섯 모두 헷갈리는 짝이 있는 이름입니다 — 짝을 함께 떠올리고, 설명의 어느 말이 둘을 가르는지 견줘 보세요.

(가) · (나)는 모양이 아니라 뜻을 담는 태그입니다.

받는 답: (가) strong · (나) article · (다) rem · (라) align-items · (마) relative

• (가) b는 뜻 없이 눈에 띄게 할 때 씁니다. 굵게 보이는 것은 같아도 중요함을 읽는 프로그램에 전하는 쪽은 strong입니다(태그가 모양이라는 생각).
• (나) section은 제목이 붙는 큰 갈래 하나라 떼어 내면 뜻이 끊길 수 있습니다. 혼자 서는 묶음은 article입니다.
• (다) font-size의 em은 부모의 글자 크기가 1이라 겹치면 커집니다. 문서 맨 위 요소(html)가 기준인 쪽이 rem입니다.
• (라) justify-content는 주축을 맡습니다. 교차축은 align-items입니다.
• (마) absolute는 흐름에서 빠져 원래 자리를 남기지 않습니다. 자리를 지키며 기준 상자가 되는 값은 relative입니다.

다시 볼 레슨: 문단과 강조 · article과 section 가르기 · 글자 크기는 rem · 교차축 정렬 · 기준 상자와 absolute

찾는 차례대로 1번부터 지워 가세요. 메뉴가 한 줄로 나란한지부터 봅니다.

경고 표시는 브라우저가 그 선언을 알아듣지 못해 버렸다는 뜻입니다. 길이 값에 무엇이 빠졌는지 보세요.

받는 답: 4번 줄을 gap: 16px;로 고칩니다 — 0이 아닌 길이에는 단위를 붙입니다.

<div class="menu">
  <div>라테</div>
  <div>녹차</div>
</div>

.menu {
  display: flex;
  gap: 16px;
}

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

• 1번 — 메뉴가 한 줄로 나란하니 규칙은 닿았습니다.

• 2번 — Elements 패널에 div.menu 안 div 둘이 있습니다.

• 3번 — Styles 창에 .menu 규칙이 보입니다.

• 4번 — gap: 16;에 경고 표시와 취소선이 있습니다. 단위 없는 16은 길이로 알아듣지 못하는 값이라 그 선언만 버렸습니다. 같은 규칙의 display: flex는 그대로 먹어 메뉴는 나란합니다(브라우저 규칙 4).

• 흔한 오답은 gap: 16 !important;처럼 무게를 더하는 것입니다. 알아듣지 못하는 값은 여전히 버려집니다.

• 규칙 전체를 다시 쓰거나 다른 이름으로 옮기는 것도 흔합니다. 규칙 전체가 아니라 한 선언만 버려졌다는 것을 Styles 창이 보여 줍니다(CSS도 멈춘다는 생각).

다시 볼 레슨: 규칙의 모양 · gap과 flex: 1