ul 태그 - 순서 없는 리스트

HTML의 <ul> 태그는 순서 없는 리스트(unordered list)를 생성하는 데 사용되는 요소입니다. 이 태그는 항목들 간에 순서가 중요하지 않을 때 사용되며, 보통 리스트의 항목을 <li> 태그로 나열합니다. <ul> 태그를 사용하면 항목들을 시각적으로 점이나 기타 기호로 구분하여 표시할 수 있습니다.

주요 특징:

1. 순서 없는 리스트: <ul>은 순서가 중요한 리스트가 아닌, 항목들 간에 우선순위나 순서가 필요하지 않은 리스트를 만들 때 사용됩니다. 예를 들어, 쇼핑 목록, 기능 목록 등.
2. 항목을 나열: <ul> 태그 내부에는 하나 이상의 <li>(리스트 아이템) 태그가 포함됩니다. 각 <li>는 리스트의 개별 항목을 나타냅니다.
3. 기본 스타일: 기본적으로 <ul> 태그는 항목을 점으로 표시하며, 이를 통해 항목들이 리스트로 나열됨을 시각적으로 구분합니다. 그러나 CSS를 사용하여 점 대신 다른 스타일을 적용할 수 있습니다.

사용 예시:

<ul>
  <li>커피</li>
  <li>차</li>
  <li>주스</li>
</ul>

설명:

• <ul> 태그는 순서 없는 리스트를 정의합니다.
• 각 <li> 태그는 리스트의 개별 항목을 나타냅니다.
• 기본적으로 항목들은 점으로 구분되어 표시됩니다.

스타일링 예시 (CSS):

<ul style="list-style-type: square;">
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>

위 예시에서는 list-style-type을 사용하여 리스트 항목에 기본 점 대신 사각형 모양의 아이콘을 표시하도록 했습니다. 이 외에도 circle, disc, none 등의 다양한 스타일을 적용할 수 있습니다.

추가 예시: 중첩된 리스트

리스트 항목 안에 또 다른 리스트를 포함하여 중첩된 리스트를 만들 수 있습니다.

<ul>
  <li>과일
    <ul>
      <li>사과</li>
      <li>바나나</li>
      <li>체리</li>
    </ul>
  </li>
  <li>음료
    <ul>
      <li>물</li>
      <li>주스</li>
    </ul>
  </li>
</ul>

설명:

• 위 예시에서는 과일과 음료라는 항목 아래에 각각 다른 리스트(사과, 바나나, 체리, 물, 주스)가 중첩되어 있습니다.
• 중첩된 리스트는 내부적으로 또 다른 <ul> 태그를 사용하여 구현합니다.

<ul> 태그와 <ol> 태그 비교:

• <ul> 태그는 순서 없는 리스트를 만들 때 사용됩니다. 항목의 순서가 중요하지 않은 경우 사용합니다.
• <ol> 태그는 순서 있는 리스트(ordered list)를 만들 때 사용되며, 항목들이 순서대로 표시됩니다.

예시:

<ol>
  <li>첫 번째 항목</li>
  <li>두 번째 항목</li>
  <li>세 번째 항목</li>
</ol>

결론:

<ul> 태그는 웹 페이지에서 순서 없는 리스트를 정의하는 데 사용되는 시맨틱 HTML 요소입니다. 각 항목은 <li> 태그로 구성되며, 기본적으로 점(•)으로 표시됩니다. CSS를 사용하여 리스트의 스타일을 수정할 수 있으며, 중첩된 리스트도 쉽게 만들 수 있습니다. <ul> 태그를 활용하면 콘텐츠를 깔끔하게 나누어 사용자에게 명확하고 구조적인 정보를 제공할 수 있습니다.