HTML - 3

목록을 만드는 태그

• <ul>, <li> 태그 - 순서 없는 목록.    각 항목 앞에 불릿이 붙어짐. CSS의 list-sytle-type 속성으로 불릿 수정 가능

<ul>

<li> 내용 </li>                 옆과 같은 형식으로 사용

</ul>

• <ol>, <li> 태그 - 순서 목록.    각 항목 앞에 숫자가 붙어짐  **</li> 생략 가능
  

<ol>

<li> 내용 </li>                 옆과 같은 형식으로 사용

<li> 내용 </li>

</ol>

+) <ol> 태그의 속성 - 1) type 속성 : 불릿 앞의 숫자 조정.    2) start 속성 : 중간 번호부터 수정.    3) reversed 속성 : 역순 표시

• <dl>, <dt>, <dd> 태그 - 설명 목록.    <dl>은 '목록'을 만들고, <dt>는 '제목', <dd>는 '설명' 표시

<dt>안에 여러개의 <dd> 사용 가능

<dl>

<dt> 제목 </dt>                 옆과 같은 형식으로 사용

<dd> 설명 </dd>

</dl>

표를 만드는 태그

• <table> 태그 - 표 전체    /    <tr> 태그 - 행    /    <td> 태그 - 셀    /    <th> 태그 - 제목 셀

<table>

<tr>

<td> 내용 </td>                 옆과 같은 형식으로 사용

<td> 내용 </td>

</tr>

</table>

• colspan : 셀 가로로 합치기 (행)    /    rowspan : 셀 세로로 합치기 (열)

<td colspan="합칠 셀의 개수"> 내용 </td>    /    <th colspan="합칠 셀의 개수"> 내용 </th>

<td rowspan="합칠 셀의 개수"> 내용 </td>    /    <th rowspan="합칠 셀의 개수"> 내용 </th>

• <caption>, <figcaption> 태그 - 표에 재목 붙이기

<caption> 태그는 <table> 태그 바로 뒤에 사용. 표의 위쪽 중앙에 표시

<figcaption> 태그는 설명글 붙이고 싶은 대상을 <figure> 태그로 감싼 후 <figcaption>을 이용하여 제목이나 설명글 입력. 중앙 정렬x

<table> 보다 먼저 사용된다 -> 표 위에    /    </table> 보다 늦게 사용 -> 표 아래에 생성

<caption> 표 제목 </caption>

• <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기.    <thead>는 제목, <tbody>는 본문, <tfoot>은 요약

<thead>                                                                                                        <thead>

<tr> ~ </tr>                                                                                                     <tr> ~ </tr>

</thead>                                                                                                       </thead> 

<tbody>                                                                                                        <tfoot>

<tr> ~ </tr>                                                또는                                               <tr> ~ </tr>

</tbody>                                                                                                       </tfoot>

<tfoot>                                                                                                          <tbody>

<tr> ~ </tr>                                                                                                     <tr> ~ </tr>

</tfoot>                                                                                                         </tbody>

시각 장애인들 화면 판독기를 통해 표의 구조를 쉽게 이해 할 수 있다.

표의 분문이 있다면 JavaScript를 이용해 제목과 바닥 고정, 본문 스크롤이 가능하다

• <col>, <colgroup> 태그 - 열끼리 묶어 스타일 지정

<col> 태그 - 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용

<colgroup> 태그 - 여러 열 묶음. 묶는 열의 개수 만큼 <col> 사용

** <col>과 <colgroup>은 <caption> 뒤에, <tr>, <td> 전에 사용해야 함.

    <colgroup> 안에 있는 <col>을 비롯해 단독으로 사용하는 <col>의 개수와 표의 열의 개수가 같아야 함

<colgroup>

<col>

.........

</colgroup>