HTML에서는 정보를 체계적으로 정리하고 표현하기 위해 다양한 형태의 리스트(list)를 제공합니다. 이번 포스트에서는 HTML 리스트의 종류와 사용법을 알아보겠습니다.
1. 순서가 없는 리스트 (Unordered List)
순서가 없는 리스트는 <ul> 태그로 시작하며, 항목마다 <li> 태그를 사용하여 항목을 추가합니다. 이 리스트는 항목 순서가 중요하지 않을 때 유용하며, 기본적으로 각 항목 앞에 검은 원(bullet)이 표시됩니다.
기본 예제
<ul>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ul>
마커 스타일 변경
CSS의 list-style-type 속성을 활용하면 기본 마커를 다양한 형태로 바꿀 수 있습니다.
- disc: 기본 검은 원
- circle: 빈 원
- square: 사각형
스타일 적용 예제
<ul style="list-style-type: circle;">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ul>
<ul style="list-style-type: square;">
<li>딸기</li>
<li>복숭아</li>
<li>포도</li>
</ul>
rr
rr
2. 순서가 있는 리스트 (Ordered List)
순서가 있는 리스트는 <ol> 태그를 사용하며, 각 항목은 <li> 태그로 작성합니다. 항목 순서가 중요한 경우에 유용하며, 기본적으로 숫자 마커가 표시됩니다.
기본 예제
<ol>
<li>사과</li>
<li>멜론</li>
<li>바나나</li>
</ol>
마커 스타일 변경
list-style-type 속성을 사용해 숫자 대신 다양한 스타일을 적용할 수 있습니다.
- decimal: 숫자 (기본값)
- upper-alpha: 대문자 알파벳
- lower-alpha: 소문자 알파벳
- upper-roman: 로마 숫자 (대문자)
- lower-roman: 로마 숫자 (소문자)
스타일 적용 예제
<ol style="list-style-type: upper-alpha;">
<li>수박</li>
<li>참외</li>
<li>옥수수</li>
</ol>
<ol style="list-style-type: lower-roman;">
<li>감자</li>
<li>고구마</li>
<li>양파</li>
</ol>
3. 정의 리스트 (Definition List)
정의 리스트는 용어와 그 설명을 구조적으로 표시할 때 사용합니다. <dl> 태그를 사용하며, 용어는 <dt> 태그에, 설명은 <dd> 태그에 작성합니다.
기본 예제
<dl>
<dt>호박</dt>
<dd>- 덩굴성 채소로 박과에 속함</dd>
<dt>상추</dt>
<dd>- 국화과의 채소로 신선한 잎 채소</dd>
</dl>
활용 예제
<dl>
<dt>HTML</dt>
<dd>- 웹 문서를 구조화하기 위한 언어</dd>
<dt>CSS</dt>
<dd>- 웹 문서의 스타일과 디자인을 담당하는 언어</dd>
<dt>JavaScript</dt>
<dd>- 웹 페이지에 동적인 기능을 추가하는 언어</dd>
</dl>
HTML 리스트는 정보를 효과적으로 나열하고 정리하는 데 필수적인 요소입니다. 순서의 유무, 용어와 정의 등 목적에 맞는 리스트를 선택하고 CSS를 활용해 디자인을 커스터마이징하면 더 나은 사용자 경험을 제공할 수 있습니다.
'Web > html' 카테고리의 다른 글
HTML 요소의 타입 - 블록(Block)과 인라인(Inline) (0) | 2025.01.24 |
---|---|
HTML - 테이블 (2) | 2025.01.23 |
HTML - 이미지 (0) | 2025.01.21 |
HTML - 링크 (0) | 2025.01.20 |
STYLE - 배경 (0) | 2025.01.17 |