텍스트, 목록, 표 관련 태그

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1. 텍스트 관련 태그

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

태그	설명
<hn> 제목 </hn>	제목 표시하기
<p> 텍스트 </p>	단락 만들기
<br>	줄 바꾸기
<hr>	분위기 전환을 위한 수평 줄 넣기
<blockquote> 인용 내용<blockquote>	인용문 넣기 (줄이 바뀌어 나타남)
<pre> 텍스트 </pre>	- 입력하는 그대로 화면에 표시하기 - 이 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시될 수 있다. - <code>, <samp>, <kbd>와 같은 태그를 사용해 프로그램 소스를 표시할 때도 이 태그와 함께 사용된다.

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

태그	설명
<strong> 굵게 강조할 텍스트 </strong>	경고나 주의 사항같은 중요한 내용 강조
<b> 굵게 강조할 텍스트 </b>	문서의 키워드처럼 단순히 글씨를 굵게 표시
<em> 이탤릭체로 표시할 텍스트 </em>	문장에서 흐름상 특정 부분을 이탤릭체로 강조
<i> 이탤릭체로 표시할 텍스트 </i>	기술적인 용어, 다른 언어의 관용구 등을 이탤릭체로 표시
<q> 인용 내용 </q>	줄 바꿈없이 인용 내용 표시
<mark> 텍스트 </mark>	형광펜 효과 내기
<span> 내용 </span>	- 줄바꿈 없이 영역 묶기 - 일부 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용됨
<rudy> 내용 <rt> 주석 </rt></rudy>	동아시아 국가들의 글자에 주석을 함께 표기 ex) 일본어 글자와 발음을 함께 표기

1) unordered list 순서없는 목록 만들기

블릿의 모양은 CSS의 list-style-type속성을 이용하면 지정할 수 있다.

<ul>
  <li> 내용 </li>
  <li> 내용 </li>
</ul>

2) ordered list 순서있는 목록 만들기

순서와 관련딘 몇 가지 속성을 가지고 있다.

예) type, start, reversed

<ol>
  <li> 내용 </li>
  <li> 내용 </li>
</ol>

3) 설명 목록 만들기

<dl>
  <dt> 제목 </dt>
  <dd> 설명 </dd>
</dl>

1) 기본적인 표 만들기

<table>  //테이블 생성
  <tr> //테이블의 행 생성
    <th> 제목 </th> //제목 셀 생성
    <td> 내용 </td> //테이블의 열 생성
    <td> 내용 </td>
    <td> 내용 </td>
  </tr>
</table>

2) 행 또는 열 합치기

태그	설명
<td colspan="합칠 셀의 개수"> 내용 </td> <td colspan="합칠 셀의 개수"> 내용 </td>	열 합치기
<td rowspan="합칠 셀의 개수"> 내용 </td> <td rowspan="합칠 셀의 개수"> 내용 </td>	행 합치기

3) 표 구조 정의하기

<thead>
  <tr> - </tr>
</thead>
<tbody>
  <tr> - </tr>
</tbody>
<tfoot>
  <tr> - </tr>
</tfoot>

4) 표에 제목 붙이기

- <caption>태그 이용

<table>
  <caption> 표 제목 </caption>
  //... : <td,tr>을 이용해 표 작성
</table>

- <figure>태그와 <figcaption>태그 이용

<figure>
  <figcaption> 
    //표 제목
  </figcaption>
  <table>
    //표
  </table>
</figure>

5) 여러 열 묶어 스타일 지정하기

주의할 점

//1. 하나의 열에 스타일을 지정
<col> 

//2. 여러 열을 묶어 스타일을 한꺼번에 지정
<colgroup>
  <col>
  ..
</colgroup>

//3. span태그로 열 몇개를 묶고 스타일 지정