list-style-type 속성의 이해

list-style-type 속성은
리스트 마커(글머리 기호)로 사용할 문자 유형을 지정합니다.

이 속성은 문자(텍스트) 기반의 마커를 지정합니다.
브라우저에서 기본적으로 제공하는 문자 유형을 사용하거나, 원하는 특정 문자 유형을 적용할 수 있습니다.

데모

다음의 CSS 데모로 list-style-type 속성의 설정 방법을 확인해 보세요.

CSS 데모: list-style-type 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    list-style-type: <counter-style> | <string> | none
}

구문

CSS 
/* <counter-style> 값 */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: korean-hangul-formal;
list-style-type: kannada;
list-style-type: upper-roman;
list-style-type: kannada;
...

/* <string> 값 */
list-style-type: "- ";
list-style-type: "😍 ";
list-style-type: "★";

/* 키워드 값 */
list-style-type: none;

/* 전역 값 */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;

값

list-style-type 속성 값
<counter-style> 브라우저에서 기본적으로 제공하는 마커에 사용할 수 있는 문자 유형의 값입니다.
(예: disc, circle, decimal 등)
<string> 리스트 마커로 사용할 사용자 정의 문자열입니다. 콘텐츠를 따옴표로 지정한 텍스트[특수문자, 이모지, 빈 문자열(" ") 포함]로 설정합니다.
(예: "-", "- ", "😍 " , "★"등)
none 리스트 마커로 사용할 문자 유형이 없음을 나타내는 키워드 값입니다. 문자 유형을 리스트 마커로 사용하지 않도록 지정합니다.
이 값을 지정하면 문자 유형의 리스트 마커가 표시되지 않습니다.

list-style-type이 설정되어 있더라도,
list-style-image 속성으로 리스트 마커(글머리 기호)로 사용할 이미지가 설정되어 있으면 설정된 해당 이미지가 리스트 마커로 표시됩니다.

값 지정을 위한 선택자

list-style-type은 기본적으로 상속(inherit)되는 속성입니다.
부모 요소(일반적으로 <ol> 또는 <ul>)에 설정하여 모든 목록 항목에 적용할 수 있습니다.

브라우저에서 기본적으로 제공하는 마커에 사용할 수 있는 문자 유형의 값입니다.

아래의 값들은 대부분의 브라우저에서 지원합니다. 각 브라우저 버전별 호환성은 브라우저 호환성을 참조하세요!

<counter-style> 값
값 예제 설명
disc
list-style-type: disc
  • 라면
  • 김밥
  • 돈까스
 초깃값.
채워진 원
circle
list-style-type: circle
  • 라면
  • 김밥
  • 돈까스
 속이 빈 원
square
list-style-type: square
  • 라면
  • 김밥
  • 돈까스
 채워진 사각형
disclosure-open
list-style-type: disclosure-open
  • 라면
  • 김밥
  • 돈까스
 HTML의 <details>로 나타내는 대화형 웨젯이 열렸음을 나타내는 기호
disclosure-closed
list-style-type: disclosure-closed
  • 라면
  • 김밥
  • 돈까스
 HTML의 <details>로 나타내는 대화형 웨젯이 닫혔음을 나타내는 기호
decimal
list-style-type: decimal
  • 라면
  • 김밥
  • 돈까스
 10진수
cjk-decimal
list-style-type: cjk-decimal
  • 라면
  • 김밥
  • 돈까스
 한자 10진수
decimal-leading-zero
list-style-type: decimal-leading-zero
  • 라면
  • 김밥
  • 돈까스
 한 자릿수의 숫자 앞에 0을 채운 10진수
lower-roman
list-style-type: lower-roman
  • 라면
  • 김밥
  • 돈까스
 소문자 로마 숫자
upper-roman
list-style-type: upper-roman
  • 라면
  • 김밥
  • 돈까스
 대문자 로마 숫자
lower-greek
list-style-type: lower-greek
  • 라면
  • 김밥
  • 돈까스
 소문자 고전 그리스어
lower-alpha
list-style-type: lower-alpha
  • 라면
  • 김밥
  • 돈까스
 소문자 알파벳
lower-latin
list-style-type: lower-latin
  • 라면
  • 김밥
  • 돈까스
 소문자 알파벳
upper-alpha
list-style-type: upper-alpha
  • 라면
  • 김밥
  • 돈까스
 대문자 알파벳
upper-latin
list-style-type: upper-latin
  • 라면
  • 김밥
  • 돈까스
 대문자 알파벳
arabic-indic
list-style-type: arabic-indic
  • 라면
  • 김밥
  • 돈까스
 아랍-인도 숫자
armenian
list-style-type: armenian
  • 라면
  • 김밥
  • 돈까스
 전통적인 아르메니아 번호 매기기
upper-armenian
list-style-type: upper-armenian
  • 라면
  • 김밥
  • 돈까스
 대문자 아르메니아 번호 매기기
lower-armenian
list-style-type: lower-armenian
  • 라면
  • 김밥
  • 돈까스
 소문자 아르메니아 번호 매기기
