html 5 : 목록과 표 ol, ul, li, dl, dt, dd, div, table, tr, th, td

ol

- 순서가 있는 목록

- 보통 숫자 목록으로 나타남

- type : a A i I 등 항목을 세는 유형 변경

- reversed : 거꾸로 순서를 셈

- start : 항목을 셀 때 시작하는 수  

ul

- 순서가 없는 목록

- ol과 ul은 중첩해서 사용할 수 있음

  <ol>
    <li>first</li>
    <li>
      second
        <ul>
          <li>second 1</li>
          <li>second 2</li>
          <li>second 3</li>
        </ul>
    </li> 
    <li>third</li>
  </ol>

 

li

- ol과 ul 안에 들어가는 리스트

 

dl dt dd div

- definition list 용어 설명이나 메타데이터(키-값 목록)을 설명할 때 사용

- dt : term 용어 dd : description 설명 

- dd 안에 여러 개의 dt, dd 값을 넣을 수 있음

- div : dt와 dd를 함께 묶어 스타일링을 할 경우 div로 묶어서 표현

table tr th td

- tr : table row / th : table head / td : table data

- scope(범위) : th가 행 또는 열을 대표할 때 col, row를 써서 나타낼 수 있음

- colspan(폭) : 값을 입력한 만큼 column 공간을 차지함

thead tbody tfoot

- 스타일링을 쉽게 하기 위해 구역을 나누는 태그들

- 여러개의 tbody를 가질 수 있음 

caption

- table의 전체 내용을 대표할 수 있는 제목을 설명함

- table의 첫번째 자식 태그로 사용해야 함

- 표의 제목 위치를 바꾸고 싶다면 css를 사용해야 함

<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>