<ol>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
HTML <ol>
요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
시도해보기
콘텐츠 카테고리 |
플로우 콘텐츠. 또한, 최소 하나의 <li> 요소를 자식으로 둔다면
뚜렷한 콘텐츠.
|
---|---|
가능한 콘텐츠 |
0개 이상의 <li> ,
<script> , <template>
요소.
|
태그 생략 | 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다. |
가능한 부모 요소 | 플로우 콘텐츠를 허용하는 모든 요소. |
가능한 ARIA 역할 |
directory , group ,
listbox , menu ,
menubar , radiogroup ,
tablist , toolbar ,
tree , presentation
|
DOM 인터페이스 | HTMLOListElement |
특성
이 요소는 전역 특성을 포함합니다.
reversed
-
목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.
start
-
항목을 셀 때 시작할 수.
type
이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면start="4"
를 사용하세요. type
-
항목을 셀 때 사용할 카운터 유형.
'a'
는 소문자 알파벳,'A'
는 대문자 알파벳,'i'
는 소문자 로마 숫자,'I'
는 대문자 로마 숫자,'1'
는 숫자(기본값)을 나타냅니다.
type
은 아래의 모든<li>
에 적용되지만,type
특성을 가진<li>
는 그 값을 대신 사용합니다.참고 : 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS
list-style-type
속성을 대신 사용하세요.
사용 일람
예제
간단한 예제
html
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
로마 숫자로 표기
html
<ol type="i">
<li>Introduction</li>
<li>List of Greivances</li>
<li>Conclusion</li>
</ol>
start
특성 사용하기
html
<p>Finishing places of contestants not in the winners’ circle:</p>
<ol start="4">
<li>Speedwalk Stu</li>
<li>Saunterin’ Sam</li>
<li>Slowpoke Rodriguez</li>
</ol>
중첩 목록
html
<ol>
<li>first item</li>
<li>
second item
<!-- closing </li> tag not here! -->
<ol>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ol>
</li>
<!-- Here's the closing </li> tag -->
<li>third item</li>
</ol>
정렬 목록 안의 비정렬 목록
html
<ol>
<li>first item</li>
<li>
second item
<!-- Look, the closing </li> tag is not placed here! -->
<ul>
<li>second item first subitem</li>
<li>second item second subitem</li>
<li>second item third subitem</li>
</ul>
</li>
<!-- Here is the closing </li> tag -->
<li>third item</li>
</ol>
명세
Specification |
---|
HTML Standard # the-ol-element |
브라우저 호환성
BCD tables only load in the browser
같이 보기
-
<ol>
요소와 유용하게 사용할 수 있는 CSS 속성- 서수를 표현할 방식을 지정하는
list-style
속성. - 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
- 더 이상 사용하지 않는
compact
특성을 대체할 수 있는line-height
- 항목의 들여쓰기를 조정하기 위한
margin
속성.
- 서수를 표현할 방식을 지정하는