[HTML] ol 태그

728x90

목 차

• 1. <ol> 태그란?
• 2. 기본 구조
• 3. 속성
• 3-1. type 속성
• 3-1-1. 기본값 (숫자 1, 2, 3, ...)
• 3-1-2. 대문자 알파벳 (A, B, C, ...)
• 3-1-3. 소문자 알파벳 (a, b, c, ...)
• 3-1-4. 로마 숫자 대문자 (I, II, III, ...)
• 3-1-5. 로마 숫자 소문자 (i, ii, iii, ...)
• 3-2. start 속성
• 3-3. reversed 속성
• 4. CSS 스타일링
• 4-1. decimal: 숫자 (기본값)
• 4-2. decimal-leading-zero: 01, 02, 03과 같이 0으로 시작하는 숫자
• 4-3. lower-alpha: 소문자 알파벳 (a, b, c)
• 4-4. upper-alpha: 대문자 알파벳 (A, B, C)
• 4-5. lower-roman: 소문자 로마 숫자 (i, ii, iii)
• 4-6. upper-roman: 대문자 로마 숫자 (I, II, III)
• 5. 중첩 사용
• 6. 마무리

반응형

 

1. <ol> 태그란?

• HTML의 ol 태그는 "순서가 있는 목록"(ordered list)을 나타내는 태그로, 항목 간에 명확한 순서가 있을 때 사용됩니다. ol 태그는 목록 항목을 번호나 문자를 통해 자동으로 표시하며, 각 항목은 li 태그(목록 항목)로 나타냅니다.

 

2. 기본 구조

• 브라우저가 자동으로 각 항목에 번호를 붙여 순서를 표시합니다.

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

 

3. 속성

3-1. type 속성

• type 속성을 사용하여 목록 항목의 번호 스타일을 변경할 수 있습니다.

 

3-1-1. 기본값 (숫자 1, 2, 3, ...)

<ol type="1">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

 

3-1-2. 대문자 알파벳 (A, B, C, ...)

<ol type="A">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

3-1-3. 소문자 알파벳 (a, b, c, ...)

<ol type="a">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

 

3-1-4. 로마 숫자 대문자 (I, II, III, ...)

<ol type="I">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

3-1-5. 로마 숫자 소문자 (i, ii, iii, ...)

<ol type="i">
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

3-2. start 속성

• start 속성을 사용하면 목록의 번호를 특정 값에서부터 시작할 수 있습니다.

<ol start="5">
  <li>다섯 번째 항목</li>
  <li>여섯 번째 항목</li>
  <li>일곱 번째 항목</li>
</ol>

5. 다섯 번째 항목
6. 여섯 번째 항목
7. 일곱 번째 항목

 

 

3-3. reversed 속성

• reversed 속성을 사용하면 목록의 순서를 역순으로 표시할 수 있습니다.

<ol reversed>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

4. CSS 스타일링

• ol 태그도 CSS를 사용해 더 많은 스타일링이 가능합니다. list-style-type 속성을 사용해 번호 스타일을 제어할 수 있습니다.

 

 

4-1. decimal: 숫자 (기본값)

ol {
  list-style-type: decimal; /* 숫자 (기본값)으로 표시 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

 

4-2. decimal-leading-zero: 01, 02, 03과 같이 0으로 시작하는 숫자

ol {
  list-style-type: decimal-leading-zero; /* 01, 02, 03과 같이 0으로 시작하는 숫자 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

4-3. lower-alpha: 소문자 알파벳 (a, b, c)

ol {
  list-style-type: lower-alpha; /* 소문자 알파벳으로 표시 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

 

4-4. upper-alpha: 대문자 알파벳 (A, B, C)

ol {
  list-style-type: upper-alpha; /* 대문자 알파벳으로 표시 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

4-5. lower-roman: 소문자 로마 숫자 (i, ii, iii)

ol {
  list-style-type: lower-roman; /* 소문자 로마 숫자로 표시 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

 

4-6. upper-roman: 대문자 로마 숫자 (I, II, III)

ol {
  list-style-type: upper-roman; /* 대문자 로마 숫자로 표시 */
}

1. 첫 번째 항목
2. 두 번째 항목
3. 세 번째 항목

 

5. 중첩 사용

• ol 태그는 다른 ol 또는 ul 태그와 함께 중첩해서 사용할 수 있습니다. 중첩된 순서가 있는 목록을 생성하며, 각 항목은 들여쓰기로 구분됩니다.

<ol>
  <li>첫 번째 항목
    <ol>
      <li>첫 번째 항목의 하위 항목</li>
      <li>두 번째 항목의 하위 항목</li>
    </ol>
  </li>
  <li>두 번째 항목</li>
</ol>

1. 첫 번째 항목
   1. 첫 번째 항목의 하위 항목
   2. 두 번째 항목의 하위 항목
2. 두 번째 항목

 

6. 마무리

• ol 태그는 항목 간에 명확한 순서가 있을 때 사용하는 매우 유용한 태그입니다. CSS와 속성들을 조합해 다양한 스타일과 동작을 구현할 수 있으며, 구조화된 콘텐츠를 표현할 때 자주 사용됩니다.

 

---

 

관련글 목록

[HTML] ul 태그

[HTML] a 태그

[HTML] a태그 noopener와 noreferrer 정리