[ʜᴛᴍʟ] List & Table ( 목록과 표)

☀️ List ( 목록 )

<ol>과 <ul> 두 가지 종류가 있습니다.

• 하위요소로 <li>, <script>, <template> 태그가 허용되지만, 자식목록으로는 <li>(list item) 목록 아이템 태그만 허용되고 <li>태그로 목록 내 단일 아이템을 나열합니다. 중첩적으로 사용할 수 있습니다.

<ol> (Ordered List)

순서가 있는 정렬 목록으로, 머릿말로 번호가 부여됩니다. type 속성에 따라 숫자 번호 외에 알파벳이나 로마자로 변경할 수 있습니다.

🌿 예 시

<ol>
  <li> 첫번째 요소 입니다. </li>
  <li> 두번째 요소 입니다. </li>
</ol>

1. 첫번째 요소 입니다.
2. 두번째 요소 입니다.

type 속성

<ol type = 'a'> ... </ol>
<!-- a, b, c 처럼 소문자 알파벳으로 순서가 메겨집니다. -->
<ol type = 'A'> ... </ol>․
<!-- A, B, C 처럼 대문자 알파벳으로 순서가 메겨집니다. -->
<ol type = 'i'> ... </ol>
<!-- i, ii, iii 처럼 소문자 로마자로 순서가 메겨집니다. -->
<ol type = 'I'> ... </ol>
<!-- I, II, III 처럼 대문자 로마자로 순서가 메겨집니다. -->
<ol type = '1'> ... </ol>
<!-- 1, 2, 3 처럼 숫자로 순서가 메겨집니다. -->

list-style (CSS)

실제로는 type 속성보다는 css의 list-style 속성을 사용해 보여지는 모양만 바꾸는 방법을 더 많이 사용합니다.

• disc : 순서리스트지만 ul 처럼 목록이 표시됩니다.
• decimal (default) : 1, 2, 3.. 모양의 숫자로 표시됩니다.
• deciamal-leading-zero : 01, 02, 03.. 모양의 숫자로 표시됩니다.
• hangul : 가, 나, 다... 모양의 한글로 표시됩니다.
• none : html 코드상으로는 목록의 의미를 부여하지만, 겉모습은 내가 원하는 대로 꾸미고 싶을 때 많이 사용합니다.
  
• 더 많은 속성값은 개발자 도구에서 확인할 수 있습니다.

<ul> (Unordered List)

비정렬 목록으로, 머리말로 불릿(•, bullet)이 옵니다. 중첩시 단계별로 불릿 모양이 변경됩니다.

🌿 예 시

<ul>
  <li> 레벨 1의 첫번째 요소입니다.</li>
  <li> 레벨 1의 두번째 요소입니다.</li>
  <ul>
    <li> 레벨 2의 첫번째 요소입니다.</li>
    <li> 레벨 2의 두번째 요소입니다.</li>
    <ul>
      <li> 레벨 3의 첫번째 요소입니다.</li>
      <li> 레벨 3의 두번째 요소입니다.</li>
    </ul>
  </ul>
</ul>

• 레벨 1의 첫번째 요소입니다.
• 레벨 1의 두번째 요소입니다.
• 레벨 2의 첫번째 요소입니다.
• 레벨 2의 두번째 요소입니다.
• 레벨 3의 첫번째 요소입니다.
• 레벨 3의 두번째 요소입니다.

☀️ <Table>

🌿 <tr>, <th>, <td>

• <tr>(table row) : 테이블의 행을 의미하는 태그입니다. 자손으로 <th>, <td> 태그가 반드시 있어야 합니다.
• <th>(table header) : 테이블의 제목 셀을 의미하는 태그입니다. 부모태그인 <tr>안에 있어야 합니다. 자동으로 bold와 가운데 정렬 됩니다.
• <td>(table data sell) : 테이블의 단일 셀을 의미하는 태그입니다. 부모태그인 <tr>태그 안에 있어야 합니다.
• <caption> : 테이블을 설명하는 요소로 표의 설명이나 제목을 나타냅니다. 부모인 <table>요소의 첫번째 자식이어야 합니다.
• colspan / rowspan : 행 혹은 열을 합병하는 속성입니다.
• thead / tbody / tfoot : 기능적인 역할은 없지만 표를 논리적인 섹션으로 분리하도록 추가할 수 있습니다. 시맨틱 마크업을 작성하고 이해하기 쉬운 표를 만드는 데 중요합니다. 또 그룹화하여 개발자 입장에서 코드를 읽을 때 명확하게 구분해주는 역할과 상위 태그에 속성을 부여하는 경우 하위 태그까지 일괄적으로 적용되므로 개별 행, 열마다 부여하지 않아도 되서 편리합니다. thead 와 tfoot은 한 번씩만 사용할 수 있고 각각 표의 머리글과 바닥글을 나타내고, tbody는 여러 섹션에서 여러 번 사용할 수 있고 표의 내용을 의미합니다.

thead 0	thead 1	thead 2
tbody line 1	tbody line 1	tbody line 1
tbody line 2	tbody line 2	tbody line 2
tbody line 3	tbody line 3	tbody line 3
tbody line 4	tbody line 4	tbody line 4
tfoot	tfoot	tfoot

<table>
	<thead>
		<tr>
			<th>thead 0 </th>
			<th>thead 1 </th>
			<th>thead 2 </th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>  tbody line 1 </td>
			<td>  tbody line 1 </td>
			<td>  tbody line 1 </td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>  tbody line 2 </td>
			<td>  tbody line 2 </td>
			<td>  tbody line 2 </td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>  tbody line 3 </td>
			<td>  tbody line 3 </td>
			<td>  tbody line 3 </td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>  tbody line 4 </td>
			<td>  tbody line 4 </td>
			<td>  tbody line 4 </td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td> tfoot </td>
			<td> tfoot </td>
			<td> tfoot </td>
		</tr>
	<tfoot>
</table>

🌿 테이블 스타일링

• 기본적으로 표의 테두리는 서로 간격이 있어서 표 전체와 각 셀 테두리가 여백을 두고 각 자 보입니다.

• border-collapse: collapse : 이 때 표와 셀 사이에 있는 여백을 없애줍니다. 각 셀의 테두리가 겹치면서 thead, tfoot > th, td > table 순 혹은 테두리가 굵은 순으로 보여집니다.

• border-spacing: 10px : 셀 사이의 여백을 늘릴 수도 있습니다.