This page was translated from English by the community.Learn more and join the MDN Web Docs community.
<ol>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
HTML<ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
시도해 보기
<ol> <li>Mix flour, baking powder, sugar, and salt.</li> <li>In another bowl, mix eggs, milk, and oil.</li> <li>Stir both mixtures together.</li> <li>Fill muffin tray 3/4 full.</li> <li>Bake for 20 minutes.</li></ol>li { font: 1rem "Fira Sans", sans-serif; margin-bottom: 0.5rem;}| 콘텐츠 카테고리 | 플로우 콘텐츠. 또한, 최소 하나의<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속성을 대신 사용하세요.
사용 일람
보통 정렬 목록의 항목은 선행하는 숫자나 문자 등마커와 함께 표시합니다.
<ol>과<ul>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.
<ol>과<ul>은 모두 목록을 나타냅니다. 차이가 있다면<ol>에서는 순서가 중요하다는 점입니다. 예를 들어,
- 단계별 요리법
- 내비게이션
- 영양정보에서 비율의 내림차순으로 정렬한 원재료 목록
항목의 순서를 바꿨을 때 의미도 바뀐다면<ol>을 사용하세요. 그렇지 않으면<ul>을 사용할 수 있습니다.
예제
간단한 예제
<ol> <li>first item</li> <li>second item</li> <li>third item</li></ol>로마 숫자로 표기
<ol type="i"> <li>Introduction</li> <li>List of Greivances</li> <li>Conclusion</li></ol>start 특성 사용하기
<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>중첩 목록
<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>정렬 목록 안의 비정렬 목록
<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 # the-ol-element |
브라우저 호환성
같이 보기
- 리스트 관련 다른 요소:
<ul>,<li>,<menu> <ol>요소와 유용하게 사용할 수 있는 CSS 속성- 서수를 표현할 방식을 지정하는
list-style속성. - 복잡한 중첩 목록을 처리하기 위한CSS 카운터
- 더 이상 사용하지 않는
compact특성을 대체할 수 있는line-height - 항목의 들여쓰기를 조정하기 위한
margin속성.
- 서수를 표현할 방식을 지정하는