HTML 에서 목록을 생성할 때 사용할 수 있는 태그는 <ul> , <ol> , <dl> 3가지가 있음
순서가 없는 비순서형 목록 생성
번호가 없는 리스트
<ul> 태그로 시작
리스트 항목은 <li> 로 시작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h2> 커피 메뉴 </h2>
<ul> <!-- 리스트 시작 -->
<li> 아이스 아메리카노 </li> <!-- 리스트 항목 -->
<li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
<li> 아이스 히비스커스 </li> <!-- 리스트 항목 -->
<li> 초코라떼 </li>
</ul> <!-- 리스트 종료 -->
</body>
</html>
🔽 <ul> 태그 사용해서 출력 🔽
순서형 목록을 생성
번호가 있는 리스트
<ol> 태그로 시작
리스트 항목은 <li> 로 시작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h2> 커피 메뉴 </h2>
<ol> <!-- 리스트 시작 -->
<li> 아이스 아메리카노 </li> <!-- 리스트 항목 -->
<li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
<li> 아이스 히비스커스 </li> <!-- 리스트 항목 -->
<li> 초코라떼 </li>
</ol> <!-- 리스트 종료 -->
</body>
</html>
🔽 <ol> 태그 사용해서 출력 🔽
정의형 목록
용어와 용어 설명을 나열한 형태의 목록을 만들 때
<dl> 태그로 시작
<dt> 태그는 항목
<dd> 태그는 항목에 대한 설명
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 웹 브라우저 제목 </title>
</head>
<body>
<h2> 커피 메뉴 </h2>
<dl> <!-- 정의 리스트 시작 -->
<dt> 아이스 아메리카노 </dt> <!-- 단어 -->
<dd> 에스프레소에 뜨거운 물을 희석시켜 만든 음료 </dd> <!-- 단어의 설명 -->
<dt> 말차 크림 프라푸치노 </dt>
<dd> 제주 유기농 말차로 만든 크림 프라푸치노 </dd>
<dt> 아이스 히비스커스 </dt>
<dd> 무궁화속 두해살이풀인 로젤 열매를 말린 후 끓여 우려낸 대용차 </dd>
<dt> 초코라떼 </dt>
<dd> 핫초코가루로 시원하게 먹기 좋지만 살이 디룩 디룩 </dd>
</dl> <!-- 정의 리스트 종료 -->
</body>
</html>
🔽 <dl> 태그 사용해서 출력 🔽
