HTML은 문서의 내용을 체계적으로 정리할 수 있도록 세 가지 유형의 목록(list)을 제공합니다.
- 순서 없는 목록 <ul> — 항목 앞에 불릿(bullet) 기호가 붙으며, 항목 간에 특별한 순서가 없는 목록입니다.
- 순서 있는 목록 <ol> — 숫자나 문자 등으로 항목에 순서를 부여하는 목록입니다.
- 정의 목록 <dl> — 용어(<dt>)와 그에 대한 설명(<dd>)을 짝지어 표시하는 목록입니다.
이 목록들은 서로 중첩(nesting)하여 사용할 수 있으며, CSS의 list-style 속성을 활용하면 불릿 모양이나 번호 스타일 등을 자유롭게 꾸밀 수 있습니다.
기본 문법
HTML 목록의 기본 작성 문법은 다음과 같습니다.
<목록 태그>
<li></li>
</목록 태그>
아래 예제들을 통해 HTML 목록의 실제 활용 방법을 살펴보겠습니다.
예제 1: 순서 있는 목록과 순서 없는 목록의 중첩
<!DOCTYPE html>
<html>
<head>
<style>
ul {
background-color: papayawhip;
list-style-type: square;
font-style: italic;
}
ol {
background-color: azure;
}
</style>
</head>
<body>
<ol>
<li>demo1</li>
<li>
demo 2
<ul>
<li>demo a</li>
<li>demo b</li>
</ul>
</li>
<li>demo 3</li>
</ol>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다. 순서 있는 목록 안에 사각형 불릿 스타일의 순서 없는 목록이 중첩되어 표시되는 것을 확인할 수 있습니다.
예제 2: 정의 목록(dl) 활용하기
<!DOCTYPE html>
<html>
<head>
<style>
dt {
font-weight: bold;
font-style: italic;
}
dd {
border: thin dotted;
}
</style>
</head>
<body>
<h2>Programming Languages and Databases</h2>
<dl>
<dt>Java</dt>
<dd>A programming language developed by James Gosling.</dd>
<dt>C++</dt>
<dd>A programming language developed by Bjarne Stroustrup.</dd>
<dt>MySQL</dt>
<dd>MySQL is an open-source relational database management system.</dd>
</dl>
</body>
</html>
실행 결과
위 코드를 실행하면 용어와 설명이 짝을 이루는 정의 목록이 출력됩니다. 이처럼 <dl>은 용어집이나 FAQ 같은 콘텐츠를 표현할 때 특히 유용합니다.
