CSS 목록 스타일 유형 속성

예시

몇 가지 다른 목록 스타일을 설정합니다.

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

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

정의 및 사용

list-style-type목록에서 목록 항목 마커의 유형을 지정합니다 .

기본값:	디스크
상속:	네
애니메이션 가능:	아니요. 애니메이션 가능 에 대해 읽기
버전:	CSS1
자바스크립트 구문:	개체 .style.listStyleType="사각형"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
list-style-type	1.0	4.0	1.0	1.0	3.5

참고: Edge 18 및 Opera 12 및 이전 버전은 cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana 및 katakana-iroha 값을 지원하지 않습니다.

CSS 구문

list-style-type: value;

속성 값

Value	Description	Play it
disc	Default value. The marker is a filled circle
armenian	The marker is traditional Armenian numbering
circle	The marker is a circle
cjk-ideographic	The marker is plain ideographic numbers
decimal	The marker is a number
decimal-leading-zero	The marker is a number with leading zeros (01, 02, 03, etc.)
georgian	The marker is traditional Georgian numbering
hebrew	The marker is traditional Hebrew numbering
hiragana	The marker is traditional Hiragana numbering
hiragana-iroha	The marker is traditional Hiragana iroha numbering
katakana	The marker is traditional Katakana numbering
katakana-iroha	The marker is traditional Katakana iroha numbering
lower-alpha	The marker is lower-alpha (a, b, c, d, e, etc.)
lower-greek	The marker is lower-greek
lower-latin	The marker is lower-latin (a, b, c, d, e, etc.)
lower-roman	The marker is lower-roman (i, ii, iii, iv, v, etc.)
none	No marker is shown
square	The marker is a square
upper-alpha	The marker is upper-alpha (A, B, C, D, E, etc.)
upper-greek	The marker is upper-greek
upper-latin	The marker is upper-latin (A, B, C, D, E, etc.)
upper-roman	The marker is upper-roman (I, II, III, IV, V, etc.)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

이 예에서는 다양한 목록 항목 마커를 모두 보여줍니다.

ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: armenian;}
ol.e {list-style-type: cjk-ideographic;}
ol.f {list-style-type: decimal;}
ol.g {list-style-type: decimal-leading-zero;}
ol.h {list-style-type: georgian;}
ol.i {list-style-type: hebrew;}
ol.j {list-style-type: hiragana;}
ol.k {list-style-type: hiragana-iroha;}
ol.l {list-style-type: katakana;}
ol.m {list-style-type: katakana-iroha;}
ol.n {list-style-type: lower-alpha;}
ol.o {list-style-type: lower-greek;}
ol.p {list-style-type: lower-latin;}
ol.q {list-style-type: lower-roman;}
ol.r {list-style-type: upper-alpha;}
ol.s {list-style-type: upper-greek;}
ol.t {list-style-type: upper-latin;}
ol.u {list-style-type: upper-roman;}
ol.v {list-style-type: none;}
ol.w {list-style-type: inherit;}

예시

기본 글머리 기호를 제거하고 글머리 기호(•)처럼 보이는 HTML 엔티티를 추가하여 <ul> 또는 <ol>에 글머리 기호 색상을 추가하는 방법:

ul {
list-style: none; /* Remove list bullets */
padding: 0;
margin: 0;
}

li {
  padding-left: 16px;
}

li::before {
  content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
  color: blue; /* Or a color you prefer */
}

CSS 참조

CSS Properties