HTML을 처음 본다면

웹 페이지 화면은 **HTML 요소(element)**들이 부모와 자식으로 엮인 나무 모양으로 이루어져 있습니다. 자바스크립트로 화면의 글자를 바꾸거나 단추 클릭을 받으려면, 먼저 HTML 태그에 적힌 id · class · data-* 속성과 요소를 집어내는 선택자(selector) 문자열을 읽을 줄 알아야 합니다.

이 레슨은 파이썬만 배우고 넘어왔거나 HTML을 처음 보는 분을 위한 다리 레슨입니다. HTML·CSS 과목을 마쳤다면 건너뛰세요 — 바로 다음 레슨인 웹 페이지에서 돌리기로 넘어가면 됩니다.

이 단원을 이미 안다면 건너뛰기: 단원 12 연습 문제에서 문제 2 · 4 · 6 · 8 · 10 다섯 문제만 먼저 풀어 보세요. 모두 맞히면 13단원 상태를 화면으로으로 넘어갑니다.

<ul id="todo-list">  <li data-id="1">    <span>우유 사기</span>    <button class="delete">      삭제    </button>  </li>  <li class="done" data-id="2">    <span>복습하기</span>    <button class="delete">      삭제    </button>  </li></ul><p id="count">남음 1개</p>

1요소와 태그, 그리고 세 가지 속성

HTML은 <p>우유 사기</p>처럼 여는 태그(<p>)와 닫는 태그(</p>) 사이에 내용을 적어 요소(element) 하나를 만듭니다. <input />처럼 내용 없이 혼자 닫히는 태그도 있습니다.

여는 태그 안에는 이름="값" 모양으로 **속성(attribute)**을 적습니다. 자바스크립트가 요소를 찾거나 값을 읽을 때 쓰는 속성은 세 가지입니다.

<p id="count" class="count">
  전체 3개 중 2개 남음
</p>
<li
  class="todo done"
  data-id="2"
>
  <span class="text">
    복습하기
  </span>
  <button class="delete">
    ×
  </button>
</li>

• id="count": 페이지 전체에서 딱 한 요소에만 붙이는 고유 표시입니다.
• class="todo done": 여러 요소에 공통으로 붙이는 묶음 표시입니다. 공백으로 띄워 적으면 todo와 done 두 클래스가 함께 붙은 것입니다.
• data-id="2": 화면에는 보이지 않지만 자바스크립트 코드에 알려 줄 값을 적어 두는 속성입니다. data- 뒤에 원하는 이름을 붙여 씁니다.

2요소 나무(부모·자식)와 선택자 문자열

브라우저는 HTML 파일을 읽으면 바깥 요소를 부모, 안쪽 요소를 자식으로 연결한 **요소 나무(DOM, Document Object Model)**를 메모리에 만듭니다. 위 코드에서 li는 span과 button의 부모이고, span과 button은 li의 자식입니다.

자바스크립트에서 이 나무의 요소를 찾을 때는 CSS와 같은 선택자(selector) 문자열을 넘깁니다.

선택자도 결국 자바스크립트 문자열입니다. 할 일 번호 id에 맞춰 속성 선택자 문자열을 조립하는 모습을 Node로 확인해 봅니다.

const id = 2;
const sel = `[data-id="${id}"]`;
console.log(sel);

[data-id="2"]

예제

결과를 먼저 생각한 뒤 펼쳐 보세요. 맞혀 보기는 점수에 들지 않습니다.

다음 HTML 조각에서 세 요소를 각각 찾아내는 선택자 문자열을 짝지어 보세요.

<ul id="todo-list">
  <li
    class="todo done"
    data-id="1"
  >
    <button
      type="button"
      class="delete"
    >
      ×
    </button>
  </li>
</ul>

1. id가 todo-list인 ul 요소
2. class에 done이 들어 있는 요소
3. data-id 속성 값이 "1"인 요소

1. '#todo-list'
2. '.done'
3. '[data-id="1"]'

자주 틀리는 곳

1. 같은 id를 여러 줄에 붙인다: id는 한 페이지에서 유일해야 합니다. 할 일 목록의 각 줄이나 삭제 단추처럼 여러 개가 반복되는 요소에는 id 대신 class="delete"와 data-id="1"을 씁니다.
2. class="todo done"을 클래스 하나로 본다: class 속성 안의 공백은 여러 클래스를 나누는 구분자입니다. todo와 done 두 클래스가 각각 붙어 있으므로 '.todo'로도 찾고 '.done'으로도 찾을 수 있습니다.
3. 속성 값 data-id="2"를 숫자로 생각한다: HTML 속성에 적힌 값은 따옴표 안의 글자이므로 자바스크립트로 읽어 오면 언제나 문자열 '2'입니다. 숫자 2와 비교할 때는 Number()로 바꿔야 합니다.

확인 문제

1. id="empty"인 요소를 찾는 선택자 문자열과 class="clear"인 요소를 찾는 선택자 문자열을 각각 쓰세요.

2. 여는 태그가 <button class="tab active"⁠이고 data-filter="done"이 적힌 단추 요소에 붙어 있는 클래스는 몇 개이며, data-filter 속성으로 이 요소를 찾는 선택자 문자열은 무엇인가요?

3. 할 일 목록의 <li> 다섯 줄에 모두 삭제 단추가 들어 있습니다. 이 삭제 단추들을 구분해 표시할 때 id="delete"와 class="delete" 가운데 어느 쪽을 써야 하며, 까닭은 무엇인가요?