HTML 기본 요소 - 리스트 태그

HTML 리스트 (List)

리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단이다.
리스트의 종류

1. 순서가 없는 리스트 (unordered list)
2. 순서가 있는 리스트 (ordered list)
3. 정의 리스트 (definition list)

• 순서가 없는 리스트

  순서가 없는 리스트는 <ul>태그로 시작하며, 리스트 요소는 <li>태그로 시작한다.
  각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치한다.

  • 마커의 종류

    • disc : 검정색 작은 원 모양 (기본설정)
    • circle : 흰색 작은 원 모양
    • square : 사각형 모양

    <ul> <!-- list-style-type: disic -->
        <li>disic list1</li>
        <li>disic list2</li>
    </ul>
    <ul style="list-style-type: circle">
        <li>circle list1</li>
        <li>circle list2</li>
    </ul>
    <ul style="list-style-type: square">
        <li>square list1</li>
        <li>square list2</li>
    </ul>
  

  ▶ 실행결과

  • disic list1
  • disic list2

  • circle list1
  • circle list2

  • square list1
  • square list2

• 순서가 있는 리스트

  순서가 있는 리스트는 <ol>태그로 시작하며, 리스트 요소는 <li>태그로 시작한다.
  각각의 리스트 요소 앞에는 기본 마커(marker)로 아라비아 숫자가 위치한다.

  • 마커의 종류

    • decimal : 숫자 (기본설정)
    • upper-alpha : 영문 대문자
    • lower-alpha : 영문 소문자
    • upper-roman : 로마 숫자 대문자
    • lower-roman : 로마 숫자 소문자

    <ol> <!-- list-style-type: decimal -->
        <li>decimal list1</li>
        <li>decimal list2</li>
    </ol>
    <ol style="list-style-type: upper-alpha">
        <li>upper-alpha list1</li>
        <li>upper-alpha list2</li>
    </ol>
    <ol style="list-style-type: lower-alpha">
        <li>lower-alpha list1</li>
        <li>lower-alpha list2</li>
    </ol>
    <ol style="list-style-type: upper-roman">
        <li>upper-roman list1</li>
        <li>upper-roman list2</li>
    </ol>
    <ol style="list-style-type: lower-roman">
        <li>lower-roman list1</li>
        <li>lower-roman list2</li>
    </ol>
  

  ▶ 실행결과

  1. decimal list1
  2. decimal list2

  1. upper-alpha list1
  2. upper-alpha list2

  1. lower-alpha list1
  2. lower-alpha list2

  1. upper-roman list1
  2. upper-roman list2

  1. lower-roman list1
  2. lower-roman list2

• 정의 리스트

  정의 리스트는 용어와 그에 대한 정의를 모아놓은 리스트로, <dl>태그로 시작한다.
  <dt>태그에는 용어의 이름이 들어가고, <dd>태그에는 해당 용어에 대한 정의가 들어간다.

    <dl>
        <dt>호박</dt>
        <dd>- 박과의 한해살이 덩굴성 채소</dd>
        <dt>상추</dt>
        <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
    </dl>
  

  ▶ 실행결과

  호박

  - 박과의 한해살이 덩굴성 채소

  상추

  - 국화과의 한해살이 또는 두해살이풀

  
  
  

출처

TCP SCHOOL HTML