목록에는 순서가 있는 목록(Ordered List), 순서가 필요하지 않은 목록(Unordered List), 설명 목록(Description List) 세 가지가 있습니다.
- 순서가 있는 목록(OL)
- 순서가 없는 목록(UL)
- 설명 목록(DL)
순서 있는 목록
순서가 필요한 목록(Ordered List)은 1, 2, 3, ···처럼 차례대로 증가하는 번호가 붙는 목록입니다.
순서가 필요한 목록은
<ol> 태그로, 목록의 내용은
<li> 태그로 만듭니다.
<h1>Ordered List</h1>
<ol>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>
시작하는 번호를 지정하려면 다음와 같이 합니다.
<ol start="5">
특정 목록의 번호를 지정하려면 다음와 같이 합니다.
<li value="9">
번호 지정을 이용한 간단한 예는 다음과 같습니다.
<ol start="5">
<li>Lorem</li>
<li>Ipsum</li>
<li value="9">Dolor</li>
</ol>
숫자 이외에 알파벳, 로마자, 이미지 등으로 순서를 매길 수 있습니다. 이는 HTML보다 CSS를 이용하여 설정하는 게 좋습니다.
순서 없는 목록
순서 필요하지 않은 목록(Unordered List)은 번호 대신 점이나 사각형 등의 도형이 목록 앞에 붙습니다.
순서 필요하지 않은 목록은
<ul> 태그로, 목록의 내용은
<li> 태그로 만듭니다.
<h1>Unordered List</h1>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
목록 안의 목록
<li> 태그를 생략하고 목록 안에 또 다른 목록을 넣을 수
있습니다.
<h1>1박 2일 가족 여행 코스</h1>
<ol>
<li>1일차
<ol>
<li>해녀박물관</li>
<li>낚시체험</li>
<li>한라수목원</li>
</ol>
</li>
<li>2일차
<ul>
<li>송훈랜드
<ul>
<li>하이브레드</li>
<li>크라운돼지</li>
</ul>
</li>
<li>만장굴</li>
<li>카약체험</li>
</ul>
</li>
<li>3일차</li>
</ol>
설명 목록
설명 목록(Description List)은 용어와 그 뜻을 나열할 때 사용합니다. 예를 들어 '단어/정의' 목록이나 '질문/답' 목록에서 사용할 수 있습니다.
설명 목록은 <dl>로, 용어 및 제목은 <dt>로, 그 뜻과 설명은
<dd>로 만듭니다.
<h1>제주 올레길</h1>
<dl>
<dt>올레 1코스</dt>
<dd>코스 : 시흥 초등학교 옆 - 갯골 생태 공원</dd>
<dd>거리 : 14.6km(4~5시간)</dd>
<dd>난이도 : 중</dd>
<dt>올레 2코스</dt>
<dd>코스 : 갯골 생태 공원 - 은평 교회</dd>
<dd>거리 : 10km(3~4시간)</dd>
<dd>난이도 : 중</dd>
</dl>
드롭다운 목록
사용자가 여러 옵션 중에서 선택하도록 하고 싶을 때 드롭다운 목록을 사용합니다. 드롭다운 목록이란 클릭했을 때 옵션들이 요소 아래쪽으로 펼쳐지기 때문에 붙여진 이름입니다. 공간을 최소한을 사용하면서 여러 옵션을 표시하려면 선택 가능한 목록을 만들 수 있습니다.
선택 가능한 목록을 만드는 방법 - select, optgroup, datalist