bengali
list-style-type: bengali
  • 라면
  • 김밥
  • 돈까스
 벵골어 번호 매기기
cambodian
list-style-type: cambodian
  • 라면
  • 김밥
  • 돈까스
 캄보디아/크메르어 번호 매기기
khmer
ist-style-type: khmer
  • 라면
  • 김밥
  • 돈까스
 캄보디아/크메르어 번호 매기기
cjk-earthly-branch
list-style-type: cjk-earthly-branch
  • 라면
  • 김밥
  • 돈까스
 한자의 "지(地)" 서수형
cjk-heavenly-stem
list-style-type: cjk-heavenly-stem
  • 라면
  • 김밥
  • 돈까스
 한자의 "천간(天幹)" 서수형
cjk-ideographic
list-style-type: cjk-ideographic
  • 라면
  • 김밥
  • 돈까스
 중국어 번체 비공식 번호 매기기
(trad-chinese-informal 값과 동일)
devanagari
list-style-type: devanagari
  • 라면
  • 김밥
  • 돈까스
 데바나가리 숫자
ethiopic-numeric
list-style-type: ethiopic-numeric
  • 라면
  • 김밥
  • 돈까스
 에티오피아식 번호 매기기
georgian
list-style-type: georgian
  • 라면
  • 김밥
  • 돈까스
 전통적인 조지아 번호 매기기
gujarati
list-style-type: gujarati
  • 라면
  • 김밥
  • 돈까스
 구자라트어 ​​번호 매기기
gurmukhi
list-style-type: gurmukhi
  • 라면
  • 김밥
  • 돈까스
 구르무키 번호 매기기
hebrew
list-style-type: hebrew
  • 라면
  • 김밥
  • 돈까스
 구르무키 번호 매기기
hiragana
list-style-type: hiragana
  • 라면
  • 김밥
  • 돈까스
 사전순 히라가나 문자
hiragana-iroha
list-style-type: hiragana-iroha
  • 라면
  • 김밥
  • 돈까스
 이로하 순서 히라가나 문자
japanese-formal
list-style-type: japanese-formal
  • 라면
  • 김밥
  • 돈까스
 법률 또는 재무 문서에 사용되는 일본어 공식 번호 매기기
japanese-informal
list-style-type: japanese-informal
  • 라면
  • 김밥
  • 돈까스
 비공식 일본어 한자 번호 매기기
kannada
list-style-type: kannada
  • 라면
  • 김밥
  • 돈까스
 칸나다어 번호 매기기
katakana
list-style-type: katakana
  • 라면
  • 김밥
  • 돈까스
 사전순 카타카나 문자
katakana-iroha
list-style-type: katakana-iroha
  • 라면
  • 김밥
  • 돈까스
 이로하 순서 히라가나 카타카나 문자
korean-hangul-formal
list-style-type: korean-hangul-formal
  • 라면
  • 김밥
  • 돈까스
 한글 번호 매기기
korean-hanja-formal
list-style-type: korean-hanja-formal
  • 라면
  • 김밥
  • 돈까스
 공식 한국어 한자 번호 매기기
korean-hanja-informal
list-style-type: korean-hanja-informal
  • 라면
  • 김밥
  • 돈까스
 비공식 한국어 한자 번호 매기기
lao
list-style-type: lao
  • 라면
  • 김밥
  • 돈까스
 라오스의 번호 매기기
malayalam
list-style-type: malayalam
  • 라면
  • 김밥
  • 돈까스
 말라얄람어 번호 매기기
mongolian
list-style-type: mongolian
  • 라면
  • 김밥
  • 돈까스
 몽골의 번호 매기기
myanmar
list-style-type: myanmar
  • 라면
  • 김밥
  • 돈까스
 미얀마 번호 매기기
oriya
list-style-type: oriya
  • 라면
  • 김밥
  • 돈까스
 오리야어 번호 매기기
persian
list-style-type: persian
  • 라면
  • 김밥
  • 돈까스
 페르시아 번호 매기기
simp-chinese-formal
list-style-type: simp-chinese-formal
  • 라면
  • 김밥
  • 돈까스
 간체 중국어 공식 번호 매기기
simp-chinese-informal
list-style-type: simp-chinese-informal
  • 라면
  • 김밥
  • 돈까스
 간체 중국어 비공식 번호 매기기
tamil
list-style-type: tamil
  • 라면
  • 김밥
  • 돈까스
 타밀어 번호 매기기
telugu
list-style-type: telugu
  • 라면
  • 김밥
  • 돈까스
 텔루구어 번호 매기기
thai
list-style-type: thai
  • 라면
  • 김밥
  • 돈까스
 태국 번호 매기기
tibetan
list-style-type: tibetan
  • 라면
  • 김밥
  • 돈까스
 티베트 번호 매기기
trad-chinese-formal
list-style-type: trad-chinese-formal
  • 라면
  • 김밥
  • 돈까스
 중국어 번체 공식 번호 매기기
trad-chinese-informal
list-style-type: trad-chinese-informal
  • 라면
  • 김밥
  • 돈까스
 중국어 번체 비공식 번호 매기기

