앞서 공부한 표를 만드는 table 태그와 더불어 오늘 연습할 리스트를 만드는 태그는 레이아웃을 설정하는 데도 사용되고 사용 빈도도 높으므로 꼭 알아 두어야하는 기본적인 태그다.
사용법은 table 태그와 비슷하다
다음은 테이블 태그의 형식이다.
<table>
<tr>
<td> .. </td>
...
</tr>
<tr>
<td> .. </td>
....
</tr>
</table>
ol 태그, ul 태그
이번에는 리스트 태그를 보자.
<ol>
<li> 아이템 1 </li>
<li> 아이템 2 </li>
</ol>
테이블의 시작과 끝을 알려주는 table 태그 처럼 리스트도 리스트의 시작과 끝을 알려주는 ol, ul 태그가 있다.
ol, ul 둘 다 리스트지만 형식이 다르다.
<ul>
<li> 아이템 1 </li>
<li> 아이템 2 </li>
</ul>
ol은 ordered list의 약자로 순서가 있는 리스트라는 의미다. 그래서 아이템 앞에 번호가 매겨진다.
- 아이템 1
- 아이템 2
ul은 unordered list의 약자다. 순서는 없고 다음과 같이 표시된다.
- 아이템 1
- 아이템 1
dl 리스트 태그
ol태그, ul태그와 같은 리스트 태그지만 형식이 좀 다르다. 이 태그는 하위 태그로 dt 태그와 dd 태그 두 개를 사용한다. 따라서 하나의 하위 항목을 더 가질 수 있다.
사용법은 다음과 같다.
<dl>
<dt> 목록 1 </dt>
<dd> 아이템 1 </dd>
<dd> 아이템 2 </dd>
<dd> 아이템 3 </dd>
<dt> 목록 2 </dt>
<dd> 아이템 1 </dd>
<dd> 아이템 2 </dd>
<dd> 아이템 3 </dd>
</dl>
다음은 브라우저에서 위 코드를 실행한 화면이다.
리스트 태그를 이용해서 웹 사이트의 레이아웃을 잡을 수 있다. 인터넷 뉴스 목록과 썸네일을 리스트 태그로 구성할 수도 있다. 그 때는 텍스트 대신 img 태그를 목록에 넣어주면 된다.