My Notes

목록 태그 <ul>, <ol>

• <ul> 태그 : 순서 없는 목록, 기본값 ●

<!-- 기본값 : ● -->
<ul>               
	<li>초등학교</li>
	<li>중학교</li>
	<li>고등학교</li>
	<li>대학교</li>
</ul>

<!-- circle : ○ -->
<ul type="circle"> 
	<li>초등학교</li>
	<li>중학교</li>
	<li>고등학교</li>
	<li>대학교</li>
</ul>

<!-- square : ○ -->
<ul type="square">
	<li>초등학교</li>
	<li>중학교</li>
	<li>고등학교</li>
	<li>대학교</li>
</ul>

• <ol> 태그 : 순서 있는 목록, 기본값 아라비아 숫자

<!-- 기본값 : 1 2 3 4 -->
<ol>
	<li>봄</li>
	<li>여름</li>
	<li>가을</li>
	<li>겨울</li>
</ol>

<!-- A : A B C D -->
<ol type="A"> 
	<li>봄</li>
	<li>여름</li>
	<li>가을</li>
	<li>겨울</li>
</ol>

<!-- a : a b c d -->
<ol type="a"> 
	<li>봄</li>
	<li>여름</li>
	<li>가을</li>
	<li>겨울</li>
</ol>

<!-- I : Ⅰ Ⅱ Ⅲ Ⅳ -->
<ol type="I"> 
	<li>봄</li>
	<li>여름</li>
	<li>가을</li>
	<li>겨울</li>
</ol>

<!-- i : ⅰⅱⅲ ⅳ -->
<ol type="i"> 
	<li>봄</li>
	<li>여름</li>
	<li>가을</li>
	<li>겨울</li>
</ol>

표 태그 <table>

• <table> 태그 : 표 생성
  • <th> 태그 : 열 제목
  • <tr> 태그 : 행
  • <td> 태그 : 열
  • <caption> 태그 : 표 제목

<!-- border 속성 : 표 테두리 -->
<table border="1">
	<caption>제목</caption>
	<tr>
		<th>셀 제목1</th>
		<th>셀 제목2</th>
	</tr>
	<tr>
		<td>셀 내용</td>
		<td>셀 내용</td>
	</tr>
</table>

• <thead>, <tbody>, <tfoot> 태그는 레이아웃에 영향을 주지는 않는다.

• <thead> 태그 : 표의 머리말

• <tbody> 태그 : 표의 내용

• <tfoot> 태그 : 표의 꼬리말

<table border="1">
	<caption>Reciept</caption>
	<thead>
		<tr>
			<th>Item</th>
			<th>Price</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Americano</td>
			<td>3,000</td>
		</tr>
		<tr>
			<td>Latte</td>
			<td>4,000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>Total</td>
			<td>7,000</td>
		</tr>
	</tfoot>
</table>

• colspan 속성 : 같은 행에서 셀을 합칠 때 사용

• rowspan 속성 : 같은 열에서 셀을 합칠 때 사용

<table border="1">
	<tr>
		<td width="100">One</td>
		<td width="200" colspan="2">Two, Three</td>
	</tr>
	<tr>
		<td rowspan="2">Four, Five</td>
		<td>Six</td>
		<td>Seven</td>
	</tr>
	<tr>
		<td>Eight</td>
		<td>Nine</td>
	</tr>
</table>