<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>목록 페이지</title>
</head>
<body>
<!-- HTML에서 목록의 종류
1. 무순서 목록 <ul> (동그라미로 리스트 표현)
2. 순서 목록 <ol> (번호로 리스트 표현)
3. 정의형 목록 <dl>
내부 항목 처리 태그 <li>
정의형 항목 처리 태그 <dt>, <dd>
-->
<!-- 무순서 목록
기호의 변경 : style 속성으로 모양을 지정
"list-style-type: disc;" : 기본값. 채워진 원
"list-style-type: circle;" : 속이 빈 원
"list-style-type: square;" : 채워진 정사각형
"list-style-type: none;" : 기호 없음
-->
<section>
<article>
<h2>무순서 목록</h2>
<ul>
<li>Coffee</li>
<li>tea</li>
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</ul>
<ul style="list-style-type: square;"><!-- 리스트 점 네모로 표현 -->
<li>Coffee</li>
<li>tea</li>
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</ul>
<ul style="list-style-type: none;"><!-- 리스트 점 없이 표현-->
<li>Coffee</li>
<li>tea</li>
<ul>
<li>Black Tea</li>
<li>Green Tea</li>
</ul>
</ul>
</article>
</section>
<hr>
<!-- 순서 목록 -->
<section>
<article>
<h2>순서 목록</h2>
<ol>
<li>비빔밥</li>
<li>볶음밥</li>
<li>김치찌개</li>
<li>된장찌개</li>
</ol>
<ol type="A"><!-- type 지정 가능 : 그럼 번호가 ABC형식으로 표현됨-->
<li>비빔밥</li>
<li>볶음밥</li>
<li>김치찌개</li>
<li>된장찌개</li>
</ol>
<ol style="list-style-type: square;"><!-- 그냥 리스트점 네모모양으로 출력됨 -->
<li>비빔밥</li>
<li>볶음밥</li>
<li>김치찌개</li>
<li>된장찌개</li>
</ol>
<ol type="i"><!-- i,ii 이런형식으로 출력 됨 -->
<li>비빔밥</li>
<li>볶음밥</li>
<li>김치찌개</li>
<li>된장찌개</li>
</ol>
</article>
</section>
<hr>
<!-- 정의형 목록 --><!-- 이건 잘 안쓰임 -->
<section>
<article>
<h2>정의형 목록</h2>
<dl>
<dt>컴퓨터학</dt>
<dd>- 데이터 통신</dd>
<dd>- 인공지능</dd>
<dt>기초과학</dt>
<dd>- 수학</dd>
<dd>- 물리학</dd>
<dt>디자인학</dt>
<dd>- 산업디자인</dd>
<dd>- 패션디자인</dd>
</dl>
</article>
</section>
</body>
</html>
