DOM 조작을 활용한 인터랙티브 웹페이지 만들기

작성: 2025년 12월 02일읽기: 약 3분

웹 개발에 관심이 많은 주니어 개발자 여러분, 인터랙티브 웹페이지를 만드는 방법을 배우고 싶으신가요? 오늘은 바로 그 방법, 즉 DOM 조작을 활용하는 방법에 대해 알아보겠습니다. DOM이란 Document Object Model의 약자로, 웹 페이지의 구조를 나타내는 용어입니다. 쉽게 말해, 우리가 웹 페이지에서 보는 모든 요소(텍스트, 이미지, 버튼 등)를 조작할 수 있는 방법을 제공합니다.

DOM 조작이란?

DOM 조작은 JavaScript를 사용하여 웹 페이지의 요소를 동적으로 변경하는 것을 의미합니다. 이를 통해 사용자와의 상호작용이 있는 웹페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭하면 텍스트 색상이 변경되거나, 새로운 내용이 페이지에 추가되는 것 등이 가능해집니다.

간단한 예제로 배우기

이제 JavaScript를 사용하여 간단한 DOM 조작 예제를 만들어 보겠습니다. 우리의 목표는 버튼을 클릭하면 페이지에 있는 텍스트의 색상이 변경되는 기능을 구현하는 것입니다.

HTML 구조

먼저, 우리가 조작할 HTML 요소를 만들어야 합니다. 아래는 기본적인 HTML 구조입니다.

<!DOCTYPE html>
<html>
<head>
    <title>인터랙티브 웹페이지 예제</title>
</head>
<body>
    <p id="text">색상을 변경해보세요!</p>
    <button id="changeColorButton">색상 변경</button>

    <script src="script.js"></script>
</body>
</html>

JavaScript로 DOM 조작하기

이제 script.js 파일을 만들고, 버튼을 클릭했을 때 텍스트의 색상이 변경되도록 JavaScript를 작성해보겠습니다.

document.getElementById('changeColorButton').addEventListener('click', function() {
    document.getElementById('text').style.color = 'blue';
});

위 코드는 changeColorButton이라는 ID를 가진 버튼에 클릭 이벤트 리스너를 추가합니다. 버튼이 클릭되면, text라는 ID를 가진 요소의 텍스트 색상을 파란색으로 변경합니다.

마무리

이처럼 DOM 조작을 사용하면, 웹 페이지의 요소를 동적으로 변경하여 사용자와의 상호작용을 풍부하게 만들 수 있습니다. 오늘 배운 내용을 바탕으로 다양한 인터랙티브 기능을 구현해보세요. 웹 개발의 세계는 무궁무진한 가능성으로 가득 차 있습니다. 계속해서 새로운 것을 배우고, 실험하며, 여러분만의 멋진 웹페이지를 만들어 나가길 바랍니다!