Reporch
문제
랭킹
포럼
챌린지
소개
IDE
로그인
회원가입
DOM과 이벤트 | Reporch
목록
학습 경로
DOM과 이벤트
HTML 요소를 찾고 바꾸며, 클릭·입력·폼 이벤트에 반응하는 화면을 만듭니다.
0 / 16
0%
01
querySelector로 요소 찾기
5
## 이번 단계에서 배울 내용 DOM은 JavaScript에서 HTML 문서를 다루는 객체 구조입니다. `document.querySelector()`는 CSS 선택자와 일치하는 첫 요소를 찾습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const heading = document.querySelector('.title'); ``` ## 해야 할 일 `#welcome` 요소를 찾아 `환영합니다!`로 글을 바꾸세요. ## 완성 조건 - #welcome을 querySelector로 찾습니다. - 화면에 환영합니다!가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
02
textContent로 안전하게 글 바꾸기
5
## 이번 단계에서 배울 내용 `textContent`는 요소 안의 글을 읽거나 바꿉니다. 사용자에게 단순한 글을 보여 줄 때 HTML 문자열을 해석하는 `innerHTML`보다 안전합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript message.textContent = '저장되었습니다.'; ``` ## 해야 할 일 상태 영역의 글을 `학습 준비 완료`로 바꾸세요. ## 완성 조건 - status 요소를 찾습니다. - textContent로 정확한 문장을 표시합니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
03
classList로 클래스 추가하기
5
## 이번 단계에서 배울 내용 `classList`는 요소의 class를 안전하게 추가하거나 제거합니다. `add()`는 기존 클래스를 지우지 않고 새 클래스를 더합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript card.classList.add('selected'); ``` ## 해야 할 일 카드에 `highlighted` 클래스를 추가하세요. ## 완성 조건 - 기존 card 클래스가 유지됩니다. - highlighted 클래스가 추가됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
04
setAttribute로 속성 바꾸기
5
## 이번 단계에서 배울 내용 `setAttribute(이름, 값)`은 HTML 속성을 추가하거나 변경합니다. 링크 주소, 이미지 설명, ARIA 상태 등을 바꿀 때 사용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript link.setAttribute('href', '/learn'); ``` ## 해야 할 일 준비된 링크의 `href`를 `/courses`로 바꾸세요. ## 완성 조건 - setAttribute를 사용합니다. - 링크의 href 속성이 /courses입니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
05
클릭 이벤트에 반응하기
5
## 이번 단계에서 배울 내용 `addEventListener()`는 사용자의 행동을 기다렸다가 함수를 실행합니다. 클릭은 `click` 이벤트로 처리합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript button.addEventListener('click', () => { message.textContent = '클릭했어요'; }); ``` ## 해야 할 일 버튼을 누르면 상태 글이 `버튼을 눌렀습니다.`로 바뀌게 하세요. ## 완성 조건 - 버튼에 click 이벤트를 연결합니다. - 클릭 후 상태 문장이 바뀝니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
06
입력하는 동안 값 보여 주기
5
## 이번 단계에서 배울 내용 `input` 이벤트는 입력값이 바뀔 때마다 발생합니다. 입력 요소의 현재 값은 `value`로 읽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript input.addEventListener('input', () => { preview.textContent = input.value; }); ``` ## 해야 할 일 이름 입력창에 글을 입력하면 미리보기 영역에 같은 글이 즉시 표시되게 하세요. ## 완성 조건 - input 이벤트를 사용합니다. - 입력값과 미리보기 글이 같습니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
07
폼 제출을 JavaScript로 처리하기
5
## 이번 단계에서 배울 내용 폼의 `submit` 이벤트는 Enter 키와 제출 버튼을 모두 처리합니다. `event.preventDefault()`를 호출하면 연습 페이지가 새로고침되는 것을 막을 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript form.addEventListener('submit', (event) => { event.preventDefault(); }); ``` ## 해야 할 일 폼을 제출하면 새로고침 없이 `제출 완료`를 표시하세요. ## 완성 조건 - form의 submit 이벤트를 처리합니다. - 기본 제출 동작을 막습니다. - 제출 완료가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
08
새 요소를 만들고 문서에 추가하기
5
## 이번 단계에서 배울 내용 `document.createElement()`로 새 DOM 요소를 만들고 `append()`로 부모의 마지막 자식에 추가할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript const item = document.createElement('li'); item.textContent = '새 항목'; list.append(item); ``` ## 해야 할 일 `복습하기` 글을 가진 새 li를 만들고 학습 목록 끝에 추가하세요. ## 완성 조건 - createElement로 li를 만듭니다. - 새 항목 글은 복습하기입니다. - 목록의 마지막에 추가됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
09
remove로 요소 삭제하기
5
## 이번 단계에서 배울 내용 DOM 요소의 `remove()`를 호출하면 문서에서 그 요소를 제거합니다. 삭제 버튼처럼 사용자의 명확한 행동에 연결하는 것이 좋습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript deleteButton.addEventListener('click', () => { item.remove(); }); ``` ## 해야 할 일 삭제 버튼을 누르면 알림 항목이 화면에서 사라지게 하세요. ## 완성 조건 - 삭제 버튼의 click을 처리합니다. - 클릭 후 notice 요소가 존재하지 않습니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
10
classList.toggle로 상태 전환하기
5
## 이번 단계에서 배울 내용 `classList.toggle()`은 클래스가 없으면 추가하고 있으면 제거합니다. 열기/닫기처럼 두 상태를 오갈 때 유용합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript panel.classList.toggle('open'); ``` ## 해야 할 일 버튼을 누를 때마다 패널의 `open` 클래스를 켜고 끄세요. ## 완성 조건 - click 이벤트를 사용합니다. - 첫 클릭 후 open 클래스가 있습니다. - 둘째 클릭 후 open 클래스가 제거됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
11
event.target으로 누른 항목 알아내기
5
## 이번 단계에서 배울 내용 이벤트 객체의 `target`은 사용자가 실제로 상호작용한 요소입니다. 여러 버튼을 한 부모에서 처리하는 이벤트 위임에 활용할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript list.addEventListener('click', (event) => { output.textContent = event.target.textContent; }); ``` ## 해야 할 일 색상 목록의 버튼을 누르면 그 버튼의 `data-color` 값을 결과에 표시하세요. ## 완성 조건 - 부모 목록에 click 이벤트를 연결합니다. - event.target에서 data-color를 읽습니다. - 파랑 버튼을 누르면 blue이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
12
select의 선택 변화 처리하기
5
## 이번 단계에서 배울 내용 선택 상자의 값이 바뀌면 `change` 이벤트가 발생합니다. 현재 선택값은 select 요소의 `value`에서 읽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript select.addEventListener('change', () => { output.textContent = select.value; }); ``` ## 해야 할 일 학습 단계 선택이 바뀌면 선택한 값을 결과에 표시하세요. ## 완성 조건 - change 이벤트를 사용합니다. - 고급을 선택하면 advanced가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
13
키보드 입력에 반응하기
5
## 이번 단계에서 배울 내용 `keydown` 이벤트는 키를 누를 때 발생하고 `event.key`로 어떤 키인지 확인합니다. 마우스 없이도 기능을 사용할 수 있게 만드는 데 중요합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript input.addEventListener('keydown', (event) => { if (event.key === 'Enter') save(); }); ``` ## 해야 할 일 검색창에서 Enter를 누르면 `검색 실행`을 표시하세요. ## 완성 조건 - keydown 이벤트를 처리합니다. - Enter 키인지 확인합니다. - Enter 후 검색 실행이 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
14
localStorage에 간단한 설정 저장하기
5
## 이번 단계에서 배울 내용 `localStorage`는 브라우저에 문자열 값을 저장합니다. 작은 사용자 설정을 페이지를 다시 열어도 유지할 때 사용할 수 있습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript localStorage.setItem('theme', 'dark'); const theme = localStorage.getItem('theme'); ``` ## 해야 할 일 저장 버튼을 누르면 입력한 닉네임을 `nickname` 키로 저장하고 `저장됨`을 표시하세요. ## 완성 조건 - 버튼 click을 처리합니다. - nickname 키로 입력값을 저장합니다. - 상태가 저장됨으로 바뀝니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
15
입력값을 검사하고 오류 안내하기
5
## 이번 단계에서 배울 내용 클라이언트 검증은 사용자가 잘못된 값을 바로 고칠 수 있게 돕습니다. 오류 문장은 어떤 값을 어떻게 고쳐야 하는지 구체적으로 알려야 합니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript if (name.trim() === '') { error.textContent = '이름을 입력해 주세요.'; } ``` ## 해야 할 일 빈 이름으로 제출하면 `이름을 입력해 주세요.`를 표시하고, 이름이 있으면 `등록 완료`를 표시하세요. ## 완성 조건 - submit 기본 동작을 막습니다. - trim 후 빈 값인지 확인합니다. - 빈 값과 정상 값에 서로 다른 안내가 표시됩니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%
16
입력과 목록을 연결해 할 일 추가하기
5
## 이번 단계에서 배울 내용 작은 할 일 기능은 폼 이벤트, 입력값 검증, 요소 생성, 목록 추가를 함께 연습할 수 있습니다. 한 동작을 작은 순서로 나누면 구현하기 쉽습니다. ### 먼저 예시를 살펴보세요 아래 코드는 문법을 이해하기 위한 작은 예시이며, 문제의 정답과는 다릅니다. ```javascript form.addEventListener('submit', (event) => { event.preventDefault(); const item = document.createElement('li'); item.textContent = input.value; list.append(item); }); ``` ## 해야 할 일 할 일을 입력하고 추가 버튼을 누르면 목록 끝에 새 항목을 만들고 입력창을 비우세요. 공백만 입력한 경우에는 추가하지 마세요. ## 완성 조건 - submit 이벤트를 처리합니다. - trim한 값이 비어 있으면 추가하지 않습니다. - 새 li가 목록 끝에 추가됩니다. - 추가 후 입력창이 비워집니다. ## 작업 방법 1. 에디터에서 `script.js`을 엽니다. 2. `TODO` 주석 주변의 코드를 한 단계씩 수정합니다. 3. 미리보기에서 화면과 동작을 직접 확인합니다. 4. 완성 조건을 다시 읽고 제출합니다.
1
100.00%