웹 개발에서는 DOM을 활용하여 웹 페이지의 요소를 동적으로 변경하는 것이 중요합니다. 이미지를 동적으로 변경하는 것은 사용자 경험을 향상시키는 데 도움이 됩니다. 이번 포스트에서는 JavaScript를 사용하여 DOM을 활용하여 이미지를 동적으로 변경하는 방법에 대해 알아보겠습니다.

1. HTML 구조

먼저, 이미지를 표시할 HTML 구조를 만들어야 합니다. 다음은 이미지를 표시할 <img> 요소입니다:

<img id="dynamic-image" src="default.jpg" alt="Default Image">

2. JavaScript로 이미지 변경하기

다음으로, JavaScript를 사용하여 이미지를 동적으로 변경할 수 있습니다. 예를 들어, 버튼을 클릭할 때마다 이미지를 변경하는 기능을 만들어 보겠습니다:

// 이미지 변경 함수
function changeImage() {
  var image = document.getElementById('dynamic-image');
  image.src = 'newImage.jpg';
  image.alt = 'New Image';
}

<button onclick="changeImage()">이미지 변경</button>

위 코드에서는 changeImage 함수를 만들어 이미지 요소의 src 속성과 alt 속성을 변경하여 새로운 이미지로 업데이트합니다.

3. 결과 확인

이제 웹 페이지를 열고 버튼을 클릭해보면, 이미지가 동적으로 변경되는 것을 확인할 수 있습니다.

이렇게 JavaScript를 사용하여 DOM을 활용하여 이미지를 동적으로 변경할 수 있습니다. 이 기능은 웹 페이지를 더 동적으로 만들어 사용자들에게 더 좋은 경험을 제공할 수 있습니다.

참고 자료

• MDN Web Docs
• W3Schools JavaScript DOM