깔끔하게 정리! 순서 없는 리스트 ul, li 태그

 

웹 페이지에서 항목들을 순서 없이 나열하고 싶을 때, <ul> 태그와 <li> 태그를 사용하면 깔끔하고 효과적으로 정보를 전달할 수 있습니다. <ul>은 Unordered List의 약자로, 순서가 없는 목록을 의미하며, <li>는 List Item의 약자로 목록의 각 항목을 나타냅니다. 이 두 태그를 함께 사용하여 보기 좋은 리스트를 만들어 보세요!

 

 

---

 

ul 태그: 순서 없는 리스트 만들기

<ul> 태그는 순서 없는 리스트를 정의하는 태그입니다. <ul> 태그 안에 <li> 태그를 넣어 리스트의 각 항목을 표시합니다. 브라우저는 기본적으로 각 항목 앞에 불릿 기호(•)를 표시합니다.

 

예시:

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>포도</li>
</ul>

위 코드는 다음과 같이 표시됩니다.

 

• 사과
• 바나나
• 포도

 

 

---

 

li 태그: 리스트 항목 추가하기

<li> 태그는 리스트의 각 항목을 나타내는 태그입니다. <ul> 태그 안에 여러 개의 <li> 태그를 넣어 여러 항목을 표시할 수 있습니다.

 

type 속성: 불릿 기호 변경하기

<ul> 태그의 type 속성을 사용하면 불릿 기호의 모양을 변경할 수 있습니다. type 속성에는 disc(●, 기본값), circle(○), square(■) 값을 지정할 수 있습니다.

 

예시:

<ul type="circle">
  <li>빨강</li>
  <li>노랑</li>
  <li>파랑</li>
</ul>

위 코드는 다음과 같이 표시됩니다.

 

• 빨강
• 노랑
• 파랑

 

 

---

 

중첩 리스트: 리스트 안에 리스트 넣기

<ul> 태그 안에 다른 <ul> 태그를 넣어 중첩 리스트를 만들 수 있습니다. 이를 통해 계층적인 구조를 표현할 수 있습니다.

예시:

<ul>
  <li>과일
    <ul>
      <li>사과</li>
      <li>바나나</li>
    </ul>
  </li>
  <li>채소
    <ul>
      <li>당근</li>
      <li>오이</li>
    </ul>
  </li>
</ul>

위 코드는 다음과 같이 표시됩니다.

 

• 과일
  • 사과
  • 바나나
• 채소
  • 당근
  • 오이

 

 

---

 

마무리

<ul> 태그와 <li> 태그를 사용하여 웹 페이지에 순서 없는 리스트를 쉽게 추가할 수 있습니다. type 속성을 활용하여 불릿 기호를 변경하고, 중첩 리스트를 통해 계층적인 정보를 효과적으로 표현해 보세요!

 

HTML 순서대로 배우기