목록이란?
목록이란 연관된 항목들을 열거할 때 사용한다. 리스트 전체는 <ol>이나 <ul> 태그로 감싸고 각각의 항목들은 <li> 태그로 표현한다.
문법(Syntax)
순서가 없는 리스트 (Unordered List)
<ul>
<li>항목</li>
</ul>
순서가 있는 리스트 (Ordered List)
<ol>
<li>항목</li>
</ol>
설명(Description)
- 연관되어 있는 항목들을 나열할 때 사용
- 순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용한다.
- CSS와 함께 사용해서 메뉴로도 사용된다.
예제(Example)
example1. 순서가 없는 리스트 (jsfiddle, github, ?)
<!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, ?)
<!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, ?)
<!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>
