목록은 연관되어 있는 항목들을 나열할때 사용한다. 순서가 없는 항목은 ul(unordered list), 순서가 있는 항목은 ol(ordered list)를 사용하며, css와 함께 사용해서 메뉴로도 사용한다.
문법
- 순서가 있는 리스트(ul)
<ul>
<li>항목</li>
</ul>
- 순서가 없는 리스트(ol)
<ol>
<li>항목</li>
</ol>
예제
- 순서가 없는 리스트(listexample1.html)
<!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>
- 순서가 있는 리스트(listexample2.html)
<!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>
- 리스트와 리스트의 중첩 사용(listexample3.html)
<!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>
예제 설명
- 순서가 없는 리스트(listexample1.html)
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
이 리스트의 경우에는 텍스트 앞에 · 으로 구분해준다.
- 순서가 있는 리스트(listexample2.html)
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
이 리스트의 경우에는 텍스트 앞에 숫자가 있어서 순서를 확인할 수 있다.
- 리스트와 리스트의 중첩 사용(listexample3.html)
예제를 html 파일에 코딩하여 실행하면 아래 그림과 같은 웹페이지가 나온다.
리스트 안에 또 리스트를 작성하여 html 항목에 수업, 사전, 쿡북이라는 리스트를 작성하였다.
'Programming > HTML' 카테고리의 다른 글
| 이스케이핑 (0) | 2017.12.11 |
|---|---|
| iframe, frame (0) | 2017.12.11 |
| 이미지 태그 (0) | 2017.12.11 |
| 문단, 줄바꿈, 띄어쓰기, 링크 (0) | 2017.12.07 |
| 태그(tag) (0) | 2017.12.07 |
꼴통보안인