목록을 이용해 이미지나 텍스트 어떤 것이든 목록화해서 정리할 수 있고, CSS를 적용해 메뉴나 본문 내용등에서 다양하게 활용 할 수 있습니다.
목록에는 크게 순서없는 목록, 순서있는 목록, 설명이 있는 목록 등으로 나뉩니다.
순서가 필요하지 않은 목록(unordered list)을 만들때는 <ul> 태그를 사용하고 <li> 태그안에 <li>태그(list item)를 사용해 각 항목을 표시합니다.
순서가 없는 목록의 경우, 각 항목 앞에 작은 원이나 사각형 같은 불릿(bullet)이 붙습니다.
<ul>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
예:
항목을 나열하되 순서가 필요한 목록(ordered list)을 만들때는 <ol> 태그를 사용합니다.
<ol>태그는 여러 속성들이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자등을 바꿀수 있습니다.
type 속성: <ol>태그는 순서 목록이기때문에 각 항목앞에 1,2,.. 같은 숫자가 기본으로 붙는데 'type' 속성을 이용하면 숫자의 종류를 다양하게 조절할 수 있습니다.
| 속성 값 | 설명 |
|---|---|
| 1 | 숫자(기본값) |
| a | 영문 소문자 |
| A | 영문 대문자 |
| i | 로마숫자 소문자 |
| I | 로마숫자 대문자 |
<ol>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ol>
예:
<dl> 태그는 사전 구성처럼 '제목'과 '설명' 이 한 쌍인 설명목록(description list)을 만듭니다.
<dl>태그는 목록을 만들고, <dt>태그는 제목을 <dd>태그는 설명을 표시합니다.
<dl>
<dt>퍼블리싱에 사용되는 언어</dt>
<dd>html 은 구조를 나타냅니다.</dd>
<dd>css 는 스타일을 만듭니다.</dd>
<dd>javascript 는 동작을 표현합니다.</dd>
</dl>
예: