텍스트 관련 태그

텍스트로 이루어진 정보는 수정이 편리한 장점이 있지만 텍스트의 양이 많을 수록 정보를 찾기 힘들다는 단점이 있다.

따라서, 크기나 색상, 스타일, 목록 등을 바꾸어 표시한다.

 

덩어리로 표시

* 제목 표시하기
<hn> 텍스트 </hn>
(h1이 가장 큰 제목이고 h6이 가장 작은 제목이다.)

* 단락 만들기
<p> 텍스트 </p>

* 줄 바꾸기
<br> 

* 수평 줄 넣기
<hr>

* 인용문 넣기
<blockquote> 텍스트 </blockquote>

* 입력하는 그대로 화면에 표시
<pre> 텍스트 <pre>

 

한 줄로 표시

* 굵게 표시하기
<strong> 텍스트 </strong>
<b> 텍스트 </b>
(육안으로는 차이가 느껴지지 않으나 <strong>을 사용한 부분을 강조되었다고 화면 낭독기가 알려준다.)

* 이탤릭체로 표시하기
<i> 텍스트 </i>
<em> 텍스트 </em>
(강조하고 싶을 때는 <em>을 사용하고, 관용구는 <i>를 사용한다.

* 인용 내용 표시하기
<q> 텍스트 </q>
(<blockquote>와 차이점은 줄바꿈 없이 다른 내용과 함께 한줄로 표시되고, 인용 내용에 따옴표를 붙여 표시한다.)

* 형광펜 효과
<mark> 텍스트 </mark>

* 줄바꿈 없이 영역 묶기
<span> 내용 </span>

* 동아시아 글자 표시
<ruby> 내용 <rt> 주석 </rt> </ruby>

 

목록으로 표시

* 순서 없는 목록 만들기
<ul>
    <li> 내용 </li>
    <li> 내용 </li>
    ...
</ul>

*순서 있는 목록 만들기
<ol>
    <li> 내용 </li>
    <li> 내용 </li>
    ....
</ol>

* 설명 목록 만들기
<dl>
    <dt> 제목 </dt>
    <dd> 설명 </dd>
    ....
</dl>

 

표 만들기

* 기본적인 표 만들기
<table>
    <tr>
    <td> 내용 </td>
    <td> 내용 </td>
        ....
    </tr>
    ....
</table>

* 행 또는 열 합치기
<td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </th>
<td rowspan="합칠 셀의 개수"> 내용 </td>
<th rowspan="합칠 셀의 개수"> 내용 </th>

* 표에 제목 붙이기
<caption> 표 제목 </caption>
<flgcaption> 표 제목 </flgcaption>
(<caption>은 중앙에 위치, <Flgcaption> 왼쪽에 위치)

* 표 구조 정의하기
<thead>
   <tr> ... </tr>
</thead>
<tbody>
   <tr> ... </tr>
</tbody>
<tfoot>
   <tr> ... </tr>
</tfoot>

---

본 내용은 이지스퍼블리싱의 'Do it! HtML5 + CSS3 웹 표준의 정석'을
참고하여 작성한 내용입니다.