목록 (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>

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>

1-3 reversed