[HTML] 목록(list) 와 테이블(table)

list 를 통해 목록을 나타낼 수 있다. 

 

1. ul (Unordered list) : 순서가 없는 목록

<ul>
    <li>Hello</li>
    <li>HTML</li>
    <li>list</li>
</ul>

 

이렇게 하면 출력으로 순서없는 목록이 나온다.

• Hello
• HTML
• list

 

2. ol (Ordered list) : 순서가 있는 목록

 

<ol>
    <li>Hello</li>
    <li>HTML</li>
    <li>list</li>
</ol>

 

ol 을 사용하면 리스트에 순서가 생긴다. 

 

1.Hello

2.HTML

3. list

 

 

또한 이렇게 순서를 나타내는 방법을 ol 의 type 속성을 이용해 바꿀 수 있다. 

 

종류는

type="1" : 숫자로 표기

type="A" : 대문자 알파벳

type="a" : 소문자 알파벳

type="I" : 대문자 로마숫자

type="i"  : 소문자 로마숫자

 

또한 start 속성을 이용해 시작값을 정할 수 있다. 

 

<ol start="3">
    <li>Hello</li>
    <li>HTML</li>
    <li>list</li>
</ol>

 

3.Hello

4.HTML

5.list

 

 

 

3. 테이블(table)

 

테이블은 표를 만들 때 사용한다. 

 

<table>
    <tr>
        <th>Hello</th>
        <th>HTML</th>
    </tr>
    <tr>
        <td>CSS</td>
        <td>JavaScript</td>
    </tr>

 

tr 은 표의 행, th 는 표의 제목 셀, td 는 표의 일반 셀 을 의미한다. 

 

중요한 점은 셀을 늘려서 셀이 차지하는 칸을 정할 수 있다는 것이다 .

 

rowspan 은 차지하는 행의 개수(세로로 늘어남) 정하기

 

colspan 은 차지하는 열의 개수(가로로 늘어남) 정하