1. ul 태그와 ol 태그
- HTML에서 목록(list)을 표현하는 태그
- 여러 항목을 의미 있는 순서로 정리할 때 꼭 사용
1️⃣ ul 태그 (순서 없는 목록)
1) 기본 예시
<ul>
<li>사과</li>
<li>바나나</li>
<li>포도</li>
</ul>➡ 앞에 ● (불릿) 이 자동으로 붙음
2) ul 태그가 필요한 경우
- 메뉴
- 카테고리
- 기능 목록
- 순서가 중요하지 않은 경우
2️⃣ ol 태그(순서 있는 목록)
1) 기본 예시
<ol>
<li>회원가입</li>
<li>로그인</li>
<li>결제</li>
</ol>➡ 앞에 1, 2, 3… 번호가 자동으로 붙음
2) ol 태그가 필요한 경우
- 절차 / 단계
- 순위
- 순서가 중요한 설명
3️⃣ 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>ul 태그 (unOrder list) 번호가 없는, ol 태그 (order list)</h1>
<hr />
<ul>
<li>html</li>
<li>css</li>
<ul>
<li>java</li>
<li>jvm</li>
</ul>
</ul>
<ol>
<li>html</li>
<li>css</li>
<li>js</li>
</ol>
</body>
</html>
Share article