02-1 텍스트를 덩어리로 묶어 주는 태그
1.<hn>태그 : 제목 표시하기
<h1>이 가장 큰 제목이고 <h6>이 가장 작은 크기의 제목이다.
2.<p>태그: 단락 만들기
'단락'이란 앞뒤에 줄바꿈이 있는 텍스트 덩어리를 말한다.
3.<br>태그: 줄 바꾸기
텍스트 단락에서 줄바꿈을 하더라도 웹 브라우저 창에는 줄바꿈 없이 한 줄로 표시된다.
4.<hr>태그: 수평 줄 넣기
5.<blockquote>태그: 인용문 넣기
이때 인용한 문장은 다른 텍스트보다 안으로 들여 써지므로 다른 텍스트와 구별된다. 인용한 사이트 주소가 명확할 경우, cite 속성을 이용해 인용 사이트 주소를 표시할 수도 있다.
6.<pre>태그: 입력하는 그대로 화면에 표시하기
HTML에서는 아무리 많은 공백을 넣더라도 브라우저 창에는 한 개의 공백만 표시된다. 이 태그를 사용할 경우, 소스에 표시한 공백이 브라우저에 그대로 표시된다.
02-2 텍스트를 한 줄로 표시하는 태그
1.<strong>태그, <b>태그: 굵게 표시하기
눈으로 보기에는 차이가 느껴지지 않는 두 태그를 구분하는 이유는 화면 낭독기에서의 기능 때문이다. 화면 낭독기에서는 강족하고 싶은 부분을 굴게 표시하더라도 내용을 눈으로 보는 것이 아니기 때문에 그 부분이 강조된 것인지, 다른 내용과 구분하기 위해 단지 굵게 표시한 것인지 구별하지 못한다.
강조해야 할때는 <strong>을 사용한다.
2.<em>태그, <i>태그: 이탤릭체로 표시하기
문장에서 흐름상 특정 부분을 강조하고 싶을 때는 <em>태그를 사용하고, 마음 속의 생각이나 꿈, 기술적인 용어, 다른 언어의 관용구 등에는 <i>태그를 사용합니다.
3.<q>태그: 인용 내용 표시하기
인라인 레벨태그이기 때문에 줄바꿈 없이 다른 내용과 함께 한 줄로 표시되고 인용 내용을 구별할 수 있도록 인용 내용에 따옴표를 붙여 표시한다.
4.<mark>태그: 형광펜 효과 내기
5.<span>태그: 줄바꿈 없이 영역 묶기
6.<ruby>태그: 동아시아 글자 표시하기
동아시아 국가들의 글자에 주석을 함께 표시하기 위한 용도로 사용되며 주석으로 표시할 내용을 <ruby>태그 안에 <rt> 태그로 표시한다.
02-3 목록을 만드는 태그
1.<ul>태그, <li>태그>: 순서 없는 목록 만들기
순서가 필요하지 않은 목록을 만들 때는 <ul>태그를 사용하고 <ul>태그 안에 <li>태그를 사용해 각 항목을 표시한다. CSS의 list-style-type 속성을 이용해 불릿을 수정한다.
2.<ol>태그, <li>태그: 순서 목록 만들기
항목을 나열하되 순서가 필요한 목록을 만들 때 사용한다. 속성들을 사용하여 목록의 숫자 표기 방법이나 시작하는 숫자 등을 바꿀 수 있다.
-<ol> 태그 속성:
1) type 속성: <ol>태그는 각 &nbs항목 앞에 1,2, ...같은 숫자가 기본으로 붙는데 type 속성을 이용해 숫자의 종류를 다양하게 조절할 수 있다. CSS의 list-style-type 속성을 이용해 지정할 수 도 있다.
속성 값 설명 1 숫자(기본값) a 영문 소문자 A 영문 대문자 i 로마숫자 소문자 I 로마숫자 대문자
2) start 속성: 순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있다.
3) reversed 속성: 항목을 역순으로 표시한다.
3.<dl>, <dt>, <dd> 태그: 설명 목록 만들기
<dl>태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록을 만듭니다.
기본형)
<dl>
<dt> 제목</dt>
<dd>설명</dd>
...
</dl>참고) W3C HTML 검사기
웹 브라우저에서 원하는 결과가 나왔더라도 HTML 문법에 맞게 작성되었는지, 웹 표준에 어긋나는 부분은 없는지 확인해 보아야 한다. 온라인 HTML 검사기
02-4 표를 만드는 태그
1.<table>, <tr>, <td>, <th> 태그: 기본적인 표 만들기
기본형)
<table>
<tr>
<td> 내용 </td>
<td> 내용 </td>
...
</tr>
...
</table>1) 기본적인 표 만들기
ex) 행이 2개이고 열이 3개인 표를 만들기
<tr>태그로 행을 먼저 만든다.
그 다음 <td>태그로 각 행마다 셀을 3개씩 만든다.
<table>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
<tr>
<td> ... </td>
<td> ... </td>
<td> ... </td>
</tr>
</table>2) <th>태그: 표에 제목 셀 만들기
제목의 경우, 다른 글자보다 굴게 표시하고 셀의 중앙에 배치하는데 <th>태그를 사용ㅎ면 이런 과정을 간단히 줄이면서 제목 셀을 만들 수 있다.
3)colspan, rowspan 속성: 행 또는 열 합치기
colspan 속성: 몇 개의 셀을 가로로 합칠지 정한다.
rowsapn 속성: 몇개의 셀을 세로로 합칠지 정한다.
<td colspan="합칠 셀의 개수"> 내용 </td>
<td rowspan="합칠 셀의 개수"> 내용 </td>
colsapn 사용
rowspan 사용
2.<caption>태그, <figcaption>태그: 표에 제목 붙이기
1)<caption>태그: <caption>태그는 <table> 태그 바로 다음에 사용한다. <caption>태그를 사용한 표 제목은 표의 위쪽 중앙에 표시된다.
ex)
| 브라우저 | 제조업체 | 다운로드 |
|---|---|---|
| 크롬 | 구글 | ... |
| 파이어폭스 | 모질라 | ... |
| 엣지 | 마이크로소프트 | ... |
2)<figcaption>태그: <figcaption>태그는 figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력한다. 이 경우 <caption>태그는 사용하지 않으며 <caption>태그와 달리 중앙에 정렬되지 않는다. <table>태그 보다 앞에 사용하면 표 위에 제목이 표시되고, </table>태그 다음에 추가하면 표 아래에 제목이 표시된다.
ex)
국내에서 자주 사용하는 모던 브라우저
| 브라우저 | 제조업체 | 다운로드 |
|---|---|---|
| 크롬 | 구글 | ... |
| 파이어폭스 | 모질라 | ... |
| 엣지 | 마이크로소프트 | ... |
3) aira-describedby 속성: 표에 대한 설명 제공하기
화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후 <table>태그안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는데 도움이 된다.
3.<thead>, <tbody>, <tfoot>태그: 표 구조 정의하기
제목 부분 -> thead
본문 부분 -> tbody
요약 부분 -> tfoot
기본형)
<thead>
<tr></tr>
</thead>
<tbody>
<tr></tr>
</tbody>
<tfoot>
<tr></tr>
</tfoot>-
<col>, <colgroup>태그: 여러 열 묶어 스타일 지정하기
표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있다.
<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없다.
만약<col>태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있다.<colgroup>태그를 사용해서도 여러 열을 묶어 스타일을 적용할 수 있는데<colgroup>태그 안에 묶는 열의 개수만큼<col>태그를 넣으면 된다.주의할점)
<col>태그와 <colgroup>태그는<caption>태그뒤와<tr>, <td>태그전에 사용해야 한다는 점이다.
