HTML 목록 태그: ul, ol, li 태그의 차이와 활용법

HTML에서 목록을 만드는 데 필수적인 ul, ol, li 태그의 차이와 사용법을 예제로 쉽게 알아봅시다.

목록 태그란?

웹 페이지에서 정보를 보기 쉽게 나열하려면 목록 태그를 사용합니다. HTML의 목록 태그는 콘텐츠를 구조화하고 가독성을 높이는 데 유용합니다. 대표적인 목록 태그로는 ul, ol, li가 있습니다.

HTML 목록 태그의 종류

1. ul: 순서가 없는 목록

ul은 순서가 없는 목록(Unordered List)을 생성합니다.

특징:

• 항목 앞에 점(Bullet)이 기본적으로 표시됩니다.
• 항목 간 순서는 중요하지 않을 때 사용합니다.

예제:

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

 결과:

1. HTML
2. CSS
3. JavaScript

2. ol: 순서가 있는 목록

ol은 순서가 있는 목록(Ordered List)을 생성합니다.

특징:

• 항목이 번호로 표시됩니다.
• 항목 간 순서가 중요할 때 사용합니다.

예제:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ol>

결과:

1. HTML
2. CSS
3. JavaScript

3. li: 목록 항목

li는 목록 항목(List Item)을 나타냅니다.

특징:

• ul이나 ol 내부에 포함되어야 합니다.
• 각 항목을 정의합니다.

예제:

<ul>
  <li>Python</li>
  <li>Ruby</li>
  <li>PHP</li>
</ul>

설명:

li는 각각의 항목을 나타내며, 이를 ul 또는 ol과 함께 사용합니다.

HTML 목록의 활용 사례

1. 네비게이션 메뉴

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

설명: ul을 사용해 네비게이션 메뉴를 구성할 수 있습니다.

2. 단계별 가이드

<ol>
  <li>HTML 문서를 작성합니다.</li>
  <li>CSS를 연결합니다.</li>
  <li>JavaScript로 동작을 추가합니다.</li>
</ol>

설명:
ol은 순서가 중요한 단계별 설명에 적합합니다.

목록 태그에 스타일 적용하기

CSS로 점 모양 변경하기

<ul style="list-style-type: square;">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

설명: list-style-type 속성을 사용해 목록의 점 모양을 변경할 수 있습니다.

가로로 나열된 메뉴 만들기

<ul style="display: flex; gap: 10px;">
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

설명: flexbox를 활용하면 목록을 가로로 배치할 수 있습니다.

목록 태그 사용 시 주의사항

1. ul과 ol의 구분을 명확히 합니다.
   • 순서가 중요하면 ol, 그렇지 않다면 ul을 사용합니다.
2. li는 반드시 목록 태그 내부에 작성하세요
   • 독립적인 li는 HTML 문법 오류를 유발합니다.
3. 접근성을 고려한 디자인
   • 적절한 aria 속성과 명확한 텍스트를 추가해 스크린 리더 사용자도 이해할 수 있도록 합니다.

결론

HTML의 목록 태그는 단순히 콘텐츠를 나열하는 것 이상의 역할을 합니다. 정보를 구조화하고, 레이아웃을 깔끔하게 만드는 데 큰 도움을 줍니다. ul, ol, li 태그의 특징과 사용법을 숙지하면 레이아웃을 깔끔하게 구조화할 수 있습니다.

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 일정액의 수수료를 제공받을 수 있습니다"