[HTML 입문] 텍스트 관련 태그 ②

목록과 관련된 태그

1. <ul> 태그, <li> 태그 - 순서 없는 목록

<ul>

    <li> 텍스트 </li>

    <li> 텍스트 </li>

    …

</ul>

각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet>이 붙습니다. CSS의 list-style-type 속성을 이용해 불릿을 수정 할 수 있습니다.

2. <ol> 태그, <li> 태그 - 순서 있는 목록

<ol>

    <li> 텍스트 </li>

    <li> 텍스트 </li>

    …

</ol>

<ol> 태그에는 순서와 관련된 몇 가지 속성이 있습니다.

- type 속성 : 숫자의 종류를 다양하게 조절할 수 있다. 

속성 값	설명
1	숫자(기본값>
A	영문 대문자
a	영문 소문자
i	로마숫자 소문자
I	로마숫자 대문자

- start 속성 : 중간 번호부터 시작할 수 있다.

- reserved 속성 - 역순으로 표시한다.

- 여러 항목이 나열될 때 </li> 태그를 생략해도 됩니다.

3. <dl>, <dt>, <dd> 태그 - 설명 목록

<dl>

     <dt> 제목 </dt>

     <dd> 설명 </dd>

      …

</dl>

표와 관련된 태그

1. <table> 태그 - 표 전체 윤곽

기본적으로 표는 테두리 없이 표시되고 셀 구분을 쉽게 하려면 <table> 태그 안에 border 속성을 사용해 테두리를 표시

2. <tr> 태그 - 행

3. <td> 태그 - 각 행마다 들어갈 셀

4. <th> 태그 - 제목 셀

해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시합니다.

5. colspan 속성 - 열 합치기

<td colspan="합칠 열의 개수"> 텍스트 </td>

<th colspan="합칠 열의 개수"> 텍스트 </th>

6. rowspan 속성 - 행 합치기

<td rowspan="합칠 열의 개수"> 텍스트 </td>

<th rowspan="합칠 열의 개수"> 텍스트 </th>

7. <caption> 태그, <figcaption> 태그 - 표 제목

<caption> 표 제목 </caption>

<caption> 태그는 <table> 태그 바로 다음에 사용하고 표 제목은 표의 위 쪽 중앙에 표시됩니다. <caption> 안에는 다른 태그를 사용해 제목을 여러 줄로 표시하거나 텍스트를 꾸밀 수도 있습니다.

<figcaption> 태그는 figure와 caption의 합성어로 <figure> 태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력합니다. <caption> 태그와 달리 중앙에 표시되지 않으며, <table> 태그보다 앞에 사용하면 표 위에 제목이 표시되고 </table> 태그 다음에 사용하면 표 아래에 제목이 표시됩니다.

8. aria-describedby 속성 - 표에 대한 설명

<p id="summary">다음 표는 HTMl5를 지원하는 모던(Modern Browser)를 정리한 것입니다. 최신 버전일수록 HTML5를 좀더 많이 지원하기 때문에 최신 버전을 다운로드하는 것이 좋습니다. </p>

    <table border="1" aria-describedby="summary">

화면 낭독기에서 표를 읽어줄 때 표 설명을 별도의 문장으로 작성한 후 <table> 태그 안에 aria-describedby 속을 추가해 연결하면 표를 이해하는 데 도움이 됩니다.

9. <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의

<thead>

     <tr> … </tr>

</thead>

<tbody>

     <tr> … </tr>

</tbody>

<tfoot>

     <tr> … </tr>

</tfoot>

table의 t와 제목 부분(head), 본문(body), 요약 부분(foot)이란 말이 합쳐진 태그들입니다. 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다. 그리고 표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 <thead> 부분과 <tfoot> 부분은 표의 위아래에 고정하고 <tbody> 부분만 스크롤되도록 만들 수 있습니다.

- HTML5에서는 <tfoot> 태그를 <tbody> 태그 앞이나 뒤 어디든 써도 상관없다.

9. <col>, <colgroup> 태그 - 여러 열에 스타일 지정

<col>

<col> 태그는 한 열에 있는 모든 셀에 같은 스타일을 적용할 때 사용합니다. 닫는 태그는 없습니다.

<colgroup>

     <col>

     …

</colgroup>

<colgroup> 태그는 여러 열을 묶어 스타일을 적용할 수 있는 데 <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣어야 합니다. 

- <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다.

- <colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.

기타 텍스트 관련 태그

1. <abbr> 태그 - 약자 표시

<p><b><abbr title="Internet of Things">IoT</abbr></b>란 각종 사물에 센서와 통신 기능을 내장해 인터넷에 연결하는 기술을 의미한다.</p>

2. <cite> 태그 - 웹문서나 포스트에서 참고 내용 표시

<p>내가 경험한 가장 흥미진진한 일은 누군가를 만나는 일이다-영화, <cite>'비포선셋' </cite> 중</p>

3. <code> 태그 - 컴퓨터 인식을 위한 소스 코드

<pre><code> function savetheLocal(){.....}</code></pre>

4. <kbd> 태그 - 키보드 입력이나 음성 명령 같은 사용자 입력 내용

<p>웹 화면을 다시 불러오려면 <kbd>F5</kbd>키를 누릅니다</p>

5. <small> 태그 - 텍스트를 작게 표시

<p>가격 : 13,000원 <small>(부가세 별도)</small></p>

6. <sub> 태그 - 아래 첨자

<p>무르이 화학식은 <b>H₂0</b>다</p>

7. <sup> 태그 - 위 첨자

<p>E = mc² </p>

8. <s> 태그 - 취소선

<p><s>34,000원</s><strong>19,000원</strong></p>

9. <u> 태그 -  밑줄

<p>링크 표시 용도가 아니라 단순히 밑줄을 긋는다면 <u> u태그</u></p> 

<출처> Do It! HTML5+CSS33 웹 표준의 정석