[HTML 강의] 9강 - 리스트(list)를 나타내는 태그 (li, ul, ol tag)

 

[HTML 강의] 9강 - HTML 리스트(list) 태그 <li>, <ul>, <ol>

안녕하세요! 그레이해커 월횽입니다.
오늘은 HTML에서 리스트를 나타내는 태그의 종류와 사용법을 쉽고 명확하게 알아보겠습니다.

반응형

리스트를 나타내는 태그란?

리스트(list) 태그는 웹페이지에서 목록을 표현할 때 사용하는 HTML 태그입니다.
예를 들어, 수업의 목차, 쇼핑몰 상품 목록, 할 일 목록 등 다양한 정보를 구조적으로 나열할 때 활용됩니다.

1. 기초
2. 초급
3. 중급
4. 고급

위와 같이 순서가 있는 목록이나 순서가 없는 목록을 만들 때 <li>, <ul>, <ol> 태그를 사용합니다.

<li> 태그

• <li> 태그는 리스트의 각 항목을 나타냅니다.
• 반드시 <ul> 또는 <ol> 태그 안에 포함되어야 합니다.

<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

728x90

<ul> 태그 - 순서 없는 리스트

• <ul> 태그는 순서가 없는 리스트(불릿 목록)를 만들 때 사용합니다.
• 각 항목 앞에 점(•)이 자동으로 붙습니다.

<ul>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
</ul>

• 리스트1
• 리스트2
• 리스트3

<ol> 태그 - 순서 있는 리스트

• <ol> 태그는 순서가 있는 리스트(번호 목록)를 만들 때 사용합니다.
• 각 항목 앞에 숫자가 자동으로 붙어 정렬됩니다.

<ol>
  <li>리스트1</li>
  <li>리스트2</li>
  <li>리스트3</li>
</ol>

1. 리스트1
2. 리스트2
3. 리스트3

SMALL

ul, ol, li 태그 조합과 활용 팁

• 순서 없는 리스트는 <ul>, 순서 있는 리스트는 <ol>를 사용하세요.
• 리스트 항목은 항상 <li> 태그로 감싸야 합니다.
• 리스트 안에 또 다른 리스트(중첩 리스트)도 만들 수 있습니다.

<ul>
  <li>HTML
    <ul>
      <li>기초</li>
      <li>심화</li>
    </ul>
  </li>
  <li>CSS</li>
</ul>

• HTML
  • 기초
  • 심화
• CSS

MDN에서 ul, ol, li 태그 자세히 알아보기

정리 및 다음 강의 예고

오늘은 HTML 리스트 태그(li, ul, ol)의 역할과 사용법, 예시를 알아보았습니다.
리스트 태그는 웹 개발에서 자주 사용되는 중요한 요소이니 꼭 복습해보세요!
추가적인 질문이나 궁금한 점이 있다면 댓글로 남겨주세요. 즐거운 하루 보내세요!

이전 강의 보기: [HTML 강의] 8강 - 이미지 태그 (img tag)
다음 강의 보기: [HTML 강의] 10강 - 주석 태그 (Comment Tag)

그레이해커 월횽과 함께하는 HTML 강의 시리즈! 실전 웹 개발, 최신 표준, SEO까지 쉽게 배워보세요.