<!DOCTYPE>
<!DOCTYPE html>HTML 제일 첫 줄에 위치해야 하는 선언문이다. 모습은 태그와 비슷하지만 태그는 아니다. html파일이 무슨 버전의 html을 사용했는지 브라우저에 알려주는 역할을 한다. 이 선언문은 가장 최신 버전 HTML5 버전을 사용한다는 의미다.
head 구조
html태그 아래 head태그가 위치한다. 사이트 제목, 설명, 부가 정보, 기술적 내용이 들어간다.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>브라우저 탭에 보이는 제목이다</title>
</head><meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해준다.<meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 웹 페이지의 가로와 같다는 의미다. 해당 정보를 추가하지 않으면 모바일에서 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타난다.
table
html에서 표를 생성하기 위해 <table>, <thead>, <tbody>, <tr>, <th>, <td> 등의 태그를 사용한다.
- tr : table row의 줄임말
- th : table heading(가운데정렬, bold)
- td : table data
- rowspan(attribute) : 행 병합
- colspan(attribute) : 열 병합
기본적인 표를 만들어 위치를 확인해보자.
| Row 1, column 1 | Row 1, column 2 |
| Row 2, column 1 | Row 2, column 2 |
<table>
<tr>
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
</tr>
<tr>
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
</tr>
</table>th를 추가해보자.
| Dog | Cat | |
|---|---|---|
| 종 | Canine | Feline |
| 짖는소리 | Bark | Meow |
| Immature | Puppy | Kitten |
<table>
<tr>
<th></th>
<th>Dog</th>
<th>Cat</th>
</tr>
<tr>
<th>종</th>
<td>Canine</td>
<td>Feline</td>
</tr>
<tr>
<th>짖는소리</th>
<td>Bark</td>
<td>Meow</td>
</tr>
<tr>
<th>Immature</th>
<td>Puppy</td>
<td>Kitten</td>
</tr>
</table>행과 열을 병합해보자.
| 내용 | 장소 | |
|---|---|---|
| 1시 | HTML이란 | 101호 |
| 2시 | HTML실습 | 102호 |
| 3시 | 103호 | |
| 4시 | CSS란 | 104호 |
| 5시 | CSS실습 | 104호 |
| 6시 | 수업 없습니다. |
<table>
<tr>
<th></th>
<th>내용</th>
<th>장소</th>
</tr>
<tr>
<th>1시</th>
<td>HTML이란</td>
<td>101호</td>
</tr>
<tr>
<th>2시</th>
<td rowspan="2">HTML실습</td>
<td>102호</td>
</tr>
<tr>
<th>3시</th>
<td>103호</td>
</tr>
<tr>
<th>4시</th>
<td>CSS란</td>
<td>104호</td>
</tr>
<tr>
<th>5시</th>
<td>CSS실습</td>
<td>104호</td>
</tr>
<tr>
<th>6시</th>
<td colspan="2">수업 없습니다.</td>
</tr>
</table>
모르는것투성이