HTML DOM의 OL type 속성은 순서 있는 목록(ordered list)에서 각 항목 앞에 표시되는 마커(marker)의 유형을 결정하는 type 속성 값을 가져오거나 설정하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트만으로 목록의 번호 스타일을 동적으로 변경할 수 있습니다.
문법(Syntax)
type 속성 값 반환하기
olObject.type
type 속성 값 설정하기
olObject.type = '1|a|A|i|I'
type 속성에는 다음과 같은 다섯 가지 값을 지정할 수 있습니다.
- 1 – 아라비아 숫자 (1, 2, 3, ...)
- a – 소문자 알파벳 (a, b, c, ...)
- A – 대문자 알파벳 (A, B, C, ...)
- i – 소문자 로마 숫자 (i, ii, iii, ...)
- I – 대문자 로마 숫자 (I, II, III, ...)
그럼 실제 예제를 통해 OL type 속성의 동작 방식을 살펴보겠습니다.
예제
아래 예제에서는 학생 명단이 담긴 순서 목록이 있으며, 버튼을 클릭하면 목록의 마커가 대문자 로마 숫자(I)로 변경됩니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol type</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
ol{
width: 30%;
margin: 0 auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Ol-type</legend>
<h3>Students</h3>
<ol id="orderList" type='2'>
<li>Adam</li>
<li>Alex</li>
<li>Bina</li>
<li>Eden</li>
<li>Rajesh</li>
<li>Zampa</li>
</ol>
<input type="button" onclick="changeMarker()" value="Change Marker">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var studentList = document.getElementById("orderList");
function changeMarker() {
studentList.type = 'I';
divDisplay.textContent = 'Marker Changed';
}
</script>
</body>
</html>
코드 설명
<ol id="orderList">요소로 학생 명단 순서 목록을 생성합니다.- 버튼을 클릭하면
changeMarker()함수가 실행되어studentList.type = 'I'코드를 통해 목록의 마커가 대문자 로마 숫자로 변경됩니다. - 변경이 완료되면
divDisplay영역에 'Marker Changed'라는 메시지가 표시됩니다.
실행 결과
'Change Marker' 버튼을 클릭하기 전 −
'Change Marker' 버튼을 클릭한 후 −
버튼을 클릭한 뒤 목록의 마커가 기존 숫자 형식에서 대문자 로마 숫자(I, II, III...)로 바뀐 것을 확인할 수 있습니다. 이처럼 OL type 속성을 사용하면 페이지를 새로고침하지 않고도 순서 목록의 표기 방식을 손쉽게 제어할 수 있습니다.