path: root/files/ko/web/html/element/ol/index.html

---
title: <ol>
slug: Web/HTML/Element/ol
tags:
  - Element
  - HTML
  - HTML grouping content
  - 'HTML:Flow content'
  - Reference
translation_of: Web/HTML/Element/ol
---
<div>{{HTMLRef}}</div>

<p><strong>HTML <code>&lt;ol&gt;</code> 요소</strong>는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/ol.html", "tabbed-shorter")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>. 또한, 최소 하나의 {{htmlelement("li")}} 요소를 자식으로 둔다면 <a href="/ko/docs/Web/Guide/HTML/Content_categories#뚜렷한_컨텐츠">뚜렷한 콘텐츠</a>.</td>
  </tr>
  <tr>
   <th scope="row">가능한 콘텐츠</th>
   <td>0개 이상의 {{htmlelement("li")}}, {{htmlelement("script")}}, {{htmlelement("template")}} 요소.</td>
  </tr>
  <tr>
   <th scope="row">태그 생략</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">가능한 부모 요소</th>
   <td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>를 허용하는 모든 요소.</td>
  </tr>
  <tr>
   <th scope="row">가능한 ARIA 역할</th>
   <td>{{ARIARole("directory")}}, {{ARIARole("group")}}, {{ARIARole("listbox")}}, {{ARIARole("menu")}}, {{ARIARole("menubar")}}, {{ARIARole("radiogroup")}}, {{ARIARole("tablist")}}, {{ARIARole("toolbar")}}, {{ARIARole("tree")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">DOM 인터페이스</th>
   <td>{{DOMxRef("HTMLOListElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="특성">특성</h2>

<p><span style="line-height: 21px;">이 요소는 </span><a href="/ko/docs/Web/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p>

<dl>
 <dt>{{htmlattrdef("reversed")}}</dt>
 <dd>목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.</dd>
 <dt>{{htmlattrdef("start")}}</dt>
 <dd>항목을 셀 때 시작할 수. <code>type</code>이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 <code>start="4"</code>를 사용하세요.</dd>
 <dt>{{htmlattrdef("type")}}</dt>
 <dd>항목을 셀 때 사용할 카운터 유형.
 <ul>
  <li><code>'a'</code>는 소문자 알파벳,</li>
  <li><code>'A'</code>는 대문자 알파벳,</li>
  <li><code>'i'</code>는 소문자 로마 숫자,</li>
  <li><code>'I'</code>는 대문자 로마 숫자,</li>
  <li><code>'1'</code> 는 숫자(기본값)을 나타냅니다.</li>
 </ul>

 <p><code>type</code>은 아래의 모든 {{htmlelement("li")}}에 적용되지만, {{htmlattrxref("type", "li")}} 특성을 가진 <code>&lt;li&gt;</code>는 그 값을 대신 사용합니다.</p>

 <div class="note"><strong>참고:</strong> 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS {{cssxref("list-style-type")}} 속성을 대신 사용하세요.</div>
 </dd>
</dl>

<h2 id="사용_일람">사용 일람</h2>

<p>보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 <a href="/ko/docs/Web/CSS/::marker">마커</a>와 함께 표시합니다.</p>

<p><code>&lt;ol&gt;</code>과 {{htmlelement("ul")}}은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.</p>

<p><code>&lt;ol&gt;</code>과 {{htmlelement("ul")}}은 모두 목록을 나타냅니다. 차이가 있다면 <code>&lt;ol&gt;</code>에서는 순서가 중요하다는 점입니다. 예를 들어,</p>

<ul>
 <li>단계별 요리법</li>
 <li>내비게이션</li>
 <li>영양정보에서 비율의 내림차순으로 정렬한 원재료 목록</li>
</ul>

<p>항목의 순서를 바꿨을 때 의미도 바뀐다면 <code>&lt;ol&gt;</code>을 사용하세요. 그렇지 않으면 {{htmlelement("ul")}}을 사용할 수 있습니다.</p>

<h2 id="예제">예제</h2>

<h3 id="간단한_예제">간단한 예제</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item&lt;/li&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("간단한_예제", 400, 100)}}</p>

<h3 id="로마_숫자로_표기">로마 숫자로 표기</h3>

<pre class="brush: html">&lt;ol type="i"&gt;
  &lt;li&gt;Introduction&lt;/li&gt;
  &lt;li&gt;List of Greivances&lt;/li&gt;
  &lt;li&gt;Conclusion&lt;/li&gt;
&lt;/ol&gt; </pre>

<p>{{EmbedLiveSample("로마_숫자로_표기", 400, 100)}}</p>

<h3 id="start_특성_사용하기"><code>start</code> 특성 사용하기</h3>

<pre class="brush: html">&lt;p&gt;Finishing places of contestants not in the winners’ circle:&lt;/p&gt;

&lt;ol start="4"&gt;
  &lt;li&gt;Speedwalk Stu&lt;/li&gt;
  &lt;li&gt;Saunterin’ Sam&lt;/li&gt;
  &lt;li&gt;Slowpoke Rodriguez&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("start_특성_사용하기", 400, 100)}}</p>

<h3 id="중첩_목록">중첩 목록</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item  &lt;!-- closing &lt;/li&gt; tag not here! --&gt;
    &lt;ol&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ol&gt;
  &lt;/li&gt;            &lt;!-- Here's the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("중첩_목록", 400, 150)}}</p>

<h3 id="정렬_목록_안의_비정렬_목록">정렬 목록 안의 비정렬 목록</h3>

<pre class="brush: html">&lt;ol&gt;
  &lt;li&gt;first item&lt;/li&gt;
  &lt;li&gt;second item      &lt;!-- Look, the closing &lt;/li&gt; tag is not placed here! --&gt;
    &lt;ul&gt;
      &lt;li&gt;second item first subitem&lt;/li&gt;
      &lt;li&gt;second item second subitem&lt;/li&gt;
      &lt;li&gt;second item third subitem&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;                &lt;!-- Here is the closing &lt;/li&gt; tag --&gt;
  &lt;li&gt;third item&lt;/li&gt;
&lt;/ol&gt;
</pre>

<p>{{EmbedLiveSample("정렬_목록_안의_비정렬_목록", 400, 150)}}</p>

<h2 id="Specifications" name="Specifications">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-ol-element', '&lt;ol&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "grouping-content.html#the-ol-element", "HTMLOListElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/lists.html#h-10.2', '&lt;ol&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("html.elements.ol")}}</p>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}</li>
 <li><code>&lt;ol&gt;</code> 요소와 유용하게 사용할 수 있는 CSS 속성
  <ul>
   <li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li>
   <li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li>
   <li>더 이상 사용하지 않는 <code>compact</code> 특성을 대체할 수 있는 {{cssxref("line-height")}}</li>
   <li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li>
  </ul>
 </li>
</ul>