CSS list-style 속성

정의와 사용법

list-style 줄이기 속성은 하나의 선언에서 모든 목록 속성을 설정합니다.

설명

이 속성은 모든 다른 목록 스타일 속성을 포함하는 줄이기 속성입니다. 모든 display가 list-item인 요소에 적용되기 때문에 일반 HTML과 XHTML에서는 li 요소에만 사용할 수 있지만, 실제로는 어떤 요소에도 적용할 수 있으며 list-item 요소에서 상속됩니다.

다음과 같은 순서로 속성을 설정할 수 있습니다:

특정 값이 설정되지 않아도 됩니다. 예를 들어, "list-style:circle inside;"도 허용됩니다. 설정되지 않은 속성은 기본 값이 사용됩니다.

다른 참조:

CSS 가이드:CSS 목록

HTML DOM 참조 가이드:listStyle 속성

예제

이미지를 목록의 목록 항목 표시로 설정합니다:

ul
  {
  list-style:square inside url('/i/arrow.gif');
  }

직접 테스트해 보세요

CSS 문법

list-style: list-style-type list-style-position list-style-image|initial|inherit;

속성 값

값 설명
list-style-type 목록 항목 표시의 유형을 설정합니다. 참조:list-style-type 가능한 값.
list-style-position 목록 항목 표시를 어디에 배치할지 설정합니다. 참조:list-style-position 가능한 값.
list-style-image 목록 항목의 표시를 대체하는 이미지를 사용합니다. 참조:list-style-image 가능한 값.
inherit 부모 요소에서 list-style 속성의 값을 상속해야 합니다.

기술 세부 사항

기본 값: disc outside none
상속성: yes
버전: CSS1
JavaScript 문법: object.style.listStyle="decimal inside"

더 많은 예제

모든 목록 속성을 하나의 선언에서 정의합니다
이 예제에서는 모든 목록 속성을 하나의 줄이기 속성에 설정하는 것을 보여줍니다.

브라우저 지원

표中的 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0