완성 화면을 영역으로 나누기

완성 화면을 영역으로 나누기는 만들 화면을 먼저 보고 하는 일에 따라 영역으로 나눈 뒤, 영역마다 무엇이 보이면 다 된 것인지 확인 목록으로 적는 일입니다. 화면 하나를 바로 코드부터 치면 어디까지 했는지, 어디가 틀렸는지 가리기 어렵습니다. 할 일을 더하고 지우고 거르는 동작은 HTML·CSS가 아니라 JavaScript의 몫이라는 것도 여기서 가릅니다.

이 단원은 할 일 목록 화면 하나를 처음부터 만듭니다. 줄기는 하위 목표 넷 — 영역 나누기(이 레슨) · 이름표를 맞춘 HTML · CSS 구역 차례 · 두 폭 · 두 테마 점검이고, 레슨 하나가 하위 목표 하나입니다. 앞 레슨에서 만든 파일을 다음 레슨이 이어 씁니다.

이 레슨은 15분 안팎입니다. 코드를 치지 않고 화면을 읽으며 표를 채우는 레슨이라 폰으로도 끝까지 따라올 수 있습니다. 하위 목표마다 멈췄다가 다음 레슨부터 이어 해도 됩니다. 1~9단원만 마치고 왔어도 이 레슨과 다음 레슨은 읽힙니다.

그림 준비 중

1일곱 영역 — 하는 일로 나눈다

이 단원에서 '영역'은 화면을 하는 일로 나눈 부분을 말합니다. 완성 화면은 위에서 아래로 영역 일곱입니다.

요소는 그 영역이 하는 일로 고릅니다(브라우저 규칙 3). 할 일은 차례로 늘어놓은 줄이라 ul이고, 아랫줄은 화면 끝에 붙는 정보라 footer입니다. 일곱 영역 전체는 이 화면의 중심 내용이라 main 하나로 감쌉니다(시맨틱 요소).

⑥ 빈 안내는 지금 화면에 보이지 않습니다. hidden으로 숨긴 자리라 요소 나무에는 있고, 할 일을 모두 지우면 JavaScript가 이 자리를 보이게 합니다(id와 class). 보이지 않는 영역도 계획에는 적어 둡니다.

2동작은 자바스크립트 과목의 몫

HTML · CSS는 지금 상태를 그립니다. 줄을 더하고, 지우고, 거르고, 남은 개수를 세는 일은 상태를 바꾸는 일이라 JavaScript가 합니다. 이 단원의 화면에서 그런 단추를 누르면 무엇이 일어나는지 폼으로 봅니다.

<form id="todo-form">
  <label
    class="sr-only"
    for="todo-input"
  >
    할 일
  </label>
  <input
    id="todo-input"
    placeholder="예: 장보기"
  />
  <button type="submit">
    추가
  </button>
</form>

입력 칸에 '빵 사기'를 치고 '추가'를 누른 뒤의 잰 값입니다. 폼이 제출되어 같은 페이지를 다시 불러왔습니다. 주소 끝에 ?만 붙었고, 친 글은 사라졌고, 목록에 줄은 생기지 않습니다(폼과 제출). 결과 화면에서는 눌러도 떠나지 않게 막아 두었습니다. 떠나는 일은 위 화면 그림과 잰 값 칸으로 보고, 내 파일에서 해 봅니다. 라벨 '할 일'이 결과 화면에 보이는 것은 아직 숨기는 CSS가 없어서입니다.

지우기 · 거르기 단추는 type="button"이라 눌러도 아무 일이 없습니다.

이 단원은 왼쪽 칸까지 만듭니다. 오른쪽 칸은 자바스크립트 과목 12단원부터 이 화면에 붙입니다. 그래서 이 단원의 단추는 눌러도 화면이 그대로인 것이 맞습니다.

3코드보다 확인 목록 먼저

확인 목록은 그 일을 다 했는지 보이는 결과로 가르는 목록입니다. 영역마다 '무엇이 보이면 다 됐나'를 한 줄로 적고, 어디서 볼지(화면 · Elements 패널 · 검사기)를 붙입니다.

목록을 코드보다 먼저 적는 까닭은 둘입니다. 하나는 영역 하나를 칠 때마다 그 줄만 맞춰 보면 되어, 틀린 곳이 방금 친 몇 줄 안에 있다는 것입니다. 또 하나는 끝났는지를 기분이 아니라 줄로 가릴 수 있다는 것입니다. 숨긴 ⑥ 빈 안내처럼 화면만 봐서는 맞는지 모르는 영역은 볼 곳을 Elements 패널로 적습니다.

예제

할 일 화면의 확인 목록

