텍스트 관련 태그
1. 블록 텍스트
<hn> 태그
-
heading. 제목에 쓰이는 태그
-
<h1>...<h6>총 여섯 가지가 있다.
<p> 태그
-
paragraph. 단락을 만들 때 쓰는 태그
-
<p>태그 내부에<br>태그 두개를 입력하면 단락이 나뉜 것 처럼 보이나 실제 웹 브라우저는 단락으로 인식하지 못한다.
<br> 태그
-
break. 줄바꿈할 때 쓰인다.
-
닫는 태그가 없다.
<hr> 태그
-
horizontal. 주제를 바꾸는 등의 상황에서 내용을 구분하기 위해 넣는 수평 줄 태그
-
입력 시 기본 가로선이 생기며 CSS로 가로선을 없앨 수 있다.
-
닫는 태그가 없다.
<blockquote> 태그
-
인용문 태그
-
기본으로 들여 써지며 인용한 사이트 주소가 명확할 경우 cite 속성으로 인용 사이트 주소 표시가 가능하다.
<pre> 태그
-
preformat. 입력한 그대로 화면에 표시하는 태그
-
소스에 표시한 공백 등이 브라우저에 그대로 표시된다.
-
<code>,<samp>,<kbd>같은 태그를 사용해 프로그램 소스를 보여줘야할 때에도 사용된다. -
<pre>태그가 적용되면 해당 부분이 읽히지 않기 때문에 웹 접근성을 위해서는 대체 텍스트를 추가하는 것이 좋다.
2. 인라인 텍스트
<strong>, <b> 태그
-
텍스트가 굵게 표시되는 태그
-
<strong>- 굵게 표시될 뿐만 아니라 화면낭독기에서 강조되었음을 알려준다. -
<bold>- 시각적으로 굵게 표시된다. -
중요도를 더 높이고 싶다면
<strong>태그를 여러 번 겹쳐서 쓸 수 있다.
<em>, <i> 태그
-
텍스트를 기울일 때 쓰는 태그
-
<em>- emphasis. 문장 흐름상 특정 부분 강조할 때 사용된다. -
<i>- italic. 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에 쓰인다. -
필요할 경우 CSS에서 색상이나 글자 크기 등을 조절할 수 있다.
<q> 태그
-
quote. 인용한 내용 표기하는 태그
-
<blockquote>는 인용 내용이 블록으로 나뉘지만<q>태그는 인라인으로 따옴표가 붙는 태그이다.
<mark> 태그
-
형광펜처럼 표시되는 태그
-
CSS background-color 설정으로 색상을 바꿀 수 있다.
<span> 태그
- 태그 자체로는 아무 의미가 없으나 텍스트 단락 안에서 줄바꿈 없이 일부 텍스트만 묶어 스타일을 적용할 때 사용된다.
<ruby> 태그
-
동아시아 국가들의 글자에 주석을 함께 표기하기 위한 용도로 사용된다.
-
<ruby>태그 안에<rt>태그로 표시한다.
<ruby> 내용 <rt> 주석 </rt> </ruby>
기타 텍스트 관련 태그
-
<abbr>- 약자 표시. title 속성과 함께 사용 가능함 -
<cite>- 웹 문서나 포스트에서 참고 내용 표시 -
<code>- 소스 코드 -
<kbd>- 키보드 입력이나 음성 명령 같은 사용자 입력 내용 -
<small>- 작게 표시해도 되는 텍스트 -
<sub>- 아래 첨자 -
<sup>- 위 첨자 -
<s>- 취소선 -
<u>- 밑줄
3. 목록
<ul>, <li> 태그 - unordered list
<ul>
<li> 목록 1 </li>
<li> 목록 2 </li>
</ul>-
작은 원이나 사각형의 불릿으로 목록이 생성된다.
-
CSS의 list-style-type 속성으로 불릿을 수정한다.
<ol>, <li> 태그 - ordered list
-
목록에 순서가 필요할 때 쓰인다.
-
여러 속성과 함께 사용되어 순서 표기와 시작하는 순서, 항목 역순 여부를 바꿀 수 있다
- type 속성 - 1(숫자 - 기본값), a(영문 소문자), A(영문 대문자), i(로마숫자 소문자), I(로마숫자 소문자)
- start 속성 - 순서를 중간 번호로 시작할 수 있다.
- reversed 속성 - 항목을 역순으로 표시한다.
-
</li>태그 생략 가능<li>여러 항목이 나열될 때</li>항목을 생략해도<li>태그를 만나면 자동으로</li>가 있는 것처럼 인식된다.
<ol>
<li> 목록 1
<li> 목록 2
<li> 목록 3
<li> 목록 4
</ol><dl>, <dt>, <dd> 태그 - description list
<dl>
<dt> 제목 </dt>
<dd> 설명 </dd>
...
</dl><dl>태그는 제목과 설명이 한 쌍인 설명 목록을 만든다.
4. 표
<table>, <tr>, <td>, <th> 태그
<table>
<tr>
<th> 제목 </th>
<td> 내용 </td>
<td> 내용 </td>
...
</tr>
...
</table>-
<th>태그- 다른 글자보다 굵고 셀 중앙에 배치된다.
-
colspan, rowspan 속성 - 행 또는 열 합치기
- colspan - 가로로 합쳐짐
- rowspan - 세로로 합쳐짐
<th rowspan = "합칠 셀의 개수"> 내용 </th>
<td colspan = "합칠 셀의 개수"> 내용 </td><caption>, <figcaption> 태그 - 표 제목
-
<caption>태그-
<table>태그 바로 밑에 사용된다. -
표 위쪽 중앙에 표시
-
다른 태그들을 사용해 제목을 여러 줄로 표시하거나 꾸밀 수 있다.
-
<table>
<caption>
<strong> 큰 제목 </strong>
<p> 작은 제목 </p>
</caption>
<tr>...</tr>
...
</table>-
<figcaption>-
글을 붙일 대상을
<figure>태그로 감싼 후 위나 아래에<figurecaption>태그로 제목을 입력한다. -
<caption>과 다르게 중앙 정렬되지 않는다.
-
<figure>
<figcaption>
<p> 제목 </p>
</figcaption>
<table>
</table>
</figure>-
aria-describedby 속성 - 표 설명 제공
- 화면 낭독기로 표를 읽어줄 때 도움이 되는 설명을 입력하고 해당 속성으로 표와 설명을 연결해줄 수 있다.
<p id="summary"> 표에 대한 설명 </p>
<table aria-describedby="summary">
<caption> </caption>
<tr> ... </tr>
</table><thead>, <tbody>, <tfoot> - 표 구조 정의
<thead> - 테이블 제목
<tbody> - 본문
<tfoot> - 요약
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
</tbody>
<tfoot>
<tr> ... </tr>
</tfoot>or
<thead>
<tr> ... </tr>
</thead>
<tfoot>
<tr> ... </tr>
</tfoot>
<tbody>
<tr> ... </tr>
</tbody>-
HTML4에서는
<tfoot>태그를<body>다음에 쓰면 오류가 생겨 앞에 놓았으나 HTML5에서는 앞이나 뒤 모두 가능하다. -
표 구조 정의 시 화면낭독기를 통해 표의 구조를 알기 쉬워진다.
-
표가 긴 경우에도 자바스크립트를 통해 본문만 스크롤 가능하도록 할 수 있다.
<col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정
-
하나 혹은 여러 열을 묶어 스타일을 한꺼번에 지정할 수 있다.
-
닫는 태그가 없다.
-
둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 사용하여 적용할 수 있다.
-
<caption>태그 뒤와<tr>,<td>태그 전에 사용해야 한다. -
<colgroup>태그 안에 있는<col>태그를 비롯해 단독으로 사용한<col>태그의 개수와 표의 열 개수가 같아야 한다. -
테이블은 행을 기준으로 만들기 때문에 행을 묶는 태그는 따로 없다. 그리고 열을 만드는 태그가 따로 없어 열을 조절할 때
<col>태그나<colgroup>태그를 따로 사용한다.
<colgroup>
<col>
<col span="2">
<col>
</colgroup>5. 기타
-
코드에 주석을 추가하고 싶을 때
<!— HTML 주석 —>/* CSS 주석 */ -
온라인 HTML 검사기 - http://validator.w3.org/
출처 : Do it! HTML5+CSS3 웹 표준의 정석
