순차/ 비순차 목록

HTML 목록 디자인

비순차 목록(Unordered List), 순차 목록(Ordered List), 목록 아이템(LIst Item)

• 목록(List)

  • 순차 (ordered) : <ol>

  • 비순차 (unordered) : <ul>

• 목록 아이템 (List Item)

  • li은 ul, ol 안에 들어갈 수 있다.

• 중첩해서 사용 가능하다.

  • <ul>안에 <ul>이 또 들어갈 수 있다.

  • <ul>안에 <ol>이 들어갈 수 있다.

• <ul> 또는 <ol> 요소 안에는 <li> 요소만 사용 가능하다.

예시

<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>