JunO3O
목록 태그
목록 태그
2023. 3. 21. 03:00ㆍHTML
목록 태그
ㅁ 현재 많은 웹 사이트에서는 아래와 같이 네비게이션 메뉴를 만들고 있습니다.
ㅁ 이때 목록 태그를 사용하여 네비게이션 메뉴를 만들 수 있습니다.
ㅁ 네비게이션 메뉴를 만들 때 아래와 같은 목록 태그를 사용합니다.
| 태그 | 설명 |
| ul | 순서가 없는 목록(unordered list) 생성 |
| ol | 순서가 있는 목록(ordered list) 생성 |
| li | 목록 요소(list item) 생성 |
# 순서가 없는(ul) 기본 목록 만들기(li)
ㅁ 순서가 없는 목록을 만들기 위해서는 <ul> 태그를 사용해야 하며, 목록 요소들을 만들기 위해서는 <li> 태그가 필요하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 순서가 없는 기본 목록 만들기 </title>
</head>
<body>
<ul>
<li> 사 과 </li>
<li> 바나나 </li>
<li> 오렌지 </li>
</ul>
</body>
</html>
# 순서가 있는(ol) 목록 만들기(li)
ㅁ 순서가 있는 목록을 만들기 위해서는 <ol> 태그를 사용해야 하며, 목록 요소를 만들기 위해서는 <li> 태그가 필요합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 순서가 있는 목록 만들기</title>
</head>
<body>
<ol>
<li> 사 과 </li>
<li> 바나나 </li>
<li> 오렌지 </li>
</ol>
</body>
</html>
# 중첩 목록 만들기
ㅁ 목록 여러 개를 이어 붙여 중첩 목록을 만들 수 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<!-- 첫번째 목록-->
<li>
<b> 과일 </b>
<ol>
<li> 사 과 </li>
<li> 바나나 </li>
<li> 오렌지 </li>
</ol>
</li>
<!-- 두번째 목록-->
<li>
<b> 채소 </b>
<ol>
<li> 배추 </li>
<li> 상추 </li>
<li> 깻잎 </li>
</ol>
</li>
</ul>
</body>
</html>
