[HTML#08] LIST 태그
리스트란 어떤 여러개의 항목이 있을때 차례차례 보여주기 위한 형태를 말한다.
ul : unorder list -> 순서가 없는 리스트
ol : order list -> 순서가 있는 리스트
+
li : list item -> 리스트 내의 항목
ul은 순서가 없으며, 그 태그 사이에 li태그를 넣음으로써 항목이 생긴다.
<ul>
<li>자바</li>
<li>파이썬</li>
</ul>
이라고 해본다면 미리보기창에 항목식으로 출력된 것을 볼 수 있다.
<ol>
<li>자바</li>
<li>파이썬</li>
</ol>
만약 ol로 하여 순서가 있는 태그를 한다면, 항목이 1.자바 2.파이썬 이런식으로 들어가 있는것을 볼 수 있다.
반드시 글자는 혼자 돌아다니면 안된다. 하나의 태그안에 들어가는 형태를 갖추어야한다.
[예제]
list로 학습순서를 구현한다.
학습순서
자바
-변수
-조건문
-반복문
데이터베이스
-계정
-테이블
-데이터
HTML
-태그
위와 같은 문제를 구현한다면,
나같은 경우에는 처음에
body태그 안에 <h3>학습 순서</h3> -- > h2~3정도면 될것 같다고 생각했다.
그후 <ol><li>자바</li><ul><li><변수></li>와 같이 이상한 식으로 했는데, 기본 구조는 맞게 만들었다.
하지만 이 방법은 잘 못 되었다. 이유는 자바라는 학습챕터 내에 변수, 조건문, 반복문과 같은 순서가 있는게 아니라 그 밖에 있는 것으로 만들었기 때문이다.
위와 같이 만들면 변수, 조건문, 반복문은 자바안에 들어가있지 않다. 그래서 그 ul태그을 <li>자바</li>태그안에 넣어주는 것이다.
따라서, 예제에 대한 답은 이와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>list로 학습순서를 구현</title>
</head>
<body>
<h2>학습 순서</h2>
<ol>
<li>자바
<ul>
<li>변수</li>
<li>조건문</li>
<li>반복문</li>
</ul>
</li>
<li>데이터베이스
<ul>
<li>계정</li>
<li>테이블</li>
<li>데이터</li>
</ul>
</li>
<li>HTML
<ul>
<li>태그</li>
</ul>
</li>
</ol>
</body>
</html>