확인한 환경과 범위

Chromium 156.0.8078.74. 본문의 HTML·CSS·JavaScript를 실제 브라우저로 렌더링하고 현재 화면을 캡처했습니다. 모든 조작·레이아웃·접근성을 검증한 것은 아닙니다.

이 글의 순서 5개 단락

이번 강의에서는 할 일 목록의 화면을 준비하고, JavaScript가 다룰 요소를 찾습니다. 아직 버튼을 눌러도 항목은 추가되지 않습니다. 버튼에 반응하는 기능은 다음 강의에서 만듭니다.

1. 시작 화면 만들기

같은 폴더에 index.html과 script.js 파일을 만드세요. 먼저 index.html에 다음 코드를 저장합니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>나의 할 일 목록</title>
  <style>
    body {
      max-width: 480px;
      margin: 40px auto;
      padding: 0 20px;
      font-family: sans-serif;
      line-height: 1.5;
    }
    input, button {
      padding: 8px;
      font: inherit;
    }
  </style>
</head>
<body>
  <main>
    <h1>나의 할 일 목록</h1>
    <label for="todo-input">할 일</label>
    <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
    <button id="add-button" type="button">추가</button>
    <ul id="todo-list"></ul>
  </main>
  <script src="script.js"></script>
</body>
</html>

입력창과 버튼, 목록에 각각 id를 붙였습니다. id는 문서 안에서 요소를 구별할 때 사용할 수 있습니다. <ul>은 지금은 비어 있지만, 이후 강의에서 할 일 항목을 담을 자리입니다.

<script src="script.js"></script>는 같은 폴더에 있는 JavaScript 파일을 불러옵니다. 이 태그를 화면 요소 뒤에 두었으므로, 브라우저가 스크립트를 실행할 때는 앞에 작성한 요소들을 읽은 상태입니다.

2. JavaScript로 요소 선택하기

script.js에 다음 전체 코드를 저장하세요.

const todoInput = document.querySelector('#todo-input');
const addButton = document.querySelector('#add-button');
const todoList = document.querySelector('#todo-list');

console.log('입력창:', todoInput);
console.log('추가 버튼:', addButton);
console.log('목록:', todoList);

document는 현재 웹 문서를 가리킵니다. querySelector()는 괄호 안의 CSS 선택자와 일치하는 첫 번째 요소를 찾습니다. 예를 들어 #todo-input은 id가 todo-input인 요소를 뜻합니다. 찾은 요소는 const로 선언한 변수에 담아 이후 코드에서 사용할 수 있습니다.

3. 브라우저에서 확인하기

index.html을 브라우저에서 열고 개발자 도구의 콘솔을 확인하세요. 입력창, 추가 버튼, 목록이라는 이름 옆에 각각 해당 HTML 요소가 표시되어야 합니다. 요소가 보이는 모양은 브라우저마다 조금 다를 수 있으며, 목록은 비어 있어도 <ul> 요소 자체는 선택할 수 있습니다.

아래 실행 예제는 같은 시작 화면과 선택 코드를 사용합니다. 예제를 하나의 HTML 문서로 실행할 수 있도록 JavaScript를 문서 끝의 <script> 안에 넣었습니다. 직접 만든 두 파일에서는 앞서 작성한 대로 script.js를 연결하면 됩니다. 선택 결과는 화면 안이 아니라 브라우저 개발자 도구의 콘솔에서 확인합니다.

할 일 화면을 준비하고 요소 선택하기 — 첫 예제의 실제 실행 결과

요소가 선택되지 않을 때

콘솔에 요소 대신 null이 나타나면 해당 선택자와 일치하는 요소를 찾지 못한 것입니다. 다음을 확인하고 파일을 저장한 뒤 페이지를 새로고침하세요.

  • HTML의 id와 JavaScript의 선택자 철자가 같은지 확인합니다. id 선택자 앞에는 #이 필요합니다.
  • 스크립트 태그가 선택할 요소들 뒤에 있는지 확인합니다. 요소를 읽기 전에 선택 코드를 실행하면 찾지 못할 수 있습니다.
  • 콘솔에 아무 로그도 나오지 않거나 파일을 불러오지 못했다는 오류가 보이면 script.js의 이름과 위치, HTML의 src 경로를 확인합니다. 위 예제에서는 두 파일이 같은 폴더에 있어야 합니다.

직접 연습하기

script.js에서 목록을 찾는 선택자를 잠시 #todo-items로 바꾸고 저장한 다음 페이지를 새로고침해 보세요. 콘솔에 표시되는 목록의 결과를 확인하고, HTML에 적힌 실제 id인 #todo-list로 되돌린 뒤 다시 확인합니다. 이 파일들은 다음 강의에서 버튼 클릭을 처리하는 출발점이 됩니다.

한 줄씩 이해하고, 차곡차곡 기록합니다.이 글의 오류 제보하기 ↗