수색…


소개

HTML은 목록을 지정하는 세 가지 방법, 즉 정렬 목록, 정렬되지 않은 목록 및 설명 목록을 제공합니다. 순서가 지정된 목록은 순서 요소를 사용하여 목록 요소의 순서를 나타내며 순서가 지정되지 않은 목록은 지정된 순서없이 요소를 나열하기 위해 글 머리 기호와 같은 정의 된 기호를 사용하고 설명 목록은 들여 쓰기를 사용하여 요소가있는 자식을 나열합니다. 이 항목에서는 HTML 마크 업에서 이러한 목록의 구현 및 조합에 대해 설명합니다.

통사론

  • <ol> ordered list items </ol>
  • <ul> unordered list items </ul>
  • <li> list item (ordered and not) </li>
  • <dl> description list items </dl>
  • <dt> description list title </dt>
  • <dd> description list description </dd>

비고

참고 사항

<ul style="list-style-type:disc"> 와 같이 각 목록 항목을 표시하는 데 사용되는 아이콘의 종류를 변경하기 위해 <ul> 태그에 목록 스타일 유형의 CSS 속성을 추가 할 수 있습니다. 다음 목록 스타일 유형이 허용됩니다.

  • "list-style-type : disc"가 기본 점입니다.
  • "목록 스타일 유형 : 원"은 채워지지 않은 원입니다.
  • "list-style-type : square"는 채워진 사각형입니다.
  • "list-style-type : none"은 전혀 표시를 사용하지 않습니다.

<ol type="1"> 과 같이 번호 매기기가 수행되는 방식을 변경하기 위해 <ol> 태그에 유형 속성을 추가 할 수도 있습니다. 허용되는 유형은 다음과 같습니다.

  • type = "1"이 기본 형식입니다.
  • type = "A"는 알파벳 순서로 대문자를 사용합니다.
  • type = "a"는 소문자를 알파벳 순서로 사용합니다.
  • type = "I"는 로마 숫자를 대문자로 사용합니다.
  • type = "i"는 소문자 글자와 함께 로마 숫자를 사용합니다.

정렬되지 않은 목록

순서가없는 목록은 <ul> 태그로 만들 수 있으며 각 목록 항목은 아래 예제와 같이 <li> 태그로 만들 수 있습니다.

<ul>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ul>

그러면 기본 스타일 인 글 머리 기호 목록이 생성됩니다.

  • 다른 항목
  • 또 다른 아이템

항목의 순서가 중요하지 않은 항목 목록을 표시하려면 ul 을 사용해야합니다. 항목의 순서를 변경하면 목록이 올바르지 않게되므로 <ol> 를 사용해야합니다.

순서 목록

순서가 지정된 목록은 <ol> 태그로 만들 수 있으며 각 목록 항목은 아래 예제와 같이 <li> 태그로 만들 수 있습니다.

<ol>
  <li>Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

이렇게하면 기본 스타일 인 번호 매기기 목록이 생성됩니다.

  1. 다른 항목
  2. 또 다른 아이템

수동으로 숫자 변경하기

순서가 지정된 목록의 목록 항목에 숫자가 나타나는 방식은 두 가지가 있습니다. 첫 번째 방법은 start 속성을 사용하여 시작 번호를 설정하는 것입니다. 목록은이 정의 된 번호에서 시작하여 평상시처럼 1 씩 증가합니다.

<ol start="3">
  <li>Item</li>
  <li>Some Other Item</li>
  <li>Yet Another Item</li>
</ol>

이렇게하면 기본 스타일 인 번호 매기기 목록이 생성됩니다.

  1. 다른 항목
  2. 또 다른 아이템

특정 목록 항목을 명시 적으로 특정 번호로 설정할 수도 있습니다. 지정된 값을 가진 항목 이후의 추가 목록 항목은 해당 목록 항목의 값에서 1 씩 계속 증가하며 상위 목록의 위치는 무시합니다.

<li value="7"></li>

또한 목록 항목에서 직접 value 특성을 사용하면 더 낮은 값에서 번호 매기기를 다시 시작하여 정렬 된 목록의 기존 번호 매기기 시스템을 재정의 할 수 있습니다. 따라서 상위 목록이 이미 값 7까지이고 값 4의 목록 항목을 발견하면 해당 목록 항목은 계속 4로 표시되고 그 지점부터 다시 계산을 계속합니다.

<ol start="5">
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

위의 예제는 5, 6, 4, 5, 6의 번호 매김 패턴을 따르는리스트를 생성합니다 - 이전 숫자보다 낮은 숫자부터 시작하여리스트에서 숫자 6을 복제하십시오.

참고 : startvalue 속성은 순서가 지정된 목록이 로마 숫자 또는 문자로 표시되도록 설정된 경우에도 숫자 만 허용합니다.

5

ol 요소에서 reversed 을 추가하여 번호 매김을 reversed 할 수 있습니다.

<ol reversed>
  <li>Item</li>
  <li>Some Other Item</li>
  <li value="4">A Reset Item</li>
  <li>Another Item</li>
  <li>Yet Another Item</li>
</ol>

역순으로 번호 매기기는 새로운 podcast 에피소드 나 프리젠 테이션과 같이 목록에 계속 추가하고 가장 최근 항목을 가장 먼저 표시하려는 경우 유용합니다.


숫자 유형 변경

type 속성을 사용하여 목록 항목 마커에 표시된 숫자 유형을 쉽게 변경할 수 있습니다.

<ol type="1|a|A|i|I">
유형 기술 예제들
1 기본값 - 10 진수 1,2,3,4
a 알파벳 순서 (소문자) a, b, c, d
A 알파벳 순서 (대문자) A, B, C, D
i 로마 숫자 (소문자) i, ii, iii, iv
I 로마 숫자 (대문자) I, II, III, IV

ol 을 사용하여 항목 목록을 표시해야하며, 항목이 의도적으로 정렬되고 순서가 강조되어야합니다. 항목 순서를 변경해도 목록이 정확하지 않으면 <ul> 을 사용해야합니다.

설명 목록

설명 목록 (또는 HTML5 이전에 호출 된 정의 목록 )은 dl 요소를 사용하여 만들 수 있습니다. name-value 그룹으로 구성되며 dt 요소에 이름이 주어지며 값은 dd 요소에 제공됩니다.

<dl>
  <dt>name 1</dt>
  <dd>value for 1</dd>
  <dt>name 2</dt>
  <dd>value for 2</dd>
</dl>

라이브 데모

이름 - 값 그룹은 둘 이상의 이름 및 / 또는 둘 이상의 값 (대안을 나타냄)을 가질 수 있습니다.

<dl>

  <dt>name 1</dt>
  <dt>name 2</dt>
  <dd>value for 1 and 2</dd>

  <dt>name 3</dt>
  <dd>value for 3</dd>
  <dd>value for 3</dd>

</dl>

라이브 데모

중첩 목록

목록을 중첩하여 목록 항목의 하위 항목을 나타낼 수 있습니다.

<ul>
  <li>item 1</li>
  <li>item 2
    <ul>
      <li>sub-item 2.1</li>
      <li>sub-item 2.2</li>
    </ul>
  </li>
  <li>item 3</li>
</ul>
  • 항목 1
  • 항목 2
    • 하위 항목 2.1
    • 하위 항목 2.2
  • 항목 3

중첩 목록은 li 요소의 자식이어야합니다.

다른 유형의 목록도 중첩 할 수 있습니다.

<ol>
    <li>Hello, list!</li>
    <li>
        <ul>
            <li>Hello, nested list!</li>
        </ul>
    </li>
</ol>


Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow