> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/html-and-css/html/undefined-4/html-1.md).

# 순차/ 비순차 목록

## HTML 목록 디자인

[비순차 목록](https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul)(Unordered List), [순차 목록](https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol)(Ordered List), [목록 아이템](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)(LIst Item)

* 목록(List)
  * 순차 (ordered) : `<ol>`
  * 비순차 (unordered) : `<ul>`
* 목록 아이템 (List Item)
  * `li`은 `ul`, `ol` 안에 들어갈 수 있다.
* 중첩해서 사용 가능하다.
  * `<ul>`안에 `<ul>`이 또 들어갈 수 있다.
  * `<ul>`안에 `<ol>`이 들어갈 수 있다.
* `<ul>` 또는 `<ol>` 요소 안에는 `<li>` 요소만 사용 가능하다.&#x20;

### 예시 &#x20;

```markup
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- 중첩목록 -->
<ul>
  <li>item-1</li>
  <li>
    item-2
    <!-- </il> 태그를 여기에 입력하지 않음, 확인하기 -->
    <ul>
      <li>item-2-1</li>
      <li>
        item-2-2
        <ul>
          <li>item-2-2-1</li>
          <li>item-2-2-2</li>
        </ul>
      </li>
    </ul>
    <!-- </li> 태그입력 -->
  </li>
</ul>

<!-- 비순차 목록 안에 순차 목록 -->
<ul>
  <li>item-1</li>
  <li>
    item-2
    <ol>
      <li>item-2-1</li>
      <li>item-2-2</li>
    </ol>
  </li>
</ul>
```