list-style-image 속성의 이해

list-style-image 속성은
리스트 마커(글머리 기호)로 사용할 이미지를 지정합니다.

이미지는 파일이나 그라디언트를 사용할 수 있습니다.

데모

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

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

형식 구문

CSS 
selector {
    list-style-image: url("이미지 경로") | 그라디언트 | none
}

구문

CSS 
/* url("이미지 경로") 값 */
list-style-image: url("heart.png");

/* 그라디언트 값 */
list-style-image: linear-gradient(red, blue);

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

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

값

list-style-image 속성 값
url("이미지 경로") 리스트 마커(글머리 기호)로 사용할 이미지 파일의 경로입니다.
그라디언트 리스트 마커(글머리 기호)로 사용할 그라디언트입니다.
CSS에서 사용할 수 있는 그라디언트 유형은 다음과 같습니다.
  • conic-gradient() - 배경 이미지로 원뿔형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • linear-gradient() - 배경 이미지로 선형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • radial-gradient() - 배경 이미지로 방사형 그라디언트를 설정합니다. 최소 두 가지 색상을 정의해야 합니다.
  • repeating-conic-gradient() - 배경 이미지로 반복적인 원뿔형 그라디언트를 설정합니다.
  • repeating-linear-gradient() - 배경 이미지로 반복적인 선형 그라디언트를 설정합니다.
  • repeating-radial-gradient() - 배경 이미지로 반복적인 방사형 그라디언트를 설정합니다.
none 리스트 마커(글머리 기호)로 사용할 이미지가 없음을 나타내는 키워드 값입니다. 이미지를 리스트 마커로 사용하지 않도록 지정합니다.
이 값을 지정하면 list-style-type에 정의된 리스트 마커가 대신 사용됩니다.

값 지정을 위한 선택자

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

예제

다음의 예제들을 통해서 list-style-image 속성의 사용법에 대해 살펴보겠습니다.

url("이미지 경로")

리스트 마커(글머리 기호)로 사용할 이미지 파일의 경로를 지정합니다.

HTML 
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>
CSS 
ul {
    list-style-image: url("heart.png");
}
실제 적용된 모습
주의할 점

마커 이미지의 크기는 지정된 크기가 없습니다.
원본 크기의 이미지가 렌더링되기 때문에 사용할 이미지의 크기가 리스트 아이템의 글자 크기보다 너무 크거나 너무 작으면 마커와의 균형이 맞지 않게 될 수 있으니 주의해야 합니다.

다음은 사용하는 아이템의 글자 크기보다 몇 배 큰 마커 이미지(star.jpg)를 지정했을 때의 예제입니다.

CSS 
ul {
    list-style-image: url("star.jpg");
}
실제 적용된 모습
그라디언트

그라디언드를 지정할 때 렌더링되는 크기는 리스트 아이템의 글자 크기(1em)을 기준으로 브라우저가 기본 크기 조정 알고리즘(default sizing algorithm)을 사용하여 조정합니다. 이때 모양은 정사각형입니다.

HTML 
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>
CSS 
ul {
    list-style-image: linear-gradient(red, blue);
}
실제 적용된 모습
none

이 값은 list-style-image 속성의 초깃값입니다. 해당 요소에 list-style-image 속성을 지정하지 않으면 초깃값인 none이 설정됩니다. 리스트 마커(글머리 기호)로 사용할 이미지가 없음을 나타내는 키워드 값으로, 이미지를 리스트 마커로 사용하지 않도록 지정합니다.
이 값이 설정되면 list-style-type에 정의된 리스트 마커가 대신 사용됩니다.

HTML 
<ul>
    <li>라면</li>
    <li>김밥</li>
    <li>돈까스</li>
    <li>김치볶음밥</li>
</ul>
CSS 
ul {
    list-style-image: none;
}
실제 적용된 모습

형식 정의

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

리스트 마커 스타일하기

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

브라우저 호환성

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

명세서

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

참고문헌

같이 보기