HTML <li> 태그

❮ 이전 완전한 HTML 참조 다음 ❯

예시

순서가 지정된(<ol>) HTML 목록과 순서가 지정되지 않은(<ul>) HTML 목록:

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

<li>태그는 목록 항목을 정의합니다 .

<li>태그는 정렬된 목록( < ol> ), 정렬되지 않은 목록( <ul> ) 및 메뉴 목록( <menu> ) 내부에서 사용됩니다.

<ul> 및 <menu>에서 목록 항목은 일반적으로 글머리 기호로 표시됩니다.

<ol>에서 목록 항목은 일반적으로 숫자나 문자로 표시됩니다.

팁: CSS를 사용하여 목록의 스타일 을 지정하십시오 .

브라우저 지원

Element
<li>	Yes	Yes	Yes	Yes	Yes

속성

Attribute	Value	Description
value	number	Only for <ol> lists. Specifies the start value of a list item. The following list items will increment from that number

전역 속성

<li>태그는 HTML의 전역 속성도 지원 합니다 .

이벤트 속성

<li>태그는 HTML의 이벤트 속성 도 지원합니다 .

더 많은 예

예시

정렬된 목록에서 값 속성 사용:

<ol>
<li value="100">Coffee</li>
<li>Tea</li>
<li>Milk</li>
<li>Water</li>
<li>Juice</li>
<li>Beer</li>
</ol>

예시

다양한 목록 스타일 유형 설정(CSS 사용):

<ol>
<li>Coffee</li>
<li style="list-style-type:lower-alpha">Tea</li>
<li>Milk</li>
</ol>

<ul>
<li>Coffee</li>
<li style="list-style-type:square">Tea</li>
<li>Milk</li>
</ul>

예시

목록 안에 목록 만들기(중첩 목록):

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
</li>
<li>Milk</li>
</ul>

예시

더 복잡한 중첩 목록을 만듭니다.

<ul>
<li>Coffee</li>
<li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
</li>
<li>Milk</li>
</ul>

기본 CSS 설정

대부분의 브라우저는 <li>다음 기본값으로 요소를 표시합니다.

li {
display: list-item;
}