HTML DOM Style listStyleImage 속성 – 리스트 마커를 이미지로 설정하는 방법

HTML DOM의 listStyleImage 속성은 목록(list) 항목 앞에 표시되는 마커를 이미지로 설정하거나 현재 설정된 이미지를 반환할 때 사용됩니다.

문법(Syntax)

listStyleImage 속성을 설정하는 기본 문법은 다음과 같습니다.

object.style.listStyleImage = "none|url|initial|inherit"

속성 값 설명

각 값이 의미하는 바는 아래 표와 같습니다.

값	설명
none	기본값(default)으로, 어떠한 이미지도 표시하지 않습니다.
url	마커로 사용할 이미지의 경로(path)를 지정합니다.
initial	해당 속성을 초기값(initial value)으로 되돌립니다.
inherit	부모 요소의 속성 값을 상속받습니다.

예제(Example)

아래 예제는 버튼을 클릭하면 목록의 기본 불릿(bullet) 마커가 빨간 원 이미지로 바뀌도록 구현한 코드입니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function changeListImage() {
        document.getElementById("LIST1").style.listStyleImage =
        "url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Red_circle.svg/10px-Red_circle.svg.png')";
        document.getElementById("Sample").innerHTML = "리스트 마커가 빨간 원 이미지로 교체되었습니다.";
    }
</script>
</head>
<body>
    <ul id="LIST1">
        <li>LIST ITEM1</li>
        <li>LIST ITEM2</li>
        <li>LIST ITEM3</li>
        <li>LIST ITEM4</li>
    </ul>
    <p>아래 버튼을 클릭하면 위 목록의 스타일 이미지가 변경됩니다.</p>
    <button type="button" onclick="changeListImage()">Change List Image</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과(Output)

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

HTML DOM Style listStyleImage 속성 – 리스트 마커를 이미지로 설정하는 방법

여기서 “Change List Image” 버튼을 클릭하면 목록 항목 앞의 마커가 빨간 원 이미지로 교체된 것을 확인할 수 있습니다.

HTML DOM Style listStyleImage 속성 – 리스트 마커를 이미지로 설정하는 방법

정리

listStyleImage 속성은 CSS의 list-style-image와 동일한 역할을 하며, 자바스크립트를 통해 동적으로 목록 마커를 변경하고 싶을 때 유용하게 활용할 수 있습니다. 단, 일부 브라우저에서는 이미지 크기 조절이 제한적일 수 있으므로 필요에 따라 CSS 클래스를 함께 활용하는 것이 좋습니다.