목록 (ul, ol, li)

아래와 같이 목록을 나타내는 태그에는 ul,ol,li태그가 있습니다. 이러한 태그들은 꼭 글자만이 아니라 웹페이지상의 sub-menu를 구성하는데도 사용이 되기에 잘 알아두면 보다 효율적으로 사용을 할 수 있겠습니다.

  <h2>Ordered List</h2>
  <ol>
    <li>Toy Story</li>
    <li>Zootopia</li>
    <li>Inside Out</li>
  </ol>

  <h2>Unodered List</h2>
  <ul>
    <li>Toy Story</li>
    <li>Zootopia</li>
    <li>Inside Out</li>
  </ul>

Ordered List

1. Toy Story
2. Zootopia
3. Inside Out

Unodered List

• Toy Story
• Zootopia
• Inside Out

---

1. ol(Ordered List)

<ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다. ol에 사용할 수 있는 속성들은 다음과 같습니다.

1-1 type

-항목을 셀 때 사용할 카운터 유형입니다. type태그를 사용하면 a,b,c..또는 Ⅰ,Ⅱ,Ⅲ.. 순서로 목록을 표시할 수 있습니다.

'- a'는 소문자 알파벳,

• 'A'는 대문자 알파벳,
• 'i'는 소문자 로마 숫자,
• 'I'는 대문자 로마 숫자,
• '1' 는 숫자(기본값)을 나타냅니다.

1-2 start

항목을 셀 때 시작할 수. type이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 start="4"를 사용하면 됩니다.

※li태그의 value속성을 이용해서도 표현이 가능합니다. 아래의 두개의 코드는 같은 출력값을 보입니다.

  <ol start="4">
    <li>Toy Story</li>
    <li>Zootopia</li>
    <li>Inside Out</li>
  </ol>


  <ol>
    <li value="4">Toy Story</li>
    <li>Zootopia</li>
    <li>Inside Out</li>
  </ol>

4. Toy Story
5. Zootopia
6. Inside Out

1. Toy Story
2. Zootopia
3. Inside Out

1-3 reversed

• 목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.

2. ul(Unordered List)

<ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

2-1 요소의 중첩

아래와 같이 요소를 중첩해서 사용할 수 있습니다. 이는 ol태그와 ul태그를 함께 사용을 할 수도 있습니다. 단, li태그의 부모요소로 ol 또는 ul이 반드시 존재해야합니다.

  <ol>
    <li>First itme</li>
    <li>
      second itme
      <ul>
        <li>second item first subitem</li>
        <li>second item second subitem</li>
        <li>second item third subitem</li>
      </ul>
    </li>
  </ol>

1. First itme
2. second itme
   • second item first subitem
   • second item second subitem
   • second item third subitem