HTML <ol> 태그

❮ 이전 완전한 HTML 참조 다음 ❯

예시

두 개의 서로 다른 정렬된 목록(첫 번째 목록은 1에서 시작하고 두 번째 목록은 50에서 시작):

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

<ol>태그는 정렬된 목록을 정의합니다 . 순서가 지정된 목록은 숫자 또는 알파벳순일 수 있습니다.

< li> 태그는 각 목록 항목을 정의하는 데 사용됩니다.

팁: CSS를 사용하여 목록의 스타일 을 지정하십시오 .

팁: 순서가 지정되지 않은 목록의 경우 <ul> 태그를 사용하세요.

브라우저 지원

Element
<ol>	Yes	Yes	Yes	Yes	Yes

속성

Attribute	Value	Description
reversed	reversed	Specifies that the list order should be reversed (9,8,7...)
start	number	Specifies the start value of an ordered list
type	1 A a I i	Specifies the kind of marker to use in the list

전역 속성

<ol>태그는 HTML의 전역 속성도 지원 합니다 .

이벤트 속성

<ol>태그는 HTML의 이벤트 속성 도 지원합니다 .

더 많은 예

예시

다양한 목록 유형 설정(CSS 사용):

<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-alpha">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

예시

CSS에서 사용할 수 있는 다양한 목록 유형을 모두 표시합니다.

예시

목록의 줄 높이 줄이기 및 확장(CSS 사용):

<ol style="line-height:80%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="line-height:180%">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

예시

순서가 지정된 목록 안에 순서 없는 목록을 중첩합니다.

<ol>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ol>

기본 CSS 설정

대부분의 브라우저는 <ol>다음 기본값으로 요소를 표시합니다.

예시

ol {
display: block;
list-style-type: decimal;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
padding-left: 40px;
}