본문 바로가기
HTML&CSS

ul li와 ol li의 차이

by 작업자C 2024. 10. 7.
728x90
<ul>과 <ol>은 둘 다 목록을 생성하는 HTML 태그이지만, 각각의 용도와 표시 방식에 차이가 있습니다. 각 목록은 <li> 태그를 사용하여 항목을 정의합니다.

차이점

  1. <ul> (Unordered List - 순서 없는 목록):
    • 의미: 항목에 순서가 없을 때 사용하는 목록입니다.
    • 표시 방식: 기본적으로 항목 앞에 **불릿 포인트(●)**로 표시됩니다.
    • 사용 예시: 항목 순서가 중요하지 않은 목록을 나타낼 때 사용합니다.
  2. <ol> (Ordered List - 순서 있는 목록):
    • 의미: 항목에 순서가 있을 때 사용하는 목록입니다.
    • 표시 방식: 기본적으로 항목 앞에 **숫자(1., 2., 3.,)**로 표시됩니다.
    • 사용 예시: 항목 순서가 중요하거나 단계적인 순서가 있는 목록을 나타낼 때 사용합니다.

예시

순서 없는 목록 (<ul>)

  • 사과
  • 바나나
  • 체리
<ul>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
</ul>

순서 있는 목록 (<ol>)

  1. 사과
  2. 바나나
  3. 체리
<ol>
    <li>사과</li>
    <li>바나나</li>
    <li>체리</li>
</ol>

주요 차이 요약

  • <ul>: 목록이 순서가 없고 불릿 포인트로 항목을 표시.
  • <ol>: 목록이 순서가 있으며 번호로 항목을 표시.

<li> 태그는 두 목록 모두에서 각 항목을 나타내며, 목록의 종류에 따라 항목의 앞부분 표시가 달라집니다.

728x90