HTML <ol> 태그

정의와 사용법

<ol> 태그는 정렬 목록을 정의합니다. 정렬 목록은 숫자나 알파벳 순으로 될 수 있습니다.

<li> 태그는 각 목록 항목을 정의합니다。

추천：목록 스타일을 설정하기 위해 CSS를 사용하세요。

추천：불연속 목록을 위해 사용하세요 <ul> 태그。

자세히 보기：

HTML 강의：HTML 목록

HTML DOM 참조 가이드：Ol 객체

CSS 강의：목록 스타일을 설정합니다

실례

예제 1

두 개의 다른 정렬 목록（첫 번째 목록은 1에서 시작하고 두 번째 목록은 50에서 시작합니다）：

<ol>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>
<ol start="50">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

직접 시험해 보세요

예제 2

다른 목록 유형을 설정합니다（CSS를 사용하여）：

<ol style="list-style-type:upper-roman">
<li>커피</li>
<li>차</li>
<li>우유</li>
</ol>
<ol style="list-style-type:lower-alpha">
<li>커피</li>
<li>차</li>
<li>우유</li>
</ol>

직접 시험해 보세요

예제 3

CSS를 통해 모든 다른 목록 유형을 표시합니다：

<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>

직접 시험해 보세요

예제 4

목록의 행 높이를 줄이거나 확대합니다(CSS 사용):

<ol style="line-height:80%">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>
<ol style="line-height:180%">
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>

직접 시험해 보세요

예제 5

정렬된 목록 내에 비정렬된 목록을 삽입합니다：

<ol>
  <li>커피</li>
  <li>차
    <ul>
      <li>롱정</li>
      <li>푸룩</li>
    </ul>
  </li>
  <li>우유</li>
</ol>

직접 시험해 보세요

속성

속성 값 설명
역순 역순 목록의 순서를 역순으로 설정해야 합니다(9,8,7 ...).
시작 숫자 정렬된 목록의 시작 값을 정의합니다.
타입
  • 1
  • A
  • a
  • I
  • i
 리스트에서 사용할 태그 유형을 정의합니다.

전체 속성

<ol> 태그는 또한 HTML에서의 전체 속성。

이벤트 속성을 지원합니다

<ol> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

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

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

직접 시험해 보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원