목록의 종류
웹 문서에서 목록(list)이란 연관 있는 항목들을 정돈된 형태로 나열한 것을 말합니다. HTML에서 목록을 나타내는 태그로는 <ul>과 <ol>이 사용됩니다. 태그는 각각 '순서 없는 목록'과 '순서 있는 목록'을 나타냅니다.
순서 없는 목록(Unordered List)이란 나열된 항목들 간의 구분이 없는 목록을 뜻합니다. 아래는 순서 없는 목록의 예입니다.
순서 있는 목록(Ordered List)이란 기호를 이용해서 각 항목들 사이의 순서를 구분하는 목록을 뜻합니다. 아래는 순서 있는 목록의 예입니다.
순서 없는 목록과 순서 있는 목록은 블록 레벨 요소입니다.
항목을 나타내는 태그는 같다
항목(List Item)이 하나도 적혀 있지 않은 목록은 단지 비어있는 하나의 블록에 불과합니다. 목록을 만들기 위해 사용하는 <ul>과 <ol> 태그 안에서 항목을 나타낼 때는 <li> 태그를 사용해야 합니다. <li> 태그가 목록 안에 하나 추가될 때마다 항목 하나가 추가되는 식인데, <li>가 <ul> 태그 안에 포함되면 항목에는 순서가 표시되지 않고, <li>가 <ol> 태그 안에 포함되면 순서가 표시됩니다.
<body>
<h1>항목 태그는 같은 것을 쓴다</h1>
<ul>
<li>강아지</li>
<li>고양이</li>
<li>거북이</li>
<li>햄스터</li>
</ul>
</body>
<body>
<h1>항목 태그는 같은 것을 쓴다</h1>
<ol>
<li>스타벅스</li>
<li>커피빈</li>
<li>파스쿠찌</li>
<li>이디야</li>
</ol>
</body>
목록 안에 포함되는 <li> 요소 또한 블록 레벨 요소입니다.
순서 있는 목록의 속성
순서 있는 목록은 기본적으로 숫자를 이용해 순서를 표시하고, 1번부터 순서대로 값이 증가합니다. 그러나 원하는 경우 사용자는 이러한 기본 속성을 수정해 기호나 순서 등을 다르게 표시할 수 있습니다. 이때 사용할 수 있는 속성은 아래의 두 가지입니다.
- start : 자연수를 지정해 몇 번부터 시작할 것인지를 정한다,
- type : 어떤 유형의 기호로 순서를 표시할 것인지를 정한다.
<ol> 태그의 start는 시작 번호로 사용하고자 하는 값을 자연수로 입력하는 속성입니다. 당연히 기본값은 1입니다.
type 속성은 어떤 유형의 기호로 순서를 표시할지를 의미하는데, 여기에는 다섯 가지 유형 중 한 가지를 선택할 수 있습니다. 각 유형은 A, a, 1, i, I 인데 각각은 순서대로 알파벳 대문자, 알파벳 소문자, 숫자, 로마숫자 소문자, 로마숫자 대문자를 의미합니다. 아래 예제는 항목을 알파벳 소문자로 3번부터 나열한 예입니다.
<body>
<h1>과목명 나열하기</h1>
<ol start="3" type="a">
<li>유체역학</li>
<li>전자회로</li>
<li>동역학</li>
<li>마이크로프로세서</li>
</ol>
</body>