HTML DOM 이미지(Image) 객체 완벽 가이드 – 개념, 주요 속성, 실전 예제

HTML DOM 이미지 객체란?

HTML DOM의 이미지(Image) 객체는 HTML 문서 내 <img> 요소를 나타내며, JavaScript를 통해 이미지의 속성을 읽거나 수정하고, 동적으로 새로운 이미지를 생성할 때 사용됩니다.

img 객체 생성 방법

document.createElement() 메서드에 "IMG"를 전달하면 새로운 이미지 요소를 간단히 만들 수 있습니다.

document.createElement("IMG");

이미지 객체의 주요 속성

이미지 객체에서 자주 사용되는 속성은 다음과 같습니다.

속성	설명
alt	이미지의 alt 속성 값을 반환하거나 수정합니다.
complete	브라우저가 해당 이미지의 로딩을 완료했는지 여부를 true 또는 false로 반환합니다.
crossOrigin	이미지 요소의 CORS(Cross-Origin Resource Sharing) 설정을 반환하거나 수정합니다.
height	이미지의 height 속성 값을 반환하거나 수정합니다.
naturalHeight	CSS로 조절되기 전 이미지의 원본(픽셀 기준) 높이를 반환합니다.
naturalWidth	CSS로 조절되기 전 이미지의 원본(픽셀 기준) 너비를 반환합니다.
src	이미지 경로를 지정하는 src 속성 값을 반환하거나 수정합니다.
useMap	이미지 맵과 연결하는 usemap 속성 값을 반환하거나 수정합니다.
width	이미지의 width 속성 값을 반환하거나 수정합니다.
isMap	해당 이미지가 서버 사이드 이미지 맵(server-side image-map)의 일부인지 여부를 반환하거나 수정합니다.

예제 코드

아래 예제에서는 버튼을 클릭하면 새로운 이미지 요소가 동적으로 생성되어 화면에 추가됩니다.

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
    }
    .btn{
        background-color:lightblue;
        border:none;
        height:2rem;
        border-radius:50px;
        width:60%;
        margin:1rem auto;
        display:block;
    }
</style>
</head>
<body>
<h1>DOM 이미지 객체 예제</h1>
<button onclick="createImage()" class="btn">클릭하여 이미지 생성하기</button>
<script>
    function createImage() {
        var x = document.createElement("IMG");
        x.setAttribute("src", "https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg");
        x.setAttribute("alt", "서블릿 배우기");
        document.body.appendChild(x);
    }
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM 이미지(Image) 객체 완벽 가이드 – 개념, 주요 속성, 실전 예제

"클릭하여 이미지 생성하기" 버튼을 누르면 createElement("IMG")로 생성된 이미지 요소가 body에 추가되며, 버튼 아래에 이미지가 나타납니다.

HTML DOM 이미지(Image) 객체 완벽 가이드 – 개념, 주요 속성, 실전 예제

활용 팁

naturalWidth와 naturalHeight 속성은 CSS로 크기를 변경하기 전의 원본 이미지 크기를 알려주므로, 이미지 비율 유지나 반응형 처리에 유용합니다. 또한 complete 속성을 활용하면 이미지 로딩 완료 여부를 확인한 뒤 후속 작업을 실행할 수 있어 사용자 경험을 개선하는 데 도움이 됩니다.