CSS list-style 속성 – 리스트 마커 관련 속성을 한 번에 설정

`list-style` 속성의 이해

list-style-type 속성은
리스트 마커(글머리 기호) 관련 속성을 한 번에 지정하는 단축 속성(shorthand property)입니다.

이 속성으로 list-style-type, list-style-image, list-style-position을 한 번에 지정할 수 있습니다.

데모

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

구성 속성

list-style 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

list-style 속성의 구성 속성
`list-style-type`	리스트 마커로 사용할 문자 유형을 지정합니다.
`list-style-image`	리스트 마커로 사용할 이미지를 지정합니다.
`list-style-position`	리스트 마커를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.

형식 구문

값

list-style 속성의 값
<'list-style-type'>	`list-style-type` 속성 값 참조
<'list-style-image'>	`list-style-image` 속성 값 참조
<'list-style-position'>	`list-style-position` 속성 값 참조

구성하는 개별 속성의 값을 순서와 상관없이 지정할 수 있습니다.
하나의 개별 속성 값만을 지정할 수도 있고, 두 개나 세 개의 개별 속성 값을 띄어쓰기로 구분하여 한 번에 지정할 수 있습니다.

구문

CSS

/* 한 개 값 <'list-style-type'> */
list-style: circle;

/* 한 개 값 <'list-style-image'> */
list-style: url("heart.png");

/* 한 개 값 <'list-style-position'> */
list-style: inside;

/* 두 개 값 */
list-style: disc inside;
list-style: url("heart.png") inside;

/* 세 개 값 */
list-style: circle url("heart.png") outside;

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

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

값 지정을 위한 선택자

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

형식 정의

list-style 속성의 형식 정의
`초깃값`	각 개별 속성의 초깃값은 다음과 같습니다. `list-style-type`: `disc` `list-style-image`: `none` `list-style-position`: `outside`
적용 요소	`<li>`나 `<summary>`처럼 `display` 속성의 값이 `list-item`으로 설정된 요소
상속	예
애니메이션	아니오

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

list-style-position 속성의 초깃값은 outside입니다.
하지만, 브라우저의 기본 스타일시트에서는 <summary>의 경우 inside로 설정되어 있습니다.

부연설명
각 브라우저는 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>

예제

여러 가지 예제로 list-style 속성의 설정 방법을 확인해 보세요.

`list-style-type`만 설정하기

`list-style-image`만 설정하기

`list-style-type`과 `list-style-position` 설정하기

HTML

<ol>
    <li>
        list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.
    </li>
    <li>
        outside(초깃값)는 리스트 마커가 리스트 아이템의 <b>바깥쪽에 배치</b>됩니다.
    </li>
    <li>
        inside는 리스트 마커가 리스트 아이템의 <b>안쪽에 배치</b>됩니다.
    </li>
</ol>

`list-style-type`과 `list-style-position`, `list-style-image` 설정하기

CSS

ol {
    max-width: 300px;
    list-style: decimal-leading-zero inside url("heart.png");
}
ol li {
    background: #e1e1e1
}
ol li + li {
    margin-top: 0.7em;
}

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

주의할 점

list-style 속성은 단축 속성(shorthand property)이기 때문에, 이 속성에 값을 새로 지정하면 기존에 지정한 개별 속성들이 모두 덮어씌워집니다.

CSS

ul {
  list-style-type: square;
  list-style-position: inside;
}

/* list-style을 새로 지정하면 기존 개별 속성이 사라짐 */
ul {
  list-style: url("bullet.png"); /* 기존의 type과 position이 초기화됨 */
}

기존 속성을 유지하면서 일부만 변경하려면?

개별 속성을 따로 설정하면 됩니다.

CSS

ul {
  list-style-type: square; /* 기존 타입 유지 */
  list-style-position: inside; /* 기존 위치 유지 */
  list-style-image: url("bullet.png"); /* 이미지 추가 */
}

이렇게 하면 기존 스타일을 유지하면서 새로운 속성을 추가할 수 있습니다.

리스트 마커 스타일하기

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

브라우저 호환성

list-style 속성의 브라우저 호환성
속성	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`list-style`	1	12	1	1

명세서

list-style 속성의 명세서 사양
명세서 사양
`list-style`	CSS Lists and Counters Module Level 3 #list-style-property

참고문헌

MDN - list-style

list-style 속성의 이해

데모