HTML 태그에는 순서 목록을 지정하는 ol(Ordered List)와 순서 없는 목록 ul(Unordered List)가 있습니다. 그리고 HTML5에서는 순서 부여를 역순으로 부여하는 reversed를 제공하고 있습니다.
먼저 ol 태그를 사용하여 다음처럼 작성해 보세요. ol 태그 내에 요소는 li 태그로 열거합니다.
<!DOCTYPE html>
<html>
<head>
<title>순서 목록 ol</title>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li> C언어 </li>
<li> C++ </li>
<li> C# </li>
<li> Java </li>
<li> python </li>
<li> HTML </li>
</ol>
</body>
</html>ol 태그를 사용하면 목록의 요소를 1부터 순차적으로 순번을 부여합니다. 다음은 위 코드의 브라우저 화면입니다.
ol 태그에 type 속성을 a를 지정하면 순서 번호를 a, b, c 순으로 나열합니다. 다음처럼 ol 태그에 type 속성을 지정해 보세요.
<!DOCTYPE html>
<html>
<head>
<title>순서 목록 ol 에 type a 지정하기</title>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li> C언어 </li>
<ol type='a'>
<li> 형식 </li>
<li> 변수 </li>
<li> 제어문 </li>
</ol>
<li> python </li>
<li> HTML </li>
<ol type='a'>
<li> 문서 구조 </li>
<li> 태그 </li>
<li> 속성 </li>
</ol>
</ol>
</body>
</html>ol 태그에 type 속성을 a를 지정한 것을 보면 a, b, c 순으로 순서를 지정하는 것을 확인할 수 있어요.
ol 태그에 type 속성을 I를 부여하면 로마자로 순번을 부여합니다. 다음처럼 HTML 요소에 순서 목록 ol에 type을 I를 지정해 보세요.
<!DOCTYPE html>
<html>
<head>
<title>순서 목록 ol 에 type a 지정하기</title>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li> C언어 </li>
<ol type='a'>
<li> 형식 </li>
<li> 변수 </li>
<li> 제어문 </li>
</ol>
<li> python </li>
<li> HTML </li>
<ol type='I'>
<li> 문서 구조 </li>
<li> 태그 </li>
<li> 속성 </li>
</ol>
</ol>
</body>
</html>다음은 브라우저 화면입니다.
순서 없는 목록을 지정할 때는 ul을 사용합니다.
다음은 순서 목록으로 프로그램 언어를 나열하고 HTML에 순서 없는 목록을 나열한 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>순서 목록 ol, 순서 없는 목록 ul</title>
<meta charset="utf-8" />
</head>
<body>
<ol>
<li> C언어 </li>
<li> python </li>
<li> HTML </li>
<ul>
<li> Document </li>
<li> Head </li>
<li> Body </li>
</ul>
</ol>
</body>
</html>다음은 브라우저 화면입니다.
마지막으로 HTML5에서 제공하는 reversed를 사용합시다.
<!DOCTYPE html>
<html>
<head>
<title>중요한 곳에 mark로 형광펜 효과주기2(색상 및 투명도)</title>
<meta charset="utf-8" />
</head>
<body>
<ol reversed>
<li> C언어 </li>
<li> C++ </li>
<li> Python </li>
<li> Java </li>
<li> HTML </li>
</ol>
</body>
</html>다음은 브라우저 화면입니다. 보시는 것처럼 순서 번호가 5, 4, 3, 2, 1 처럼 역순으로 부여하는 것을 볼 수 있어요.
