본문 바로가기
IT창고/HTML

HTML 순서 없는 목록 (`<ul>`)과 순서 있는 목록 (`<ol>`)

by 창구창고 2023. 7. 19.
반응형

HTML 순서 없는 목록 (<ul>)과 순서 있는 목록 (<ol>)

HTML에서는 순서 없는 목록과 순서 있는 목록을 생성하기 위해 <ul><ol> 태그를 사용합니다. 이번 글에서는 각각의 목록 태그의 역할과 사용법에 대해 자세히 알아보겠습니다.

순서 없는 목록 (<ul>) 태그

순서 없는 목록은 목록 항목들 사이에 순서를 부여하지 않고 나열하는 데에 사용됩니다. <ul> 태그는 시작 태그(<ul>)와 종료 태그(</ul>)로 이루어져 있으며, 각 항목은 <li> 태그로 감싸집니다.

아래는 순서 없는 목록의 사용 예시입니다:

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

위의 예시에서는

    태그로 순서 없는 목록을 생성하고, 각 항목을
  • 태그로 감싸서 나열했습니다.

순서 있는 목록 (<ol>) 태그

순서 있는 목록은 각 항목들에 번호나 순서를 부여하여 나열하는 데에 사용됩니다. <ol> 태그는 시작 태그(<ol>)와 종료 태그(</ol>)로 이루어져 있으며, 각 항목은 <li> 태그로 감싸집니다.

아래는 순서 있는 목록의 사용 예시입니다:

<ol>
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ol>

위의 예시에서는 <ol> 태그로 순서 있는 목록을 생성하고, 각 항목을 <li> 태그로 감싸서 번호를 부여하여 나열했습니다.

목록 타입 속성

목록 태그(<ul>, <ol>)는 목록의 형식을 지정하는데 사용되는 몇 가지 속성을 가지고 있습니다. 목록 타입 속성을 사용하여 목록의 외관을 조절할 수 있습니다.

  • type 속성: <ol> 태그에서 사용되며, 번호의 형식을 지정합니다. 기본값은 "1"로 아라비아 숫자를 사용합니다. 다른 값으로 "A" (알파벳 대문자), "a" (알파벳 소문자), "I" (로마 숫자 대문자), "i" (로마 숫자 소문자) 등을 사용할 수 있습니다.
  • start 속성: <ol> 태그에서 사용되며, 시작하는 번호를 지정합니다. 기본값은 "1"입니다.
    목록 타입 속성을 활용하여 순서 있는 목록의 형식을 변경하거나 시작 번호를 지정할 수 있습니다.

마무리

HTML의 <ul><ol> 태그를 활용하여 순서 없는 목록과 순서 있는 목록을 생성할 수 있습니다. 각 목록은 <li> 태그로 각 항목을 감싸서 나열합니다. 목록 타입 속성을 사용하여 목록의 외관을 조절할 수 있습니다. 이러한 목록 태그를 활용하여 웹 페이지의 구조를 체계적으로 정리하고 내용을 효과적으로 전달해보세요. 다음 글에서는 HTML의 다른 유용한 요소들에 대해 다루어보겠습니다. 기대해주세요!

반응형

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."