HTML - 리스트(List)

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를 활용해 디자인을 커스터마이징하면 더 나은 사용자 경험을 제공할 수 있습니다.