[HTML] ul 태그

728x90

목 차

• 1. <ul> 태그란?
• 2. 기본 구조
• 3. CSS 스타일링
  • 3-1. 기본 불릿 (●)
  • 3-2. 사각형 (■)
  • 3-3. 원형 (○)
  • 3-4. 불릿 없음
• 4. 중첩 사용
• 5. 마무리

반응형

 

1. <ul> 태그란?

• HTML의 ul 태그는 "순서가 없는 목록"(unordered list)을 생성할 때 사용하는 태그입니다. 이 태그는 항목의 순서가 중요하지 않은 목록을 표시할 때 적합하며, 각 항목은 보통 점(bullet)으로 표시됩니다. ul 태그는 목록 안에 여러 개의 li 태그(목록 항목)를 포함합니다.

 

2. 기본 구조

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

 

3. CSS 스타일링

• ul 태그 자체에는 특별한 속성이 없지만, 자주 사용되는 CSS 스타일 속성을 통해 목록의 모양을 다양하게 변경할 수 있습니다.

 

3-1. 기본 불릿 (●)

ul {
  list-style-type: disc; /* 기본 불릿 (●)으로 변경 */
}

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

 

 

3-2. 사각형 (■)

ul {
  list-style-type: square; /* 사각형 (■)으로 변경 */
}

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

 

 

3-3. 원형 (○)

ul {
  list-style-type: circle; /* 원형 (○)으로 변경 */
}

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

 

 

3-4. 불릿 없음

ul {
  list-style-type: none; /* 불릿 없음 */
}

• 첫 번째 항목
• 두 번째 항목
• 세 번째 항목

 

4. 중첩 사용

• ul 태그는 중첩해서 사용할 수 있으며, 이는 목록 항목 안에 또 다른 목록을 포함하는 형태입니다. 이 경우 첫 번째 항목 안에 하위 목록이 들어가고, 브라우저는 들여 쓰기를 통해 중첩된 목록을 시각적으로 구분합니다.

<ul>
  <li>첫 번째 항목
    <ul>
      <li>첫 번째 항목의 하위 항목</li>
      <li>두 번째 항목의 하위 항목</li>
    </ul>
  </li>
  <li>두 번째 항목</li>
</ul>

• 첫 번째 항목
  • 첫 번째 항목의 하위 항목
  • 두 번째 항목의 하위 항목
• 두 번째 항목

 

5. 마무리

• ul 태그는 순서가 중요하지 않은 항목들을 나열할 때 매우 자주 사용되는 HTML 태그입니다.