수색…
소개
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>
이렇게하면 기본 스타일 인 번호 매기기 목록이 생성됩니다.
- 목
- 다른 항목
- 또 다른 아이템
수동으로 숫자 변경하기
순서가 지정된 목록의 목록 항목에 숫자가 나타나는 방식은 두 가지가 있습니다. 첫 번째 방법은 start 속성을 사용하여 시작 번호를 설정하는 것입니다. 목록은이 정의 된 번호에서 시작하여 평상시처럼 1 씩 증가합니다.
<ol start="3">
<li>Item</li>
<li>Some Other Item</li>
<li>Yet Another Item</li>
</ol>
이렇게하면 기본 스타일 인 번호 매기기 목록이 생성됩니다.
- 목
- 다른 항목
- 또 다른 아이템
특정 목록 항목을 명시 적으로 특정 번호로 설정할 수도 있습니다. 지정된 값을 가진 항목 이후의 추가 목록 항목은 해당 목록 항목의 값에서 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을 복제하십시오.
참고 : start 및 value 속성은 순서가 지정된 목록이 로마 숫자 또는 문자로 표시되도록 설정된 경우에도 숫자 만 허용합니다.
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>
