JavaScript로 목록 항목 마커 위치 설정하기
목록 항목(list-item)의 마커 위치를 설정하려면 listStylePosition 속성을 사용하면 됩니다. 이 속성은 두 가지 값을 가질 수 있습니다.
- inside — 마커가 항목 텍스트의 흐름 안쪽에 배치되며, 들여쓰기된 본문과 함께 정렬됩니다.
- outside(기본값) — 마커가 텍스트 블록 바깥쪽에 배치되어 일반적인 목록 모양이 됩니다.
다음 예제 코드를 실행하면 버튼 클릭 한 번으로 목록 항목 마커의 위치를 동적으로 변경할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<body>
<ol id="myID">
<li>One</li>
<li>Two</li>
</ol>
<button type="button" onclick="displayInside()">Add list inside</button>
<button type="button" onclick="displayOutside()">Add list outside</button>
<script>
function displayInside() {
document.getElementById("myID").style.listStylePosition = "inside";
}
function displayOutside() {
document.getElementById("myID").style.listStylePosition = "outside";
}
</script>
</body>
</html>
코드 설명
[Add list inside] 버튼을 클릭하면 displayInside() 함수가 호출되어 listStylePosition 속성이 "inside"로 변경되고, [Add list outside] 버튼을 클릭하면 displayOutside() 함수가 실행되어 속성값이 "outside"로 설정됩니다.
이처럼 DOM 요소의 style 객체에 접근하면 CSS를 수정하지 않고도 JavaScript만으로 목록 스타일을 실시간으로 제어할 수 있습니다.