HTML <ol> 태그, 순서 있는 목록 만들기

HTML <ol> 태그, 순서 있는 목록 만들기

웹 페이지에서 순서가 중요한 항목들을 나열할 때 <ol> 태그를 사용합니다. 이 태그는 리스트 아이템들이 순서대로 나열되며, 각각의 아이템은 자동으로 번호가 매겨집니다. 이 글에서는 <ol> 태그의 기본 사용법부터 고급 활용법까지 다양한 예제를 통해 알아보겠습니다.

 

 

목차

1. <ol> 태그 기본 사용법
2. 스타일 지정하기
3. 중첩된 순서 있는 목록
4. 속성 활용하기
5. 실전 예제
6. 결론

 

1. <ol> 태그 기본 사용법

<ol> 태그는 순서 있는 목록을 만들기 위해 사용됩니다. 각 항목은 <li> 태그로 감싸여야 합니다.

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

 

 

2. 스타일 지정하기

<ol> 태그의 기본 스타일은 숫자이지만, CSS를 사용하여 스타일을 변경할 수 있습니다. 예를 들어, 로마 숫자나 알파벳으로 변경할 수 있습니다.

ol {
    list-style-type: upper-roman;
}

결과:

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

 

 

3. 중첩된 순서 있는 목록

목록 안에 또 다른 목록을 포함시킬 수 있습니다. 중첩된 목록은 각기 다른 스타일을 가질 수 있습니다.

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

결과:

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

 

 

4. 속성 활용하기

<ol> 태그에는 목록의 시작 번호를 지정할 수 있는 start 속성과, 목록의 타입을 지정할 수 있는 type 속성이 있습니다.

start 속성

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

결과:

5. 다섯 번째 항목
6. 여섯 번째 항목

type 속성

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

결과:

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

 

 

 

 

5. 실전 예제

이제 다양한 속성과 스타일을 적용하여 더 복잡한 예제를 만들어 보겠습니다.

<style>
    .custom-list {
        list-style-type: lower-alpha;
    }
</style>

<ol start="3" class="custom-list">
    <li>세 번째 항목
        <ol type="i">
            <li>첫 번째 하위 항목</li>
            <li>두 번째 하위 항목</li>
        </ol>
    </li>
    <li>네 번째 항목</li>
</ol>

결과:

3. 세 번째 항목
   1. 첫 번째 하위 항목
   2. 두 번째 하위 항목
4. 네 번째 항목

 

 

6. 결론

<ol> 태그는 순서 있는 목록을 만들기 위한 필수 요소입니다. 기본 사용법부터 고급 활용법까지 다양한 방법을 익히면 웹 페이지에서 더욱 구조적이고 의미 있는 콘텐츠를 만들 수 있습니다. 이 가이드를 참고하여 다양한 상황에서 <ol> 태그를 활용해 보세요.