목록과 표 - ul&ol, dl, table, caption

 

 

1. ul , ol , li

   - ul : Unordered List, 순서가 없는 리스트

   - ol : Ordered List, 순서가 있는 리스트

      >  type 속성을 통해 목록의 순서표시를 다르게 할 수 있다.

          ex) type = "1" => 1,2,3... type="a" = a,b,c...

       > start 속성을 사용하여 처음 시작하는 숫자를 정할 수 있다

         ex) start = "5" => 5,6,7...

      > reversed 속성을 사용해 목록의 순서를 반대로 만들수 있다.

        ex) <ol> => 1,2,3,4

              <ol reversed> => 4,3,2,1...

   - li : List의 구성요소, ul태그와 ol 태그 내에서 사용한다.

      > li 태그 내에서 또 다른 ul이나 ol 태그를 사용할 수 있다.

리스트 출력
<ul>
    <li>첫번째 리스트</li>
    <li>
        두번째 리스트
        <ol>
            <li>2-1</li>
            <li>2-2</li>
            <li>2-3</li>
        </ol>
    </li>
    <li>세번째리스트</li>
</ul>

실행화면

  

2. dl, dt, dd

   > 용어와 정의를 나타낼때 사용한다.

<dl>
  <dt>Coffee</dt>
  <dd>Black hot drink</dd>
  <dt>Milk</dt>
  <dd>White cold drink</dd>
</dl>

실행결과

   - dl : dt와 dd를 감싸는 태그

   - dt : 용어를 의미한다.

   - dd : 정의를 의미한다.

 

3. table, tr, th, td

   > 표를 만들때 사용한다.

   - table : 테이블을 선언하는 태그

   - tr : table row, 행을 만들때 사용

   - th : table header, 테이블 제목이 되는 헤더 셀을 정의할 때 사용

   - td : table data, 테이블 내 데이터 셀을 정의할때 사용

      > colspan 속성을 사용하여 차지하는 영역의 개수를 정할 수 있다.

 

   > table 태그로 레이아웃을 만들수는 있지만, html5를 준수하고 싶다면,

      table 태그를 사용하여 레이아웃을 만드는것은 지양해야 한다.

 

   1) thead, tbody, tfoot

   : table에서 지정할 수 있는 시멘틱 태그

   - thead : 테이블의 header 부분, 가장 윗행을 의미한다.

   - tbody : 테이블의 본문, table body

   - tfoot : 테이블의 footer 부분, 가장 아래행을 의미한다.

   > 이러한 태그를 활용해 구획 별 css 스타일링이 용이해진다.

 

  2) caption

   : 테이블 설명 요소

   > table 태그내에 사용하여 표의 제목을 적는 데 사용된다.

   > table 요소 가장 첫번째 자식이어야 한다.

   > table이 아닌 요소는 figure 요소를 사용 후 figurecaption을 대신 사용한다.