[두잇 HTML5+CSS3 웹표준의 정석] HTML Part2

텍스트 관련 태그들

<hn> 태그

-제목표시하기

:<h1>~<h>6까지 있으며 숫자가 작아질수록 글자의 크기가 크다.

 

<p> 태그

-단락만들기

:텍스트를 표시하는 단락을 만들때 사용하는 태그로 </p>태그를 만날때까진 줄바꿈 없이 텍스트를 한줄로 표시한다.

텍스트 단락변경을 하고싶은 경우에는 <br>을 사용하여 줄바꿈을 해준다. (닫는태그는 없음)

<blockquote> 태그

-인용문 넣기

:다른 블로그나 사이트에서 인용한 글을 넣을 때 사용하는데 이때 이 태그안에 들어간 인용문은 다른 텍스트들보다 안으로 들여 써진다.

<q> 태그

-인용내용 표시하기

:인용한 내용을 표시하기 위해서 사용하는 태그이다.

<blockquote>태그와 <q>태그의 차이점은?
<blockquote>태그는 줄이 바뀌어지고 다른내용과 구별되어지도록 안으로 들여지지만 <q>태그는 줄바꿈이 없고 다른 내용과 함께 한 줄로 표시된다. 또한 인용내용에 따옴표를 표시한다.

<pre> 태그

-입력한 그대로 화면에 표시하기

: 이 태그안에 코드를 작성하더라도 웹사이트에는 코드가 그대로 보여진다.

단 이 태그를 사용할 때에는 접근성에 대해서 고려해야한다. 왜냐하면 웹문서를 소리로 읽어주는 기계나 점자로 표시해주는 기계가 <pre>태그를 만난다면 건너뛰어버리기 때문에 이 내용을 알 수 있는 대체 텍스트를 추가해줘야한다.

 

<strong> 태그, <b>태그

-텍스트를 굵게 표시할 때 사용한다.

화면낭독기 기능 때문에 두 태그를 구분한다.
<strong> 굵게 강조할 텍스트 </strong> : 낭독기에서 강조되었다고 알려준다.
<b>굵게 표시할 텍스트</b>

<em> 태그, <I> 태그

-텍스트를 비스듬히 이탈릭체로 표시할 때 사용한다.

<em>이탈릭체로 강조할 텍스트</em>
<I>이탈릭체로 표시할 텍스트</I>

<mark> 태그

-형광펜효과

:형광펜 표과를 내고싶은 문장에 이 태그를 넣으면 텍스트를 강조할 수 있다.

<span> 태그

-줄바꿈 없이 영역 묶기

:태그 자체에는 의미가 없지만 단락 안에서 줄바꿈 없이 텍스트만 묶어 스타일을 적용하려고 할 때 주로 사용한다.

일부 텍스트가 아닌 단락을 통째로 묶고 싶을 때에는 <div>태그를 사용한다.

 

 

---

목록을 만드는 태그

<ul> 태그, <li> 태그

-순서 없는 목록 만들기

: 각 항목 앞에 작은 원이나 사각형같은 불릿(bullet)이 붙는다. (CSS에서 불릿을 수정할 수 있다.)

 

<ol> 태그, <li> 태그

-순서 있는 목록 만들기

: 각 항목 앞에 순서를 나타내는 숫자를 표시할 수 있다.

 

Type속성

:각 항목 앞에 기본값인 숫자가 기본으로 붙는데 <oi> 태그에 type 속성을 이용해서 숫자의 종류를 변경할 수 있다.

ex) <oi type="a">

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

 

start속성

:순서 목록은 기본적으로 1부터 시작하지만 start 속성을 이용해서 원하는 중간번호부터 시작할 수 있다.

ex) <oi type="a" start="3"> 

reversed속성

: 항목을 역순으로 표시합니다.

ex) <oi type="a" start="3"> 

 

<dl> 태그, <dt> 태그, <dd> 태그

-설명 목록 만들기

: 앞 태그들과는 다르게 앞에 기호나 숫자등이 붙지 않는다.

<dt> 태그: 제목 / <dd> 태그: 설명

 

<기본형>

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

 

---

표를 만드는 태그

<table> 태그, <tr> 태그, <td> 태그, <th> 태그

-기본적인 표 만들기

표	table
열	column
셀	cell
행	row

[기본적인 표 만들기]

 

 

1.<table> 태그로 표 자리를 만든다.

<table>

</table>

2.<tr> 태그로 2개의 행을 만듭니다.

<table>
	<tr>
    
	</tr>
	<tr>
    
	</tr>
</table>

3.<td> 태그로 각 행바다 셀 4개씩 만듭니다.

<table>
	<tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
	</tr>
	<tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
	</tr>
</table>

 

<th>태그

:표에 제목 셀 만들기

-제목이고 다른 글자보다 굵게 표시하고 셀의 중앙에 배치한다.

 

colspan, rowspan 속성

:행 또는 열 합치기

-기본적인 표의 형태에서 행이나 열을 합치는 속성이며 <td>태그나 <th>태그에서 이루어집니다.

<th rowspan="합칠 셀의 개수"> </th>
<td rowspan="합칠 셀의 개수"> </td>

<th colspan="합칠 셀의 개수"> </th>
<td colspan="합칠 셀의 개수"> </td>

 

<caption> 태그, <figcaption> 태그

:표의 제목을 붙일 때 사용하는 태그이다

 

<caption> 태그

: <table> 태그 바로뒤에 사용하고 표의 위쪽 중앙에 표시된다.

<figcaption> 태그

: <table> 태그 앞이나 뒤에 사용하며 <fig> 태그로 감싼 후 <figcaption>을 입력한다. <caption> 과는 다르게 중앙에 정렬되지 않는다.

<figure>
    <figcaption>
        <p></p>
    </figcaption>
</figure>

 

<thead> 태그, <tbody> 태그, <tfoot> 태그

: 표 구조 정의하기

-일부 표에서는 표 아래쪽에 합계나 요약 내용을 표시하기도 해서 구조를 나누어 놓는 것이 좋다.

HTML4에서는 <tfoot> 태그를 <tbody> 태그 다음에 쓰면 오류가 났기 때문에 앞에 사용해야했지만 HTML5에서는 앞에 놓아도 되고 뒤에 놓아도 된다.

 

<col> 태그, <colgroup> 태그

: 열에 스타일을 지정하거나 열을 몇개씩 묶어 스타일을 한꺼번에 지정하는것이다.

-span 속성을 이용해서 몇개의 열을 묶을 것인지 지정할 수 있다.

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

	파	파	노
	파	파	노

 

<table>
    <caption></caption>
        <colgroup>
            <col>
            <col span="2" style="background-color:blue;">
            <col style="background-color:yellow;">
        </colgroup>
</table>