자바스크립트 이용한 이미지 태그의 src 속성 동적 변경 방법

웹 개발을 하다 보면 다양한 이유로 이미지를 동적으로 변경해야 할 때가 있습니다. 예를 들어, 사용자가 특정 버튼을 클릭했을 때 이미지가 변경되거나, 특정 이벤트 발생 시 이미지를 업데이트하는 등의 상황이 있습니다. 자바스크립트를 이용하면 이러한 작업을 손쉽게 수행할 수 있습니다. 이 블로그 글에서는 자바스크립트를 이용해 이미지 태그의 src 속성을 동적으로 변경하는 방법을 단계별로 설명하겠습니다.

1. HTML 구조 준비

우선, 이미지를 포함한 간단한 HTML 구조를 준비합니다. 예제에서는 변경할 이미지와 버튼을 포함한 HTML을 작성해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 src 속성 동적 변경</title>
</head>
<body>
    <h1>자바스크립트를 이용한 이미지 src 속성 변경</h1>
    <img id="myImage" src="default-image.jpg" alt="Default Image" width="300">
    <br>
    <button id="changeImageBtn">이미지 변경</button>

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

2. 자바스크립트 코드 작성

다음으로, script.js 파일을 작성하여 이미지를 동적으로 변경하는 자바스크립트 코드를 추가합니다. 이 예제에서는 버튼을 클릭했을 때 이미지를 변경하는 기능을 구현합니다.

// script.js

// 버튼과 이미지 태그 요소를 선택합니다.
const changeImageBtn = document.getElementById('changeImageBtn');
const myImage = document.getElementById('myImage');

// 변경할 이미지 URL을 정의합니다.
const newImageUrl = 'new-image.jpg';

// 버튼 클릭 이벤트 리스너를 추가합니다.
changeImageBtn.addEventListener('click', () => {
    // 이미지 태그의 src 속성을 새로운 이미지 URL로 변경합니다.
    myImage.src = newImageUrl;
    console.log('이미지 src가 변경되었습니다.');
});

3. 코드 설명

위 코드에서 사용된 주요 자바스크립트 기능을 설명하겠습니다.

HTML 요소 선택: document.getElementById를 사용하여 버튼과 이미지 태그를 선택합니다.
이벤트 리스너 추가: addEventListener 메서드를 사용하여 버튼 클릭 이벤트를 처리합니다.
src 속성 변경: 이벤트가 발생하면 이미지 태그의 src 속성을 새로운 이미지 URL로 변경합니다.

4. 전체 코드

이제 전체 코드를 한 번에 확인해 보겠습니다.

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이미지 src 속성 동적 변경</title>
</head>
<body>
    <h1>자바스크립트를 이용한 이미지 src 속성 변경</h1>
    <img id="myImage" src="default-image.jpg" alt="Default Image" width="300">
    <br>
    <button id="changeImageBtn">이미지 변경</button>

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

자바스크립트 (script.js)

// script.js

// 버튼과 이미지 태그 요소를 선택합니다.
const changeImageBtn = document.getElementById('changeImageBtn');
const myImage = document.getElementById('myImage');

// 변경할 이미지 URL을 정의합니다.
const newImageUrl = 'new-image.jpg';

// 버튼 클릭 이벤트 리스너를 추가합니다.
changeImageBtn.addEventListener('click', () => {
    // 이미지 태그의 src 속성을 새로운 이미지 URL로 변경합니다.
    myImage.src = newImageUrl;
    console.log('이미지 src가 변경되었습니다.');
});

결론

이 글에서는 자바스크립트를 이용하여 이미지 태그의 src 속성을 동적으로 변경하는 방법을 알아보았습니다. 간단한 예제와 함께 코드를 설명하였으니, 이 방법을 활용하여 다양한 웹 프로젝트에서 이미지를 동적으로 변경하는 기능을 구현해 보세요. 더 복잡한 시나리오에서도 이 기본적인 원리를 응용할 수 있습니다.

저작자표시 변경금지