1. List
여러 데이터를 리스트 형태로 나열 할 수 있다.
ul, ol, dl 태그에 따라서 보여주는 형식이 조금씩 다르다.
| ul > li | 일반적인 리스트 (항목 앞에 ● 는 변경 가능하다.) |
| il > li | 순서가 붙는 리스트 |
| dl > dt | 특정 내용을 대표하는 항목 |
| dl > dd | dt 하위 리스트 |
<html>
<head>
<meta charset="UTF-8">
<title>LIST</title>
</head>
<body>
<h3>LIST 1 (ul)</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>J-QUERY</li>
</ul>
<h3>LIST 2 (ol)</h3>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>J-QUERY</li>
</ol>
<h3>LIST 3 (dl)</h3>
<dl>
<dt>HTML</dt>
<dd>UI의 기본 뼈대를 담당한다.</dd>
<dt>CSS</dt>
<dd>HTML 을 예쁘게 꾸며준다.</dd>
<dt>JAVA SCRIPT</dt>
<dd>HTML 에 동적인 기능을 부여한다.</dd>
<dt>J-QUERY</dt>
<dd>JAVA SCRIPT 라이브러리</dd>
</dl>
</body>
</html>
2. Table
Table 은 문서 안의 표를 만드는데 사용 한다.
페이지의 틀을 잡을 때도 사용 하지만, 현재는 그런 용도로는 잘 사용하지 않는다.
Table 은 thead, tbody, tr, td 등으로 구성 된다.
| table | 테이블이 그려질 영역 지정 |
| caption | 테이블에 대한 제목 (선택) |
| colgroup > col | 각 항목에 대한 스타일 지정 (선택) |
| thead | 테이블의 항목 제목 부분 (선택) |
| tbody | 테이블 본문 부분 (선택) |
| tr | 테이블의 한 줄 (row) |
| th, td | 한 줄 (row) 안에 각 데이터 (td), 또는 강조할 데이터 (th) |
<html>
<head>
<meta charset="UTF-8">
<title>테이블</title>
</head>
<body>
<table border="1">
<caption>SCORE</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jhon</td>
<td>Haword</td>
<td>70</td>
</tr>
<tr>
<td>Bryan</td>
<td>Kim</td>
<td>30</td>
</tr>
</tbody>
</table>
</body>
</html>
3. Span
<html>
<head>
<meta charset="UTF-8">
<title>TABLE SPAN</title>
<style>
table{
width: 300px;
}
th, td{
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>rowspan=2</caption>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td rowspan="2">TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<!-- <td>TD</td> -->
<td>TD</td>
<td>TD</td>
</tr>
</table>
<table>
<caption>colspan=2</caption>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
<tr>
<td colspan="2">TD</td>
<td>TD</td>
<!-- <td>TD</td> -->
</tr>
<tr>
<td>TD</td>
<td>TD</td>
<td>TD</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>SPAN TEST</title>
<style>
table{
width: 300px;
}
th, td{
border: 1px solid black;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<table>
<caption>9월</caption>
<thead>
<tr>
<th colspan="7">9월 4주차</th>
</tr>
</thead>
<tbody>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
</tbody>
</table>
<table>
<caption>9월</caption>
<thead>
<tr>
<th>주차</th>
<th>날짜</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="7">4</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
</tr>
<tr>
<td>23</td>
</tr>
<tr>
<td>24</td>
</tr>
<tr>
<td>25</td>
</tr>
<tr>
<td>26</td>
</tr>
<tr>
<td>27</td>
</tr>
</tbody>
</table>
</body>
</html>
'HTML' 카테고리의 다른 글
| 02. Input, Form, Link (0) | 2024.02.27 |
|---|---|
| 01. HTML 의 기본 (1) | 2024.02.27 |