TIL)05 HTML 목록(list)와 표(table) 태그

오늘은 무엇을 배울까 ?

표(table) , 목록(list)

목록(list) 태그

목록태그에는 크게 oi, ul두가지가 있다.

ul. 순서없는 목록 (Unordered List)

순서없는 목록은 순서 없이 점으로 나타내는 리스트이다.
ul로 우선 감싸고 li로 리스트 목록을 만든다.

 <ul>
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
 </ul>

• Coffee
• Tea
• Milk

'''

ol.순서있는 목록 (Ordered List)

기본적인 것은 숫자 형식이다. ol로 li 리스트를 감싸고
li에 세부사항을 넣는다.

 <ol>
      <li>첫째</li>
      <li>둘째</li>
      <li>셋째</li>
</ol>

1. 첫째
2. 둘째
3. 셋째

'''

타입 변경

숫자 이외를 원한다면 type 어트리뷰트를 사용하여 순서를 나타내는 문자를 지정할 수 있다.
"1" 숫자 (기본)
“A” 대문자 알파벳
“a” 소문자 알파벳
“I” 대문자 로마숫자
“i” 소문자 로마숫자

대문자 알파벳 예시

<ol type="A">
  <li> 대문자 알파벳 순서 </li>
  <li> 대문자 알파벳 순서 </li>
  <li> 대문자 알파벳 순서 </li>
</ol>

1. 대문자 알파벳 순서
2. 대문자 알파벳 순서
3. 대문자 알파벳 순서

소문자 알파벳 예시

<ol type="a">
  <li> 소문자 알파벳 순서 </li>
  <li> 소문자 알파벳 순서 </li>
  <li> 소문자 알파벳 순서 </li>
</ol>

1. 소문자 알파벳 순서
2. 소문자 알파벳 순서
3. 소문자 알파벳 순서

ol 에서 type을 주어서 변경할수 있다 . 나머지는 직접 해보길 바란다.

순서 변환 방법

리스트에 value 값을 주어 순서를 변환 할수 있다.

<ol type="I">
  <li value="2"> 소문자 알파벳 순서 </li>
  <li> 소문자 알파벳 순서 </li>
  <li value="11"> 소문자 알파벳 순서 </li>
</ol>

1. 소문자 알파벳 순서
2. 소문자 알파벳 순서
3. 소문자 알파벳 순서

다른 방법으로는 ol에 start값을 준다.

<ol type="I" start="4">
  <li value="2"> 소문자 알파벳 순서 </li>
  <li> 소문자 알파벳 순서 </li>
  <li value="11">  value 적용 </li>
</ol>

value 값은 적용된다.

4. 소문자 알파벳 순서
5. 소문자 알파벳 순서
6. value 적용

reversed 어트리뷰트를 지정하면 리스트의 순서값을 역으로 표현한다.

 <ol type="I" reversed >
  <li> 소문자 알파벳 순서 </li>
  <li> 소문자 알파벳 순서 </li>
  <li value="1"> 소문자 알파벳 순서 </li>
</ol>

1. 소문자 알파벳 순서
2. 소문자 알파벳 순서
3. 소문자 알파벳 순서

표(table) 태그

table 태그를 이용하면 손쉽게 표를 만들수 있다.

table - 표를 감싸는 태그
tr - 표 내부의 행 (table row)
th - 행 내부의 제목 셀 (table heading)
td - 행 내부의 일반 셀 (table data)

tr은 한층을 말하는 것 같으며
th, td는 방을 나누는데 th는 글씨를 굵게 하는 것 같다.

<table> 
  <tr>
    <td>
    2층 방 
    </td>
  </tr>
  <tr>
  	<td>
   	1층 1방    
  	</td>
    <td>
     1층 2방
    </td>
    <th>
    굵은 방 
    </th>
  </tr>
</table>

2층 방
1층 1방	1층 2방	굵은 방

스타일

줄 수 있는 스타일이다 .

border : 표 테두리 두께 지정. (CSS border property를 사용하는 것이 더 나은 방법이다.)
rowspan : 해당 셀이 점유하는 행의 수 지정
colspan : 해당 셀이 점유하는 열의 수 지정

rowspan과 colspan은 th에 넣어준다.

<th colspan="2"> 열의 수 2 </th>
<th rowspan="2"> 행의 수 2 </th>

위의 사례를 적용해보자. 2층 방의 크기를 넓혀 줬다.

<table> 
  <tr>
    <td colspan="3">
    2층 방 
    </td>
  </tr>
  <tr>
  	<td>
   	1층 1방    
  	</td>
    <td>
     1층 2방
    </td>
    <th>
    굵은 방 
    </th>
  </tr>
</table>

2층 방
1층 1방	1층 2방	굵은 방

표만들기는 솔직히 불편한 방법 같다.(ppt, word의 표만들기는 쉽게 해왔기 때문에 ) .. 많이 사용하면서 익혀야 할것 같다.