개념

• 순서가 있는 목록을 나타내는 시맨틱 블록 레벨 요소
• 항목 순서가 의미에 영향을 줄 때 사용한다.

특징

• 자식으로 <li>만 포함하는 것이 원칙이다.
• list-style-type으로 숫자를 로마 숫자나 알파벳 등으로 변경 가능하다.
• start 속성으로 시작 번호 지정 가능하다.
• reversed 속성으로 연순도 가능하다.
• CSS counter로 고급 번호 스타일 구현이 가능하다.

예시

<ol start="4">
  <li>네 번째 단계</li>
  <li>다섯 번째 단계</li>
</ol>

<ol>
  <li>1단계</li>
  <li value="5">5단계(점프)</li>
  <li>6단계(이어짐)</li>
</ol>

<ol class="fancy">
  <li>수집</li>
  <li>정제</li>
  <li>분석</li>
</ol>

<style>
.fancy {
  list-style: none;
  counter-reset: step;
  padding: 0;
}
.fancy li {
  counter-increment: step;
  margin: 0.5rem 0 0.5rem 2rem;
  position: relative;
}
.fancy li::before {
  content: counter(step) ".";
  position: absolute;
  left: -2rem;
  width: 1.5rem;
  text-align: right;
  color: #2563eb;
  font-weight: 600;
}
</style>