<ol>

HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.

HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.

HTML
<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>
CSS
li {
  font:
    1rem "Fira Sans",
    sans-serif;
  margin-bottom: 0.5rem;
}
콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 `
  • ` 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
  • 가능한 콘텐츠 0개 이상의 `
  • `, `이 요소는 전역 특성을 포함합니다.
    • reversed
      • : 목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.
    • start
      • : 항목을 셀 때 시작할 수. type이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 start="4"를 사용하세요.
    • type
      • : 항목을 셀 때 사용할 카운터 유형.
        • 'a'는 소문자 알파벳,
        • 'A'는 대문자 알파벳,
        • 'i'는 소문자 로마 숫자,
        • 'I'는 대문자 로마 숫자,
        • '1' 는 숫자(기본값)을 나타냅니다.

        type은 아래의 모든 <li>에 적용되지만, type 특성을 가진 <li>는 그 값을 대신 사용합니다.

        !NOTE 항목을 각각의 숫자/문자로 참조하는 기술적 또는 법률적 문서가 아니라면 CSS list-style-type 속성을 대신 사용하세요.

    사용 일람


    보통 정렬 목록의 항목은 선행하는 숫자나 문자 등 마커와 함께 표시합니다.
    <ol><ul>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.
    <ol><ul>은 모두 목록을 나타냅니다. 차이가 있다면 <ol>에서는 순서가 중요하다는 점입니다. 예를 들어,
    • 단계별 요리법
    • 내비게이션
    • 영양정보에서 비율의 내림차순으로 정렬한 원재료 목록

    항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용하세요. 그렇지 않으면 <ul>을 사용할 수 있습니다.

    예제

    간단한 예제

    HTML
    <ol>
      <li>first item</li>
      <li>second item</li>
      <li>third item</li>
    </ol>
    

    로마 숫자로 표기

    HTML
    <ol type="i">
      <li>Introduction</li>
      <li>List of Greivances</li>
      <li>Conclusion</li>
    </ol>
    

    start 특성 사용하기

    HTML
    <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>
    

    중첩 목록

    HTML
    <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>
    

    정렬 목록 안의 비정렬 목록

    HTML
    <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>
    

    명세

    브라우저 호환성

    같이 보기

    • 리스트 관련 다른 요소: <ul>, <li>, <menu>
    • <ol> 요소와 유용하게 사용할 수 있는 CSS 속성
      • 서수를 표현할 방식을 지정하는 list-style 속성.
      • 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
      • 더 이상 사용하지 않는 compact 특성을 대체할 수 있는 line-height
      • 항목의 들여쓰기를 조정하기 위한 margin 속성.