HTML DOM 스타일의 listStylePosition 속성은 목록 항목 마커(list-item marker)의 위치를 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 불릿(bullet)이나 숫자 같은 목록 마커가 텍스트의 바깥쪽에 위치할지, 안쪽으로 들여쓰기 될지를 JavaScript로 동적으로 제어할 수 있습니다.
문법(Syntax)
listStylePosition 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.listStylePosition = "outside|inside|initial|inherit"
속성 값 설명
| 값 | 설명 |
|---|---|
| outside | 기본값(default)입니다. 목록 항목 마커가 텍스트 앞쪽 바깥에 배치됩니다. |
| inside | 목록 항목 마커가 텍스트보다 살짝 안쪽으로 들여쓰기 되어 배치됩니다. |
| initial | 해당 속성을 초기 기본값으로 설정합니다. |
| inherit | 부모 요소의 속성 값을 상속받습니다. |
예제(Example)
다음 예제는 버튼을 클릭하면 목록의 listStylePosition 값을 inside로 변경하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
li{
background-color:lightgreen;
}
</style>
<script>
function changeListPosition() {
document.getElementById("LIST1").style.listStylePosition = "inside";
document.getElementById("Sample").innerHTML = "목록 스타일 위치가 기본값인 outside에서 inside로 변경되었습니다.";
}
</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="changeListPosition()">Change List Position</button>
<p id="Sample"></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 연한 초록색 배경의 목록 항목들이 표시되며, 각 항목의 마커는 기본값인 outside 상태로 텍스트 바깥쪽에 위치합니다.
이제 “Change List Position” 버튼을 클릭하면 다음과 같이 목록 마커가 안쪽(inside)으로 들여쓰기 되어 표시됩니다.
정리
listStylePosition 속성은 CSS의 list-style-position 속성과 동일한 역할을 하며, JavaScript를 통해 런타임에 목록 마커의 위치를 동적으로 변경할 때 유용하게 사용됩니다. outside는 마커를 텍스트 밖에 두고, inside는 마커를 텍스트 흐름 안쪽으로 들여쓰기 한다는 점만 기억하면 쉽게 활용할 수 있습니다.