기본 문서 구조
1. HTML 문서와DOCTYPE
웹 브라우저에게 앞으로 처리할 문서에 대한 내용을 알려주는 것.
<!DOCTYPE html>
<html>
</html>
HTML
복사
2. <html> 태그
<!DOCTYPE html>
<html>
</html>
HTML
복사
3. <head> 태그
•
웹 브라우저가 알아두어야 할 정보들을 입력하는 곳
•
문서에서 사용할 외부 파일들을 링크한다.
3.1. <title> 태그
브라우저의 제목 표시줄에 표시되는 내용
<!DOCTYPE html>
<html>
<head>
<title>문서제목</title>
</head>
</html>
HTML
복사
3.2. <meta> 태그
문자 인코딩 방법 및 문서의 키워드와 요약 정보를 지정한다.
<!DOCTYPE html>
<html>
<head>
<title>문서제목</title>
<meta charset="UTF-8">
</head>
</html>
HTML
복사
4. <body> 태그
<!DOCTYPE html>
<html>
<head>
<title>문서제목</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
HTML
복사
텍스트 관련 태그들
1. 텍스트를 덩어리로 묶어주는 태그
1.1. <hn> 태그
•
제목을 표시할 때 사용한다.
•
<h1> 부터 <h6> 까지 있다.
1.2. <br> 태그
•
줄을 바꿀 위치에 사용한다. 닫는 태그는 없다.
1.3. <hr> 태그
•
주제가 바뀔 때 분위기를 전환하는 용으로 사용한다.
•
수평 줄이 생긴다.
1.4. <p> 태그
•
입력한 내용 앞 뒤로 빈줄이 생기면서 텍스트 단락이 만들어진다.
1.5. <blockquoto> 태그
•
인용문을 넣는 태그이다.
•
들여쓰기가 된다.
1.6. <pre> 태그
•
소스에 표시한 공백이 그대로 표시된다.
•
프로그램 소스를 표시할 때 유용하다.
2. 텍스트를 한 줄로 표시하는 태그
2.1. <strong>, <b>
•
중요한 내용이라서 강조해야할 경우에는 <strong> 을 사용한다.
•
단순히 굵게 표시할 경우에는 <b> 를 사용한다.
2.2. <em>, <i>
•
흐름상 특정 부분을 강조하고 싶은 경우 <em> 을 사용한다.
•
단순히 이탤릭체로 표시하고 싶은 경우에는 <i> 를 사용한다.
2.3. <q>
•
줄바꿈 없이 다른 내용과 한 줄에 인용 내용을 표시한다.
•
인용 내용 앞뒤에 “” 가 추가된다.
2.4. <mark>
•
형광펜 효과를 위해 사용된다.
•
<mark> 태그로 묶은 부분의 배경색이 노란색으로 표시된다.
2.5. <span>, <div>
•
영역을 묶을 때 사용한다.
•
줄 안에서 인라인으로 묶고 싶다면 <span> 을 사용한다.
•
줄을 바꿔 단락으로 묶고 싶다면 <div> 를 사용한다.
2.6. <ruby>
•
동아시아 글자에 주석을 표시할 때 사용한다.
•
<ruby> 안에 <rt> 태그를 사용해서 주석을 표시한다.
<ruby>
漢 <rt> ㄏㄢˋ </rt>
</ruby>
HTML
복사
3. 목록을 만드는 태그
3.1. <ul>, <li>
•
순서 없는 목록을 나타낼 때 사용한다.
•
각 항목 앞에 불릿이 붙여진다.
•
CSS 의 list-sytle-type 속성으로 불릿을 수정한다.
3.2. <ol>, <li>
•
순서 있는 목록을 나타낼 때 사용한다.
•
<ol> 태그의 속성
◦
type 속성 : 불릿 앞의 숫자를 조정한다.
◦
start 속성 : 중간 번호부터 수정한다.
◦
reserved 속성 : 역순으로 표시
3.4. <dl>, <dt>, <dd>
<dl>
<dt>제목 1</dt>
<dd>설명 1</dd>
<dd>설명 2</dd>
<dt>제목 2</dt>
<dd>설명 1</dd>
<dd>설명 2</dd>
</dl>
HTML
복사
•
설명목록을 나타낼 때 사용한다.
•
제목과 그에 대한 설명으로 이루어진 목록을 나타낸다.
•
하나의 <dt> 에 여러개의 <dd> 값을 가질 수 있다.
4. 표를 만드는 태그
4.1. 표 태그
<table>
<tr>
<th>1 행 1 열</th>
<td>1 행 2 열</td>
</tr>
<tr>
<th>2 행 1 열</th>
<td>2 행 2 열</td>
</tr>
</table>
HTML
복사
•
<tr> : 행을 표현한다.
•
<th> : 제목 셀을 표현한다.
•
<td> : 셀을 표현한다.
4.2. colspan, rowspan 속성
<table>
<tr>
<th>이름</th>
<td></td>
<th>연락처</th>
<td></td>
</tr>
<tr>
<th>주소</th>
<td colspan="3"></td>
</tr>
<tr>
<th>자기 소개</th>
<td colspan="3"></td>
</tr>
</table>
HTML
복사
•
행 또는 열을 합치는데 사용한다.
4.3. <caption>
<table>
<caption>
<strong>제목</strong>
<p>부제목</p>
</caption>
<tr>....</tr>
...
</table>
HTML
복사
•
표의 제목을 나타내는 데 사용된다.
•
제목이 위쪽 중앙에 표시된다.
4.4. <figure>, <figcaption>
<figure>
<figcaption>
<table>
<caption>
<strong>제목</strong>
<p>부제목</p>
</caption>
<tr>....</tr>
...
</table>
</figcaption>
</figure>
HTML
복사
•
표의 제목을 나타내는 데 사용된다.
•
<figcaption> 의 위치에 따라 표의 위나 아래에 제목이 표시된다.
4.5. <thead>, <tbody>, <tfoot>
<table>
<thead>
<tr>
<th>1 행 1 열</th>
<th>1 행 2 열</th>
</tr>
</thead>
<tbody>
<tr>
<th>2 행 1 열</th>
<td>2 행 2 열</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>3 행 1 열</th>
<td>3 행 2 열</td>
</tr>
</tfoot>
</table>
HTML
복사
•
표의 구조를 제목 부분과 실제 본문 그리고 요약 부분이 있는 부분으로 나눈다.
•
시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해할 수 있다.
•
표의 본문이 길 경우 자바스크립트를 사용하여 제목과 바닥 부분을 고정하고 본문만 스크롤 되도록 할 수 있다.
4.6. <col>, <colgroup>
<table>
<colgroup>
<col style="width: 100px">
<col style="width: 300px">
<col style="width: 100px">
<col style="width: 300px">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
HTML
복사
•
<col> : 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다.
◦
<col> 태그에 <span> 속성을 사용해서 여러 열을 묶을 수 있다.
•
<colgroup> 태그로 여러 열을 묶을 수도 있다.
◦
묶는 열의 개수만큼 <col> 태그를 사용한다.
◦
닫는 태그 존재한다.
•
<col> 태그와 <colgroup> 태그는 <caption> 태그 뒤에, <tr>, <td> 태그 전에 사용해야 한다.
•
<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 한다.