HTML 문서에서 사용할 수 있는 목록(list)에는 크게 세 가지 종류가 있습니다. 바로 순서 없는 목록(Unordered List), 순서 있는 목록(Ordered List), 그리고 설명 목록(Description List)입니다.
순서 없는 HTML 목록 (Unordered List)
순서 없는 목록은 <ul> 태그로 정의하며, 각 목록 항목은 <li> 태그로 감싸서 작성합니다. 브라우저에서는 각 항목 앞에 불릿(bullet) 기호가 표시되는 것이 특징입니다.
문법
기본 문법은 다음과 같습니다.
<ul> <li>목록 항목</li> <li>목록 항목</li> <li>목록 항목</li> </ul>
순서 있는 HTML 목록 (Ordered List)
순서 있는 목록은 <ol> 태그로 정의하며, 마찬가지로 각 항목을 <li> 태그로 감쌉니다. 항목 앞에 번호가 순차적으로 붙기 때문에 단계나 순위를 나타낼 때 유용합니다.
문법
기본 문법은 다음과 같습니다.
<ol> <li>목록 항목</li> <li>목록 항목</li> <li>목록 항목</li> </ol>
설명 HTML 목록 (Description List)
설명 목록은 <dl> 태그로 정의합니다. 이때 정의할 용어(term)는 <dt> 태그로, 해당 용어에 대한 설명(description)은 <dd> 태그로 각각 감싸서 작성합니다. 용어집이나 FAQ 형태의 콘텐츠를 만들 때 자주 활용됩니다.
문법
기본 문법은 다음과 같습니다.
<dl> <dt>용어</dt> <dd>용어 설명</dd> <dt>용어</dt> <dd>용어 설명</dd> </dl>
이제 세 가지 목록을 모두 활용한 HTML 예제 코드를 살펴보겠습니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
}
</style>
<body>
<h1>HTML 목록 데모</h1>
<h3>순서 없는 목록</h3>
<ul>
<li>물리학 과목</li>
<li>화학 과목</li>
<li>경제학 과목</li>
</ul>
<h3>순서 있는 목록</h3>
<ol>
<li>물리학 교재 1권</li>
<li>물리학 교재 2권</li>
<li>물리학 교재 3권</li>
</ol>
<h3>설명 목록</h3>
<dl>
<dt>물리학 교재</dt>
<dd>- 현대 물리학과 양자 물리학을 다룹니다</dd>
<dt>화학 교재</dt>
<dd>- 유기화학, 무기화학, 물리화학을 다룹니다</dd>
</dl>
</body>
</html>실행 결과
