반응형
안녕하세요. 오늘은 html의 제목, 목록, 표에 대해 간단히 알아보겠습니다.
코드 블록 사용을 모르고 있었어요.........
오늘부터는 코드 블록을 사용해서 같이 코드도 작성해보겠습니다 :)
제목
html의 제목은 h*태그로 구성되어 있다. h1 ~ h6까지 있으며 Heading 태그 문서나 구획, 문단의 제목을 표시하며 SEO의미가 매우 높다. h1은 1번 제목이며 페이지마다 있는 게 좋으며 해당 페이지의 목적, 제목, 페이지당 한 개만 있도록 해야 한다. h2는 각 구획이나 부분별 제목이며 여러 개가 있어도 상관이 없다. h3~h6부터는 사용 빈도가 매우 낮고 중요도가 떨어져 많이 사용하지 않는다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
<h1>1번 제목</h1>
<!-- 1번 제목 : 페이지마다 있는게 좋음. 해당 페이지의 목적,제목. 페이지당 한개만. -->
<h2>2번 제목</h2>
<!-- 각 구획/부분별 제목. 여러개 있어도 괜찮음. -->
<h3>3번 제목</h3>
<h4>4번 제목</h4>
<h5>5번 제목</h5>
<h6>6번 제목</h6>
<!--나머지는 그닥....-->
<!-- h* : Heading 태그 문서나 구획, 문단의 제목을 표시. SEO 의미 매우 강하다. -->
</body>
</html>
목록
ol과 ul이 있으며 정렬도에 따라 나뉘며 속성은 li를 공통적으로 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록</title>
</head>
<body>
<ol>
<li>국명</li>
<li>지리</li>
<li>역사</li>
<!-- li : List Item, 목록의 구성요소 -->
</ol>
<!-- ol : Orderd List, 순서가 상관이 있는 목록 -->
<ul>
<li>메일</li>
<li>카페</li>
<li>블로그</li>
</ul>
<!-- ul : Unorderd List, 순서가 상관이 없는(순번이 없는) 목록, 주로 메뉴-->
</body>
</html>
표
thead, tbody, tfoot으로 구성되며 각각의 속성은 th, tr, td가 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>표</title>
</head>
<body>
<table>
<thead>
<!-- thead : Table Head, 표의 열(Column)을 나열하기 위해 사용된다. -->
<tr>
<th>
<!-- th : Table Head Cell, 해당 열이나 행값에 대한 라벨이다.-->
</th>
</tr>
</thead>
<tbody>
<!-- tbody : Table Body, 표의 본문. 데이터 등이 들어간다.-->
<tr>
<!-- tr : Table Row, 행을 만든다. -->
<td>
<!-- td : Table Data Cell, 열을 만든다. -->
</td>
<td>
</td>
</tr>
</tbody>
<tfoot>
<!-- tfoot : Table Foot, 주로 tbody 에 있는 데이터의 합이나 평균 등을 위해 사용한다.-->
</tfoot>
</table>
</body>
</html>하지만 테이블에는 병합이 되어 있는 테이블이 존재하는데 테이블을 병합하려면 rowspan과 colspan을 사용하여 병합을 할 수 있다.
rowspan
테이블을 세로로 병합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>rowspan</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2">data name</th>
<td>data1</td>
<td rowspan="2">data2</td>
</tr>
<tr>
<td>data value</td>
</tr>
<tr>
<th>data name2</th>
<td>data1</td>
<td>data2</td>
</tr>
</tbody>
<tfoot>
<th>th</th>
<th>sum</th>
<th>avg</th>
</tfoot>
</table>
</body>
</html>
병합된 테이블
rowspan을 통해 data name과 data2를 세로로 2칸 병합
colspan
테이블을 가로로 병합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>rowspan</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>th1</th>
<th>th2</th>
<th colspan="2">th3</th>
</tr>
</thead>
<tbody>
<tr>
<th>data name</th>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
<tr>
<th>data name2</th>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
<tfoot>
<th>th</th>
<th>sum</th>
<th colspan="2">N/A</th>
</tfoot>
</table>
</body>
</html>
병합된 테이블
colspan을 통해 th3와 N/A를 가로로 2칸 병합
rowspan + colspan
테이블을 세로+가로 병합
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>동북아시아표</title>
<style>
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th rowspan="2" bgcolor="yellow">국가</th>
<th bgcolor="yellow">인구(만)</th>
<th rowspan="2", colspan="2" bgcolor="yellow">면적(km<sup>2</sup>)</th>
</tr>
<tr>
<th bgcolor="yellow">YOYΔ</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" bgcolor="yellow">대한민국</th>
<td>5,178</td>
<td rowspan="2">100,210</td>
<td rowspan="2">변동 없음</td>
</tr>
<tr>
<td>12</td>
</tr>
<tr>
<th rowspan="2" bgcolor="yellow">일본</th>
<td>12,580</td>
<td rowspan="2">377,975</td>
<td rowspan="2">변동 없음</td>
</tr>
<tr>
<td>58</td>
</tr>
<tr>
<th rowspan="2" bgcolor="yellow">중국</th>
<td>140,200</td>
<td rowspan="2">9,597,000</td>
<td rowspan="2">변동 없음</td>
</tr>
<tr>
<td>996</td>
</tr>
</tbody>
<tfoot>
<tr>
<th bgcolor="yellow">평균</th>
<th>52,653</th>
<th>3,358,395</th>
<th>N/A</th>
</tr>
</tfoot>
</table>
</body>
</html>
병합된 테이블
rowspan으로 국가, 대한민국, 일본, 중국, 100,210, 377,975, 9,597,000, 변동 없음을 세로 두칸 병합
rowspan과 colspan을 통해 면적을 세로 두칸, 가로 두 칸 병합
이상으로 제목, 목록, 표 html 포스팅을 마치겠습니다!!
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS]-3. GRID와 FLEX (1) | 2022.04.24 |
|---|---|
| [CSS]-2. POSITION (0) | 2022.04.20 |
| [CSS]-1. 적용방법 및 선택자 (0) | 2022.04.18 |
| 구획, 입력, 폼 HTML (0) | 2022.04.17 |
| HTML (0) | 2022.04.14 |