..

Search

<ol>

HTML <ol> 태그


정의 및 특징

<ol> 태그는 순서가 있는 HTML 리스트(list)를 정의할 때 사용합니다.

 

<ol> 요소에 속하는 각 아이템은 <li> 요소를 사용하여 나타내며, 이때 아이템 앞에 추가되는 마커(marker)는 아라비아 숫자나 알파벳으로 표현됩니다.


예제
<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<ol> 지원함 지원함 지원함 1.0 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <ol> 요소의 compact 속성을 더 이상 지원하지 않으며, reversed 속성이 새롭게 추가되었습니다.

또한, HTML 4.01에서 더 이상 지원되지 않도록 변경되었던 start 속성과 type 속성이 HTML5에서는 다시 지원되도록 변경되었습니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

compact

 

compact

리스트를 평소보다 더 작게 렌더링하도록 명시함.

HTML5에서는 더 이상 지원하지 않음.

reversed

html5

reversed

순서가 있는 리스트에서 리스트 마커의 순서를 내림차순으로 명시함.

start

  숫자

순서가 있는 리스트에서 리스트 마커의 시작값을 명시함.

type

 

1

A

a

I

i

순서가 있는 리스트에서 리스트 아이템에 사용되는 마커(marker)의 종류를 명시함.


CSS 기본값

ol {

  display: block;

  list-style-type: decimal;

  margin-top: 1em;

  margin-bottom: 1em;

  margin-left: 0;

  margin-right: 0;

  padding-left: 40px;

}


DOM 인터페이스

interface HTMLOListElement : HTMLElement {

  attribute boolean reversed;

  attribute long start;

  attribute DOMString type;

};


연관 페이지

HTML 리스트 수업 ⇒

CSS 리스트 수업 ⇒


연습문제