다음 레슨에서 HTML을 쓰며 영역마다 맞춰 볼 목록입니다. 모양(색 · 여백 · 배치)은 아직 적지 않습니다 — CSS 구역 차례 레슨에서 더합니다.

• 줄마다 보이는 결과 하나와 볼 곳 하나입니다. '폼을 잘 만든다'처럼 볼 수 없는 줄은 쓰지 않습니다.
• 동작('추가'를 누르면 줄이 생긴다)은 이 목록에 넣지 않습니다. 이 단원에서는 맞출 수 없는 줄입니다.

자주 틀리는 곳

틀린 생각: 체크박스를 누르면 남은 개수도 따라 바뀐다.

<ul id="todo-list">
  <li>
    <input
      type="checkbox"
      aria-label="완료 표시"
    />
    <span class="text">
      우유 사기
    </span>
  </li>
</ul>
<p id="count" class="count">
  전체 3개 중 2개 남음
</p>

체크 표시는 켜졌지만 개수 글은 처음 적은 그대로입니다. HTML에 적은 글은 누가 바꾸지 않는 한 그 글입니다.

맞는 규칙: HTML · CSS는 동작까지 하지 않습니다. 개수를 세고, 줄을 더하고 지우는 일은 JavaScript가 합니다 — 이 단원은 그 동작이 붙을 화면까지 만듭니다.

틀린 생각: 화면이 머릿속에 있으니 확인 목록 없이 바로 쳐도 된다.

영역 일곱을 한꺼번에 치고 열면, 줄이 하나 빠졌거나 라벨이 칸과 이어지지 않았을 때 어느 영역에서 생겼는지 모릅니다. 화면에는 오류 메시지도 없습니다.

맞는 규칙: 확인 목록을 먼저 적고, 영역 하나를 칠 때마다 저장하고 새로고침해 그 줄을 맞춰 봅니다.

틀린 생각: 영역은 보이는 모양으로 나눈다 — '회색 띠' · '흰 상자'.

모양으로 나누면 요소도 모양으로 고르게 되어 모든 영역이 div가 되고, 이름표도 gray-box처럼 색 이름이 됩니다. 다크 모드처럼 색이 바뀌면 이름이 거짓말이 됩니다.

맞는 규칙: 영역은 하는 일로 나누고, 요소와 이름도 그 일로 고릅니다 — 목록은 ul, 아랫줄은 footer, 한마디는 p에 이름표 quote(브라우저 규칙 3).

확인 문제

1. 이 단원에서 만든 화면의 입력 칸에 '빵 사기'를 치고, 단추 대신 Enter를 눌렀습니다. 화면은 어떻게 될까요?

• ① 목록 끝에 '빵 사기' 줄이 하나 생긴다
• ② 페이지를 다시 불러와 입력 칸이 비고, 줄은 그대로 셋이다
• ③ 단추를 누르지 않았으니 아무 일도 없다

<form id="todo-form">
  <input
    id="todo-input"
    type="text"
    aria-label="할 일"
  />
  <button type="submit">
    추가
  </button>
</form>

2. 이 단원의 줄기를 다시 짚습니다.

(가) 이 단원의 하위 목표 넷이 섞였습니다. 처음부터 차례로 기호를 늘어놓으세요.

• ㉠ CSS 구역 차례
• ㉡ 두 폭 · 두 테마 점검
• ㉢ 영역 나누기
• ㉣ 이름표를 맞춘 HTML

(나) 남은 개수와 '완료한 일 지우기' 단추가 드는 ⑦ 아랫줄을 감쌀 요소를 ____ 자리에 쓰세요.

<____ class="footer">
  <p id="count" class="count">
    전체 3개 중 2개 남음
  </p>
  …
</____>

<footer class="footer">
  <p id="count">
    전체 3개 중 2개 남음
  </p>
</footer>

3. 플로우 카페의 주문 화면을 HTML · CSS로만 만들기 전에 확인 목록을 적었습니다. 이 단계에서 맞출 수 없는 줄을 고르세요.

<h1>플로우 카페</h1>
<p>라테 4500원</p>
<button type="button">
  한 잔 더
</button>
<p id="total">합계 4500원</p>

• ① 라테 이름과 값이 한 줄로 보인다
• ② '한 잔 더' 단추를 Tab으로 갈 수 있다
• ③ '한 잔 더'를 누르면 합계가 9000원으로 오른다
• ④ 합계 글이 '합계 4500원'으로 보인다

<p>라테 4500원</p>
<button type="button">
  한 잔 더
</button>
<p id="total">합계 4500원</p>

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 아래 두 파일을 같은 폴더에 받아 index.html을 엽니다. 위 '할 일 화면의 확인 목록'을 한 줄씩 맞춰 보고, '추가' · × · 필터 단추를 눌러 2절 표의 왼쪽 칸과 같은지 봅니다.

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