2023. 10. 3. 19:08ㆍHTML5
`<ol>` 요소는 순서 있는 목록(ordered list)을 생성하는 데 사용됩니다. 순서 있는 목록은 각 항목이 번호 또는 다른 순서 지시자(예: 알파벳, 로마 숫자)로 표시되며 항목 간에 순서가 중요한 경우에 사용됩니다.
아래는 `<ol>` 요소의 기본 사용법 및 주요 특징을 설명한 예제입니다:
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
위의 코드에서 `<ol>` 요소는 순서 있는 목록을 시작하며 `<li>` (list item) 요소는 각 항목을 정의합니다. 브라우저는 목록 항목을 자동으로 번호로 표시할 것입니다.
`<ol>` 요소의 몇 가지 중요한 특징은 다음과 같습니다:
1. 자동 번호링: `<ol>` 요소의 자식 `<li>` 요소는 자동으로 숫자로 번호가 매겨집니다. 기본값은 1부터 시작하며 순서대로 증가합니다.
2. 순서 지시자 변경: `<ol>` 요소의 `type` 속성을 사용하여 순서 지시자(기본값은 "1")를 변경할 수 있습니다. 예를 들어, `type="A"`를 설정하면 알파벳 대문자(A, B, C...)로 번호가 매겨집니다.
<ol type="A">
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
- 첫 번째 항목
- 두 번째 항목
3. 리스트 스타일: 순서 있는 목록은 브라우저에서 기본 스타일을 가집니다. 이 스타일을 CSS를 사용하여 변경하거나 사용자 정의할 수 있습니다.
4. 중첩된 목록: `<ol>` 요소 내에 다른 `<ol>` 요소나 `<ul>`(순서 없는 목록) 요소를 중첩하여 복잡한 리스트 구조를 만들 수 있습니다.
5. 세부 정보: `<ol>` 요소의 `start` 속성을 사용하여 시작 번호를 지정할 수 있습니다. 예를 들어, `start="5"`로 설정하면 목록이 5부터 시작합니다.
<ol start="5">
<li>다섯 번째 항목</li>
<li>여섯 번째 항목</li>
</ol>
- 다섯 번째 항목
- 여섯 번째 항목
순서 있는 목록은 문서의 구조화와 가독성을 높이는 데 유용하며 목록 항목 간의 상대적인 중요성이나 순서를 표현하는 데 사용됩니다.
'HTML5' 카테고리의 다른 글
| [HTML5] <src> 와 <href> 뭐가 다를까? (0) | 2024.06.27 |
|---|---|
| [HTML5] 홈페이지 소개 <header> (0) | 2023.10.04 |
| [HTML5] 문장을 하나의 단락으로 만들어 주는 <p>and</p> (0) | 2023.10.03 |
| [HTML5] 드롭다운 메뉴 <select><option value="option1">옵션1</option></select> (0) | 2023.10.01 |
| [HTML5] 나이(숫자) 입력 양식 폼 <type="number"> (0) | 2023.10.01 |