[HTML] 리스트로 목차 만드는 법

hi-choi 2020. 12. 19. 22:27

※ 목차

1. 기본 리스트 만들기 : <ul> 태그 + <li> 태그

2. 순서 리스트 만들기 : <ol> 태그 + <li> 태그

1. 기본 리스트 만들기 : <ul> 태그 + <li> 태그

기본 리스트를 만들 때에는 <ul> 태그와 <li> 태그를 사용합니다. 바깥쪽에 <ul> 태그를 작성하신 후 <ul> 태그 내부에 <li> 태그를 작성해주시면 됩니다. 목차의 수만큼 <li> 태그를 입력해주시고 <li> 태그 안에 목차로 사용할 텍스트를 입력해주시면 됩니다.

<head></head>
<body>
    <h3>기본 리스트</h3>
    <ul>
        <li>첫번째 목차</li>
        <li>두번째 목차</li>
        <li>세번째 목차</li>
    </ul>
</body>

2. 순서 리스트 만들기 : <ol> 태그 + <li> 태그

목차 앞에 번호가 붙어있는 순서 리스트를 만들 때에는 <ol> 태그와 <li> 태그를 사용합니다. 바깥쪽에 <ol> 태그를 작성하신 후 <ol> 태그 내부에 <li> 태그를 작성해주시면 됩니다. 목차의 수만큼 <li> 태그를 입력해주시고 <li> 태그 안에 목차로 사용할 텍스트를 입력해주시면 됩니다.

<head></head>
<body>
    <h3>순서 리스트</h3>
    <ol>
        <li>첫번째 목차</li>
        <li>두번째 목차</li>
        <li>세번째 목차</li>
    </ol>
</body>