텍스트 관련 태그들

텍스트를 덩어리로 묶어주는 태그

텍스트를 블록(block)으로 묶어 처리하는 태그

기본형	역할	설명
<hn> 제목 </hn>	제목 표시하기	제목 테스트는 보통 상단에 위치하며, n은1~6까지 들어갈 수 있고 숫자가 높을수록 크기가 커진다.
<p> 텍스트 </p>	단락 만들기	앞뒤에 줄바꿈이 있는 텍스트 덩어리이다. 많이 사용하는 텍스트이다.
<br>	줄 바꾸기	웹 브라우저 창에서 줄 바꾸기 위한 태그이다
<hr>	수평줄	수평줄을 삽입할 때 사용한다.
<blockquote> 인용 내용 </blockquote>	인용문	인용문을 넣기 위한 텍스트
<pre>텍스트</pre>	입력하는대로 화면에 표시 <preformat>	소스의 공백이 그대로 화면에 표시된다. <code>, <samp>, <kbd>같은 태그를 사용해 프로그램 소스를 표시할때도 사용한다.

 

 

텍스트를 한 줄로 표시하는 태그

줄바꿈 없이 텍스트를 표시하는 '인라인 레벨'태그이며, 이 태그들은 닫는 태그를 생략할 수 없음.

기본형	역할	설명
<strong> 텍스트 <strong>	굵게+강조표시	낭독기에서 강조됨, 경고나 주의사항에 사용
<b> 텍스트 </b>	굵게표시	문서의 키워드 표시
<i> 텍스트 </i>	이탤릭체로 표시 <italic>	텍스트를 비스듬히 이탤릭체로 표시
<em> 텍스트 </em>	이탤릭체로 강조 <emphasis>	비스듬히 강조표시
<q> 내용 </q>	인용 내용 표시 <quot>	줄바꿈 없이 한줄로 표시됨
<mark> 텍스트 </mark>	형광펜 효과	배경이 노란색으로됨HTML5부터 적용
<span> 내용 </span>	줄바꿈 없이 영역 묶기	텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어서 스타일을 적용할 때 표시
<ruby> 내용 <rt> 주석 </rt> </ruby>	동아시아 글자 표시하기	글자에 주석을 표시하기 위한 용도(한문을 위에 히라가나로 표시하는 등)

 

기타 텍스트 관련 태그

기본형	역할	설명
<abbr title=""> 텍스트 </abbr>	약자 표시	title을 함께 사용가능
<cite> 텍스트 </cite>	참고내용 표시	웹문서나 포스트에 사용
<code>텍스트 </code>	소스 코드	컴퓨터 인식을 위한 소스 코드
<kbd> 텍스트 </kbd>	사용자 입력 내용	키보드 입력이나 음성 명령 같은 사용자 입력 내용
<small> 텍스트 </small>	작게 표시	부가 정보처럼 작게 표시해도 되는 텍스트에 사용
<sub> 텍스트 </small>	아래첨자	아래첨자
<sup> 텍스트 </sup>	위첨자	위첨자
<s> 텍스트 </s>	취소선	글 가운데 가로줄 표시
<u> 텍스트 </u>	밑줄	글 아래 가로줄 표시

 

 

목록을 만드는 태그

기본형	역할	설명
<ul> 내용 </ul>	목록	순서가 필요하지 않은 목록(unordered list)만들때 사용
<li> 텍스트 </li>	각 목록의 내용 표시	목록 안에서 원이나 사각형같은 불릿(bullet)이 붙는다.
<ol> 내용 </ol>	순서가 필요한 목록	순서가 필요한 목록을 만들 때 사용, type, start, reversed같은 태그 속성 사용가능
<dl>      <dt> 제목 </dt>      <dd> 설명 </dd>      .... </dl>	설명 목록 만들기	<dl>태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록(description list)을 만듭니다. <dt> 태그는 제목을 만듭니다 <dd> 태그는 설명을 표시합니다.

 

 

표를 만드는 태그

기본형	역할	설명
<table>     <tr>         <td> 내용 </td>         <td> 내용 </td>         ...    <tr>     ... </table>	표 만드는 용도	<table>은 표를 만드는 태그이다. <tr>은 열을 나타내는 태그이다. <td>는 행의 1칸을 나타낸다. colspan, rowspan 속성 - 행 또는 열 합치기
<caption> 표 제목 </caption> <figcaption> 표 제목 </figcaption>	표에 제목 붙이기	<caption>태그는 <table> 태그 바로 다음에 사용한다. 표의 위쪽 중앙에 표시되며 안에 다른 태그를 사용해 여러줄로 표시하거나 텍스트를 꾸밀 수 있다. <figcaption> 태그는 설명글을 붙이고 싶은대상을 <figure> 태그로 감싸고 <figcaption>태그를 이용해 제목이나 설명글을 입력한다.
<thead>     <tr> ... </tr> </thead> <tbody>     <tr> ... </tr> </tbody> <tfoot>     <tr> ... </tr> </tfoot>	표 구조 정의	일부 표에서는 제목이 표시된 세로가 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약을 표시하기도 하는데, 이런 표의 각 셀은 제목이 있는 부분과 실제 내용이 있는 본문 그리고 요약 부분이 있는 부분으로 표의 구조를 나눠놓는 것이좋다. 본문이랑 요약부분은 위치가 바뀌어도 된다.
<col>	여러 열 묶어 스타일 지정	한 열에 있는 모든 셀에 같은 스타일을 적용, <span>과 함께 사용 가능
<colgroup>     <col>     ... <colgroup>	여러 열 묶어 스타일을 지정	<colgroup>태그 안에 묶는 열의 개수만큼 <col>태그를 넣어주면 된다. <caption>태그 뒤와 <tr>,<td>전에 사용해야한다. 태그안의<col>개수와 단독으로 사용한<col>의 갯수가 같아야 한다.