HTML에서 목록, 표 요소로 쓰이는 태그를 정리해봤다.

---

<ol> Tag

<ol> : 정렬된 목록을 나타낸다.

• 별도의 설정이 없으면 숫자 목록으로 표현한다.

• 0개 이상의 <li>요소를 가지고 있어야 한다.

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

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

항목을 셀 때 사용할 카운터 유형

• 'a' : 소문자 알파벳
• 'A' : 대문자 알파벳
• 'i' : 소문자 로마 숫자
• 'I' : 대문자 로마 숫자
• '1' : 숫자 (기본값)

  type 속성에 넣어 사용한다.

Example

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol

---

<ul> Tag

<ul> : 정렬된 목록을 나타낸다.

• 별도의 설정이 없으면 불릿(bullet) 목록으로 표현한다.

Example

<ul> 중첩 예제

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

깊이에 따라 다른 모양의 불릿이 사용된다.

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/ul

Q) <ol>과 <ul>을 섞어서 못쓰나요? 🤔

A) 가능합니다.

• 비정렬 목록 안의 정렬 목록
• 정렬 목록 안의 비정렬 목록

비정렬 목록 안의 정렬 목록

<ul>
  <li>first item</li>
  <li>second item
  <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
  <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

정렬 목록 안의 비정렬 목록

<ol>
  <li>first item</li>
  <li>second item      <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ul>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ol>

---

<dl> Tag

<dl> : 설명 목록을 나타낸다.

• 주로 용어사전 구현, 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.

• <dt>로 표기한 용어와 <dd>요소로 표기한 설명 그룹의 목록을 감싸 설명 목록을 생성한다.
  - <dt> & <dd> 는 쌍으로 이루어져있다.

• 하나의 용어와 하나의 정의 / 여러 개의 용어와 하나의 정의 / 하나의 용어와 여러 개의 정의
  로 사용 가능하다.

• <dd>에 대한 들여쓰기가 기본적으로 설정되어있다.

Example

<dl>
    <dt>Beast of Bodmin</dt>
    <dd>A large feline inhabiting Bodmin Moor.</dd>

    <dt>Morgawr</dt>
    <dd>A sea serpent.</dd>

    <dt>Owlman</dt>
    <dd>A giant owl-like creature.</dd>
</dl>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/dl

---

<table> Tag

<table> : 행과 열로 이루어진 표를 나타낸다.

• 복잡한 형태의 데이터를 2차원 형태로 쉽게 보이도록 만들 수 있다.

• <table>로 Layout을 만들지 말것!!
  - Layout은 구획 태그를 따로 사용하자.

Example

<table>
    <tr>
        <th scope="col">나라이름</th>
        <th scope="col">수도</th>
        <th scope="col">인구</th>
    </tr>

    <tr>
        <th scope="row">한국</th>
        <td>서울</td>
        <td>5100만</th>
    </tr>

    <tr>
        <th scope="row">미국</th>
        <td>워싱턴 D.C.</td>
        <td>3억</th>
    </tr>

    <tr>
        <th scope="row">태국</th>
        <td>방콕</td>
        <td>6900만</th>
    </tr>
    
    <tr>
        <td colspan="2">합계</td>
        <td>4억 2000만</th>
    </tr>
</table>

• <tr> : row (행) 을 나타낸다.

• <td> : column (열) 을 나타낸다.

• <th> : table head 로써, 행이나 열의 대표 명칭을 나타낸다.
  - 굵은 글씨로 표시된다.
  - scope 속성을 사용해 대표하는 항목을 지정할 수 있다. (col 또는 row)

• colspan 속성을 사용해 열이 차지하는 영역을 지정하여 늘릴 수 있다. (colspan = "합칠 칸 수")
  
  

Q) <table> 내에서 구획은 못나누나요? 🤔

A) <thead>, <tbody>, <tfoot> 세 가지를 사용해서 나눌 수 있습니다.

• 표 내에서 구획을 나누면 내용을 쉽게 유추할 수 있다.

• 대부분의 데이터형 표는 머리, 몸통, 발 로 이루어져있다.

• 추후 구획별 CSS style 적용이 용이해진다.

• <tbody>요소는 여러 개 쓰일 수 있다. (<thead>, <tfoot> = 하나만 존재)

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/table

---

<caption> Tag

<caption> : 표의 설명 또는 제목을 나타낸다.

• 사용하기 위해서는 무조건 <table>의 가장 첫 번째 자식이어야 한다.

• 기본적으로 표 위에 가운데 정렬되어 제목으로 나타난다.

• 비슷한 사용 예로 <figure>의 <figcaption>요소가 있다.

Example

<table>
  <caption>Example Caption</caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>

🦊 MDN Link : https://developer.mozilla.org/ko/docs/Web/HTML/Element/caption