DOM 조작을 활용한 인터랙티브 웹 요소 만들기 💻

작성: 2025년 11월 03일읽기: 약 3분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 웹 페이지를 더욱 생동감 있고 사용자 친화적으로 만들 수 있는 방법인 DOM 조작에 대해 알아볼 거예요. DOM(Document Object Model)은 웹 페이지의 구조를 나타내는데, 이를 이해하고 조작하는 방법을 배우면, 페이지에 다양한 인터랙티브 요소를 추가할 수 있습니다.

DOM이란 무엇인가요?

간단히 말해서, DOM은 웹 페이지의 모든 요소(HTML 태그)를 트리 구조로 표현한 것입니다. 이 트리 구조를 통해 JavaScript를 사용하여 웹 페이지의 내용, 구조, 스타일을 동적으로 변경할 수 있습니다.

기본적인 DOM 조작 방법

DOM을 조작하기 위해 가장 먼저 해야 할 일은 원하는 요소를 선택하는 것입니다. JavaScript에는 이를 위한 다양한 메소드가 있습니다. 가장 자주 사용되는 두 가지 메소드는 document.getElementById()와 document.querySelector()입니다.

요소 선택하기

document.getElementById('id'): ID를 사용하여 요소를 선택합니다.
document.querySelector('.class'): 클래스, 태그, ID 등을 사용하여 첫 번째로 일치하는 요소를 선택합니다.

요소에 이벤트 리스너 추가하기

웹 페이지에 인터랙티브 요소를 만들기 위해서는 이벤트 리스너를 추가해야 합니다. 이벤트 리스너는 사용자의 행동(클릭, 마우스 오버 등)에 반응하여 코드를 실행합니다.

document.querySelector('button').addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});

요소의 스타일 변경하기

DOM 조작을 통해 요소의 스타일을 동적으로 변경할 수도 있습니다. 이를 통해 사용자와의 상호작용에 따라 요소의 색상, 크기, 위치 등을 변경할 수 있습니다.

document.getElementById('myElement').style.backgroundColor = 'blue';

실습: 간단한 인터랙티브 버튼 만들기

이제 배운 내용을 토대로 간단한 인터랙티브 버튼을 만들어 보겠습니다. 이 버튼은 클릭할 때마다 배경색이 변경됩니다.

HTML 요소 추가하기

<button id="colorButton">색상 변경</button>

JavaScript로 버튼에 기능 추가하기

document.getElementById('colorButton').addEventListener('click', function() {
  // 랜덤 색상 생성
  var randomColor = '#' + Math.floor(Math.random()*16777215).toString(16);
  // 버튼의 배경색 변경
  document.getElementById('colorButton').style.backgroundColor = randomColor;
});

이 코드를 사용하면, '색상 변경' 버튼을 클릭할 때마다 버튼의 배경색이 랜덤한 색으로 변경됩니다. 이처럼 DOM 조작을 통해 웹 페이지에 다양한 인터랙티브 요소를 추가할 수 있습니다.

DOM 조작은 웹 개발에서 매우 중요한 개념입니다. 오늘 배운 내용을 토대로 다양한 프로젝트에 적용해 보세요. Happy coding! 🚀