목록이란?
목록이란 연관된 항목들을 열거할 때 사용한다. 리스트 전체는 <ol>이나 <ul> 태그로 감싸고 각각의 항목들은 <li> 태그로 표현한다.
문법(Syntax)
순서가 없는 리스트 (Unordered List)
1 2 3 | <ul> <li>항목</li> </ul> |
순서가 있는 리스트 (Ordered List)
1 2 3 | <ol> <li>항목</li> </ol> |
설명(Description)
- 연관되어 있는 항목들을 나열할 때 사용
- 순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용한다.
- CSS와 함께 사용해서 메뉴로도 사용된다.
예제(Example)
example1. 순서가 없는 리스트 (jsfiddle, github, ?)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> </ head > < body > < ul > < li >table</ li > < li >ol</ li > < li >body</ li > < li >img</ li > </ ul > </ body > </ html > |
example2. 순서가 있는 리스트 (jsfiddle, github, ?)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> </ head > < body > < ol > < li >html</ li > < li >css</ li > < li >javascript</ li > < li >os</ li > < li >php</ li > < li >database</ li > </ ol > </ body > </ html > |
example3. 아래 예제는 리스트와 리스트를 중첩해서 사용한 예를 보여준다. (jsfiddle, github, ?)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> < html > < head > < meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" /> </ head > < body > < ol > < li >html < ol > < li >수업</ li > < li >사전</ li > < li >쿡북</ li > </ ol > </ li > < li >css</ li > < li >javascript</ li > < li >os</ li > < li >php</ li > < li >database</ li > </ ol > </ body > </ html > |