개발 개념 정리/html, css

[ HTML ] 목록 태그

개발하는 몽키 2025. 3. 11. 20:32

순서 없는 목록 (ul)

• 순서가 중요하지 않은 항목들을 나열할 때 사용
• <ul> 태그 안에 <li> 태그로 항목을 나열

• 예시: 목록 순서가 중요하지 않은 경우 (예: 쇼핑 목록)

<h3>순서 없는 목록</h3>
    <!-- ul - unordered list -->
    <ul>
        <li>순서 없는 목록1</li>
        <li>순서 없는 목록2</li>
        <li>순서 없는 목록3</li>
    </ul>

순서 있는 목록 (ol)

• 항목에 순서가 중요한 경우 사용
• <ol> 태그로 목록을 만들고, 항목은 <li> 태그로 표시
• 예시: 준비물 목록, 작업 순서 등

<h3>순서 있는 목록</h3>
    <!-- ol - ordered list -->
    <ol>
        <li>순서 있는 목록1</li>
        <li>순서 있는 목록2</li>
        <li>순서 있는 목록3</li>
    </ol>

 

설명 목록 (dl)

• 특정 용어나 정의를 설명할 때 사용
• <dl> 태그로 시작하고, <dt>는 설명할 용어, <dd>는 그 용어에 대한 설명을 작성
• 예시: 용어집, 제품 설명 등

<h3>설명 목록</h3>
    <!-- dl - discription list -->
    <!-- dt - define term -->
    <!-- describe description -->
    <dl>
        <dt>HTML</dt>
        <dd>- 웹 페이지 개발을 위한 마크업 언어</dd>
        <dt>CSS</dt>
        <dd>- 웹 페이지 디자인을 위한 언어</dd>
        <dt>자바스크립트</dt>
        <dd>- 웹 페이지를 사용자와 동적처리를 위한 언어</dd>
    </dl>