목록

ul

• <ul> 태그는 정렬되지 않은 목록을 나타낸다.
• 보통 불릿으로 표현한다.

ol

• <ol> 태그는 정렬된 목록을 나타낸다.
• 보통 숫자 목록으로 표현한다.

- type 속성

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

- reversed 속성

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

- start 속성

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

li

• <li> 태그는 목록의 항목을 나타낸다.
• 반드시 정렬 목록( <ol> ), 비정렬 목록( <ul>, 혹은 메뉴( <menu> ) 안에 위치해야 한다.
• 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타낸다.

정의 목록

dl

• <dl> 태그는 설명 목록을 나타낸다.
• <dl> 은 <dt>태그와 <dd> 태그로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성한다.
• 주로 용어사전 구현이나 메타데이터(키-값 쌍 목록)를 표시할 때 사용한다.

dt

• <dt> 태그는 설명 혹은 정의 리스트에서 용어를 나타낸다.
• <dl> 태그 안에 위치해야 한다.
• 보통<dd> 태그가 뒤따르지만, 여러 개의 <dt> 태그를 연속해 배치하면 바로 다음 <dd> 태그로 한꺼번에 서술할 수 있다.
• 뒤따르는<dd> 태그가 <dt> 태그로 지정한 용어의 정의와 기타 관련 글을 제공한다.

dd

• <dd> 태그는 정의 목록 태그(<dl> )에서 앞선 용어( <dt> )에 대한 설명, 정의, 또는 값을 제공한다.

<dl>
    <dt>Denim (semigloss finish)</dt>
    <dd>Ceiling</dd>
 
    <dt>Denim (eggshell finish)</dt>
    <dt>Evening Sky (eggshell finish)</dt>
    <dd>Layered on the walls</dd>
</dl>

Denim (semigloss finish) Ceiling
Denim (eggshell finish) Evening Sky (eggshell finish) Layered on the walls

표

table

• <table> 태그는 행과 열로 이루어진 표를 나타낸다.

<table>
    <thead>
        <tr>
            <th colspan="2">The table header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

The table header
The table body	with two columns

tr

• 테이블 행 요소는 테이블의 <tr > 셀 행을 정의한다.
• <td> 및 <th> 태그가 혼합될 수 있다.

th

• <th> 태그는 셀을 테이블 셀 그룹의 헤더로 정의한다.
• 이 그룹의 정확한 특성은 scope 및 headers 속성으로 정의된다.

<table>
    <caption>Alien football stars</caption>
    <tr>
        <th scope="col">Player</th>
        <th scope="col">Gloobles</th>
        <th scope="col">Za'taak</th>
    </tr>
    <tr>
        <th scope="row">TR-7</th>
        <td>7</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Khiresh Odo</th>
        <td>7</td>
        <td>7,223</td>
    </tr>
    <tr>
        <th scope="row">Mia Oolong</th>
        <td>9</td>
        <td>6,219</td>
    </tr>
</table>

Alien football stars

Player	Gloobles	Za'taak
TR-7	7	4,569
Khiresh Odo	7	7,223
Mia Oolong	9	6,219

td

• <td> 태그는 데이터를 포함하는 표의 셀을 정의한다.

thead

• <thead> 태그는 테이블의 <thead> 열 헤드를 정의하는 일련의 행을 정의한다.

tbody

• <tbody> 태그는 테이블의 여러 행 <tr> 을 묶어서 표 본문을 구성한다.

tfoot

• <tfoot> 태그는

caption

• 표 설명 요소
• <caption> 태그는 표의 설명 또는 제목을 나타낸다.

<table>
    <caption>He-Man and Skeletor facts</caption>
    <tr>
        <td> </td>
        <th scope="col" class="heman">He-Man</th>
        <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
        <th scope="row">Role</th>
        <td>Hero</td>
        <td>Villain</td>
    </tr>
    <tr>
        <th scope="row">Weapon</th>
        <td>Power Sword</td>
        <td>Havoc Staff</td>
    </tr>
    <tr>
        <th scope="row">Dark secret</th>
        <td>Expert florist</td>
        <td>Cries at romcoms</td>
    </tr>
</table>

He-Man and Skeletor facts

	He-Man	Skeletor
Role	Hero	Villain
Weapon	Power Sword	Havoc Staff
Dark secret	Expert florist	Cries at romcoms