HTML 기본 요소-6

HTML 리스트

HTML 리스트(List)

1. 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미한다.
   HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있다.
   • 순서가 없는 리스트(unordered list)
   • 순서가 있는 리스트(ordered list)
   • 정의 리스트(definition list)

순서가 없는 리스트

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

   <ul>
       <li>사과</li>
       <li>멜론</li>
       <li>바나나</li>
   </ul>

• 사과
• 멜론
• 바나나

2. CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있다.

   - disc : 검정색 작은 원 모양 (기본설정)
   - circle : 흰색 작은 원 모양
   - square : 사각형 모양
   
   <ul style="list-style-type: circle">
       <li>수박</li>
       <li>참외</li>
       <li>옥수수</li>
   </ul>
   <ul style="list-style-type: square">
       ...
   </ul>

• 수박
• 참외
• 옥수수

순서가 있는 리스트

1. 순서가 있는 리스트는 <ol>태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 <li>태그로 시작합니다.
   각각의 리스트 요소 앞에는 기본 마커로 아라비아 숫자가 위치합니다.

   <ol>
       <li>사과</li>
       <li>멜론</li>
       <li>바나나</li>
   </ol>

1. 사과
2. 멜론
3. 바나나

2. CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다.

• decimal : 숫자 (기본설정)

• upper-alpha : 영문 대문자

• lower-alpha : 영문 소문자

• upper-roman : 로마 숫자 대문자

• lower-roman : 로마 숫자 소문자

  <ol style="list-style-type: upper-alpha">
      <li>수박</li>
      <li>참외</li>
      <li>옥수수</li>
  </ol>

1. 수박
2. 참외
3. 옥수수

정의 리스트(description list)

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

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

정의 리스트

호박 - 박과의 한해살이 덩굴성 채소 상추 - 국화과의 한해살이 또는 두해살이풀