[HTML/CSS] 웹페이지에서 목록을 만드는 데 사용되는 HTML 태그 <ul>, <ol>, <li>

J·2023년 6월 8일
0

HTML/CSS

목록 보기
2/3

ul : unordered list, 비정렬 목록 태그

  • ul 요소는 순서가 중요하지 않은 목록을 나타낼 때 사용함. ul 요소 내 들어갈 항목의 순서가 필요하다면 ol 요소를 사용. ul 과 ol 의 직계 자식 요소로는 오직 li 요소만 올 수있으며 하나 이상의 자식을 가져야 함.
  • 예를 들면,
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    해당 코드는 이렇게 나타남.
    • Item 1
    • Item 2
    • Item 3

ol : ordered list, 정렬 목록 태그

  • ol 요소는 순서가 중요한 목록을 나타낼 때 사용함. ul 과 ol 요소의 차이가 순서의 중요성에 있는 만큼 ul 태그로 마크업 된 목록의 항목은 불릿(•)으로 표시되는 반면 ol 태그로 마크업 된 목록의 항목은 숫자료 표시됨.
  • 예를 들면,
    <ol>
      <li>First item</li>
      <li>Second item</li>
      <li>Third item</li>
    </ol>
    해당 코드는 이렇게 나타남.
    1. First item
    2. Second item
    3. Third item

li : list item, 목록의 항목 태그

  • li 요소는 목록 내 아이템을 나타냄. 따라서 반드시 목록을 나타내는 ul 혹은 ol 요소 내 항목으로 li 요소가 위치함.
  • ul 및 ol 요소는 목록을 만드는 데 사용하며 li 요소는 목록의 항목을 나타냄. HTML 코드가 유효하고 웹 페이지가 올바르게 표시되도록 하려면 HTML의 해당 규칙을 따라야 함.

reference

profile
벨로그로 이사 중

0개의 댓글