[HTML] 목록(ol, ul, dl)

HTML 목록: 정보를 체계적으로 정리하다

안녕하세요, 웹 튜토리얼의 세계로 돌아온 여러분! 웹 페이지에서 정보를 체계적으로 나열하려면 어떻게 해야 할까요? 오늘은 HTML에서 제공하는 다양한 '목록 태그'에 대해 함께 알아보겠습니다.

 

1. 목록의 필요성

목록은 정보를 구조화하고 가독성을 높이는데 중요한 역할을 합니다. 사용자가 정보를 한눈에 파악하기 쉽도록 하기 위해 목록을 활용하는 것이 좋습니다.

 

2. 주요 목록 태그들

- 순서 있는 목록: <ol>

순서가 있는 목록은 항목들이 특정한 순서를 가질 때 사용합니다. 예를 들면, 레시피의 조리 단계나 순위를 나타낼 때 사용됩니다.

<ol>
    <li>물을 끓인다.</li>
    <li>티백을 넣는다.</li>
    <li>5분간 기다린다.</li>
</ol>

1. 물을 끓인다.
2. 티백을 넣는다.
3. 5분간 기다린다.

- 순서 없는 목록: <ul>

순서가 중요하지 않은 항목들을 나열할 때 사용합니다. 예를 들면, 장바구니에 담긴 항목이나 메뉴 항목 등을 나타낼 때 사용됩니다.

<ul>
    <li>빵</li>
    <li>우유</li>
    <li>버터</li>
</ul>

• 빵
• 우유
• 버터

- 설명 목록: <dl>, <dt>, <dd>

용어와 그에 대한 설명을 함께 나열할 때 사용합니다.

<dl>
    <dt>HTML</dt>
    <dd>웹 페이지를 작성하기 위한 마크업 언어.</dd>

    <dt>CSS</dt>
    <dd>웹 페이지의 디자인과 스타일을 정의하는 언어.</dd>
</dl>

HTML

웹 페이지를 작성하기 위한 마크업 언어.

CSS

웹 페이지의 디자인과 스타일을 정의하는 언어.

3. 중첩된 목록

목록 안에 또 다른 목록을 넣을 수 있습니다. 이를 통해 정보의 계층 구조를 나타낼 수 있습니다.

<ul>
    <li>과일
        <ul>
            <li>사과</li>
            <li>바나나</li>
        </ul>
    </li>
    <li>야채
        <ul>
            <li>당근</li>
            <li>토마토</li>
        </ul>
    </li>
</ul>

• 과일
  • 사과
  • 바나나
• 야채
  • 당근
  • 토마토

 

마치며

HTML의 목록 태그를 통해 정보를 체계적으로 나열하고 사용자에게 효과적으로 전달할 수 있습니다. 태그의 성격과 용도를 잘 이해하고, 웹 페이지에 적절하게 활용해 보세요! 다음 포스팅에서는 더 다양한 HTML 요소와 그 활용법에 대해 알아보겠습니다. 계속해서 웹의 세계와 함께해 주세요! 🚀