HTML <li> 태그

정의와 사용법

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

<li> 태그는 정렬 목록에 사용됩니다 (<ol>)、비정렬 목록 (<ul>)과 메뉴 목록 (<menu>)에 있습니다.

<ul>와 <menu>에서, 목록 항목은 일반적으로 목록 기호로 표시됩니다.

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

힌트:CSS를 사용하여:목록 스타일 설정하기。

자세히 보기:

HTML 강의:HTML 목록

HTML DOM 참조 설명서:Li 객체

CSS 강의:목록 스타일 설정하기

실례

예제 1

정렬 (<ol>)과 비정렬 (<ul>)의 HTML 목록:

<ol>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ol>
<ul>
  <li>커피</li>
  <li>차</li>
  <li>우유</li>
</ul>

직접 테스트해 보세요

예제 2

정렬 목록에서 value 속성 사용하기:

<ol>
  <li value="100">커피</li>
  <li>차</li>
  <li>우유</li>
  <li>순수 물</li>
  <li>주스</li>
  <li>맥주</li>
</ol>

직접 테스트해 보세요

예제 3

다른 목록 스타일 유형 설정하기(CSS 사용):

<ol>
  <li>커피</li>
  <li style="list-style-type:lower-alpha">차</li>
  <li>우유</li>
</ol>
<ul>
  <li>커피</li>
  <li style="list-style-type:square">차</li>
  <li>우유</li>
</ul>

직접 테스트해 보세요

예제 4

리스트에 리스트를 생성하세요(들여쓰기 리스트):

<ul>
  <li>커피</li>
  <li>차
    <ul>
      <li>보이차</li>
      <li>녹차</li>
    </ul>
  </li>
  <li>우유</li>
</ul>

직접 테스트해 보세요

예제 5

더 복잡한 내장 목록을 생성하세요:

<ul>
  <li>커피</li>
  <li>차
    <ul>
      <li>보이차</li>
      <li>녹차
        <ul>
          <li>비로초</li>
          <li>룽정</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>우유</li>
</ul>

직접 테스트해 보세요

속성

속성 값 설명
value 숫자 예: <ol> 목록에만 적용됩니다. 목록 항목의 시작 값을 정의합니다. 이후의 목록 항목은 이 숫자에서 증가합니다.

전체 속성

<li> 태그는 또한 HTML에서의 전체 속성。

이벤트 속성을 지원합니다

<li> 태그는 또한 HTML에서의 이벤트 속성。

기본 CSS 설정

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

li {
  display: list-item;
}

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원