1. 목록 (List)
1.1 순서없는 목록 (Unordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서없는 목록(Unordered List)</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
1.2 순서있는 목록 (Ordered List)
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록(Ordered List)</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
type attribute
- "1" : 숫자 (기본값)
- "A" : 대문자 알파벳
- "a" : 소문자 알파벳
- "I" : 대문자 로마숫자
- "i" : 소문자 로마숫자
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록(Ordered List)</h2>
<ol type="I">
<li value="1">Coffee</li>
<li value="2">Tea</li>
<li value="3">Milk</li>
</ol>
</body>
</html>
start attribute
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록(Ordered List)</h2>
<ol start="3">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
reversed attribute
<!DOCTYPE html>
<html>
<body>
<h2>순서있는 목록(Ordered List)</h2>
<ol reversed>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
1.3 중첩 목록
<!DOCTYPE html>
<html>
<body>
<h2>중첩 목록</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<ol>
<li>Black Tea</li>
<li>Green Tea</li>
</ol>
</ul>
</body>
</html>
2. 테이블 (Table)
- 표를 만들 때 사용하는 태그
- 과거 : table tag를 사용하여 레이아웃 구성
- 현재 : div tag를 사용하여 레이아웃 구성
- table : 표를 감싸는 태그
- tr : 표 내부의 행 (table row)
- th : 행 내부의 제목 셀 (table heading)
- td : 행 내부의 일반 셀 (table data)
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Score</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
table tag attribute
- border : 표 테두리 두께 지정
- rowspan : 해당 셀이 점유하고 있는 행의 수 지정
- colspan : 해당 셀이 점유하고 있는 열의 수 지정
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td{
border: 1px solid black;
border-collapse: collapse;
}
th, td{
padding: 15px;
}
</style>
</head>
<body>
<h2>2개의 columns을 span</h2>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Jill</td>
<td>02 1234 1234</td>
<td>02 5678 5678</td>
</tr>
</table>
<h2>2개의 rows을 span</h2>
<table>
<tr>
<th>Name:</th>
<th>Jill</th>
</tr>
<tr>
<td rowspan="2">Telephone:</td>
<td>02 1234 1234</td>
</tr>
<tr>
<td>02 5678 5678</td>
</tr>
</table>
</body>
</html>
