HTML DOM listStyle 속성 – 리스트 스타일을 한 번에 설정하는 방법

HTML DOM의 listStyle 속성은 CSS의 세 가지 개별 속성인 list-style-type, list-style-position, list-style-image를 한 번에 설정하거나 현재 값을 가져올 때 사용합니다. 이 속성을 활용하면 자바스크립트만으로 목록의 마커 모양, 위치, 이미지를 손쉽게 제어할 수 있습니다.

listStyle 속성 문법

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

object.style.listStyle = "type position image|initial|inherit"

각 매개변수가 의미하는 바는 아래 표와 같습니다.

매개변수	설명
type	목록 항목(list-item) 마커의 종류를 정의합니다. 예: disc, circle, square, decimal, upper-roman 등
position	목록 항목 마커의 위치를 설정합니다. inside 또는 outside 값을 사용할 수 있습니다.
image	목록 항목 마커로 사용할 이미지를 지정합니다. 예: url('marker.png')
initial	해당 속성을 기본값(initial)으로 되돌립니다.
inherit	부모 요소의 속성값을 상속받습니다.

listStyle 속성 예제

다음은 버튼을 클릭하면 순서 없는 목록(ul)의 스타일을 대문자 로마 숫자(upper-roman)로 변경하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<script>
    function changeListStyle() {
        document.getElementById("LIST1").style.listStyle = "upper-roman";
        document.getElementById("Sample").innerHTML = "목록 스타일이 대문자 로마 숫자로 변경되었습니다.";
    }
</script>
</head>
<body>
    <ul id="LIST1">
        <li>MANGO</li>
        <li>GUAVA</li>
        <li>LITCHI</li>
        <li>WATERMELON</li>
    </ul>
    <p>아래 버튼을 클릭하면 위 목록의 스타일이 변경됩니다.</p>
    <button type="button" onclick="changeListStyle()">리스트 스타일 변경</button>
    <p id="Sample"></p>
</body>
</html>

실행 결과

페이지를 처음 열면 각 과일 이름 앞에 기본 불릿(disc) 마커가 표시됩니다.

HTML DOM listStyle 속성 – 리스트 스타일을 한 번에 설정하는 방법

“리스트 스타일 변경” 버튼을 클릭하면 목록 마커가 대문자 로마 숫자(I, II, III, IV)로 바뀌고, 하단에 변경 완료 메시지가 출력됩니다.

HTML DOM listStyle 속성 – 리스트 스타일을 한 번에 설정하는 방법

정리

listStyle 속성은 여러 개의 list-style 관련 CSS 속성을 하나의 문자열로 묶어 처리할 수 있어 코드가 간결해집니다. 다만 개별 속성을 세밀하게 제어해야 하는 경우에는 listStyleType, listStylePosition, listStyleImage 속성을 따로 사용하는 것이 좋습니다.