HTML DOM의 listStyleType 속성은 목록 항목(list-item)의 마커(marker) 유형을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 순서 없는 목록(ul)이나 순서 있는 목록(ol) 앞에 표시되는 기호나 번호의 형태를 자유롭게 변경할 수 있습니다.
listStyleType 속성 문법
listStyleType 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.listStyleType = value
listStyleType 주요 속성값
listStyleType 속성에 사용할 수 있는 대표적인 값들은 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| armenian | 전통 아르메니아 숫자를 마커로 설정합니다. |
| circle | 속이 빈 원(circle)을 마커로 표시합니다. |
| cjk-ideographic | 한자 표기법의 표의 문자(ideographic) 숫자를 마커로 설정합니다. |
| decimal | 일반 아라비아 숫자(1, 2, 3...)를 마커로 사용하며, 기본(default) 값입니다. |
| decimal-leading-zero | 숫자 앞에 0을 붙인 형태(01, 02, 03...)를 마커로 표시합니다. |
| disc | 속이 찬 원을 마커로 표시하며, <ul> 태그의 기본값입니다. |
| hiragana | 일본어 히라가나 전통 번호 체계를 마커로 설정합니다. |
| katakana | 일본어 가타카나 전통 번호 체계를 마커로 설정합니다. |
| lower-alpha | 소문자 알파벳(a, b, c...)을 마커로 설정합니다. |
| lower-greek | 소문자 그리스 문자(α, β, γ...)를 마커로 설정합니다. |
| none | 마커를 표시하지 않습니다. |
| square | 사각형(square)을 마커로 표시합니다. |
| upper-alpha | 대문자 알파벳(A, B, C...)을 마커로 설정합니다. |
| initial | 해당 속성을 초기값으로 되돌립니다. |
| inherit | 부모 요소의 속성값을 상속받습니다. |
listStyleType 속성 활용 예제
다음은 버튼 클릭 시 목록의 마커 스타일을 대문자 로마 숫자(upper-roman)로 변경하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function changeListType() {
document.getElementById("LIST1").style.listStyleType = "upper-roman";
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="changeListType()">Change List Type</button>
<p id="Sample"></p>
</body>
</html>
실행 결과
페이지를 처음 실행하면 기본 disc(속이 찬 원) 마커가 적용된 목록이 화면에 나타납니다.
이후 “Change List Type” 버튼을 클릭하면 다음과 같이 목록 마커가 대문자 로마 숫자(I, II, III, IV)로 변경된 것을 확인할 수 있습니다.
정리
listStyleType 속성은 JavaScript를 통해 동적으로 목록의 마커 스타일을 제어할 수 있는 강력한 도구입니다. CSS의 list-style-type 속성과 동일한 값을 사용하며, 사용자 인터랙션에 따라 목록 모양을 실시간으로 바꿔야 하는 경우에 특히 유용합니다.