ol element - by. UXKM

요약 설명

<ol> 요소는 순서가 있는 목록(ordered list)을 나타내는 시맨틱 태그로, 항목의 순서가 의미를 갖는 경우에 사용됩니다.
내부에는 <li> 요소들이 포함되며, 브라우저는 기본적으로 숫자나 로마자 등으로 항목 앞에 순번을 표시합니다. 절차, 단계, 순위 등 순차적인 정보를 표현할 때 적합하며, type, start, reversed 등의 속성을 통해 표시 방식과 순서를 조절할 수 있습니다.

주요 역할 및 특징

  1. 순서가 중요한 목록
    • <ol> 요소는 항목 간의 순서가 중요한 경우에 사용됩니다.
    • 예: 단계별 지침, 우선순위가 있는 항목, 시간 순서 등.
  2. 항목 표시 방식
    • 기본적으로 숫자(1, 2, 3…)로 항목이 표시되며, type 속성을 사용해 로마 숫자, 알파벳 등으로 변경할 수 있습니다.
    • CSS로도 스타일을 커스터마이징할 수 있습니다.
  3. 구조적 의미 부여
    • <ol>은 문서의 구조를 명확히 하고, 목록이 순서가 있음을 나타냅니다.
    • 검색 엔진은 <ol>의 의미를 인식하여 콘텐츠를 분석합니다.
  4. 다른 요소와의 관계
    • <ol> 요소의 직계 자식으로는 반드시 <li> 요소만 포함해야 합니다.
    • 중첩된 <ol> 또는 <ul>을 사용하여 서브 목록을 만들 수 있습니다.

CSS 기본 값

<ol> 요소는 기본적으로 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

기본 문법

속성

[type] 선택 사항 <ol type="값">

목록 항목의 번호 스타일을 설정합니다.

값 :
1 : 기본값(생략 가능), 숫자(1, 2, 3…)
a : 소문자 알파벳(a, b, c…)
A : 대문자 알파벳(A, B, C…)
i : 소문자 로마 숫자(i, ii, iii…)
I : 대문자 로마 숫자(I, II, III…)

[start] 선택 사항 <ol start="항목의 시작 값">

목록 번호의 시작 값을 지정합니다.

[reversed] 선택 사항 <ol reversed>

목록 항목을 역순으로 표시합니다.

예제

<ol> 중첩(css counter 활용)

<ul> 중첩

접근성을 고려한 예제

주의사항

  • <ol> 요소의 직계 자식으로는 반드시 <li> 요소만 포함해야 하며, <li> 요소와 같은 계층에는 <li> 외의 다른 요소를 포함할 수 없습니다.
  • 순서가 중요하지 않은 경우에는 <ul>을 사용하세요.