리스트 마커로 사용할 사용자 정의 문자열입니다. 콘텐츠를 따옴표로 지정한 텍스트[특수문자, 이모지, 빈 문자열(" ") 포함]로 설정합니다.

HTML 
<h5>list-style-type: "- ";</h5>
<ul class="a">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
<h5>list-style-type: "😍 ";</h5>
<ul class="b">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
<h5>list-style-type: "★";</h5>
<ul class="c">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
CSS 
.a {
    list-style-type: "- ";
}
.b {
    list-style-type: "😍 ";
}
.c {
    list-style-type: "★";
}
실제 적용된 모습

리스트 마커로 사용할 문자 유형이 없음을 나타내는 키워드 값입니다. 문자 유형을 리스트 마커로 사용하지 않도록 지정합니다.
이 값을 지정하면 문자 유형의 리스트 마커가 표시되지 않습니다.

HTML 
<h5>list-style-type: none;</h5>
<ul class="d">
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
</ul>
CSS 
.d {
    list-style-type: none;
}
실제 적용된 모습

list-style-type: none으로 설정되어 있더라도,
list-style-image 속성으로 리스트 마커(글머리 기호)로 사용할 이미지가 설정되어 있으면 설정된 해당 이미지가 리스트 마커로 표시됩니다.

CSS 
.d {
    list-style-type: none;
    list-style-image: url("heart.png");
}
실제 적용된 모습

형식 정의

list-style-type 속성의 형식 정의
초깃값 disc
적용 요소 <li>나 <summary>처럼 display 속성의 값이 list-item으로 설정된 요소
상속 예
애니메이션 아니오

list-style-type 속성의 초깃값은 disc입니다.
하지만, 브라우저의 기본 스타일시트에서는 부모 요소(<ol> 또는 <ul>)에 따라 그 값이 다르게 설정되어 있습니다. 또한 <summary>의 경우에는 대화형 웨젯이 열렸음을 나타내는 기호로 disclosure-open, 닫혔음을 나타내는 기호로 disclosure-closed를 list-style-type 속성의 값으로 설정하고 있습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<ul>
    <li>
        <ul>
            <li>li</li>
            <li>li</li>
            <li>
                <ul>
                    <li>li</li>
                    <li>li</li>
                    <li>li</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>li</li>
    <li>li</li>
</ul>
<ol>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ol>
<details>
    <summary>요약 내용</summary>
    추가 정보나 세부 내용
</details>
실제 적용된 모습

리스트 마커 스타일하기

CSS를 사용하여 리스트 마커를 스타일링하는 다양한 방법에 대해 소개합니다.
CSS list marker 스타일하기를 참조하세요!

list-style-type 속성과 값의 브라우저 호환성
속성과 값
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
list-style-type 1 12 1 1
<string> 79 79 39 14.1
none 1 12 72 1
disc 1 12 1 1
circle 1 12 1 1
square 1 12 1 1
disclosure-open 89 89 33 15
disclosure-closed 89 89 33 15
decimal 1 12 1 1
cjk-decimal 91 91 28 15
decimal-leading-zero 1 12 1 1
lower-roman 1 12 1 1
upper-roman 1 12 1 1
lower-greek 1 12 1 1
lower-alpha 1 12 1 1
lower-latin 1 12 1 1
upper-alpha 1 12 1 1
upper-latin 1 12 1 1
armenian 1 12 1 1
upper-armenian 13 79 33 5.1
lower-armenian 13 79 33 5.1
arabic-indic 6 79 33 5
bengali 6 79 33 5
cambodian 6 79 33 5
khmer 6 79 33 5
cjk-earthly-branch 6 79 33 5
cjk-heavenly-stem 6 79 33 5
cjk-ideographic 1 79 1 5
devanagari 6 79 33 5
ethiopic-numeric 91 91 33 15
georgian 1 12 1 1
gujarati 6 79 33 15
gurmukhi 6 79 33 15
hebrew 1 12 1 1
hiragana 1 12 1 1
hiragana-iroha 1 12 1 1
japanese-formal 91 91 28 15
japanese-informal 91 91 28 15
kannada 6 79 33 5
katakana 1 12 1 1
katakana-iroha 1 12 1 1
korean-hangul-formal 45 79 28 15
korean-hanja-formal 45 79 28 15
korean-hanja-informal 45 79 28 15
lao 6 79 33 5
malayalam 6 79 33 5
mongolian 6 79 33 5
myanmar 6 79 33 5
oriya 6 79 33 5
persian 6 79 33 5
simp-chinese-formal 45 79 28 15
simp-chinese-informal 45 79 28 15
tamil 91 91 33 15
telugu 6 79 33 5
thai 6 79 33 5
tibetan 6 79 33 5
trad-chinese-formal 45 79 28 15
trad-chinese-informal 45 79 28 15

명세서

list-style-type 속성의 명세서 사양
명세서 사양
list-style-type CSS Lists and Counters Module Level 3
#text-markers

참고문헌

같이 보기