CSS list-style-image 속성
- 이전 페이지 list-style
- 다음 페이지 리스트스타일-포지션
정의 및 사용법
list-style-image 속성은 목록 항목 표시를 대체하는 이미지를 사용합니다.
설명
이 속성은 순서 목록이나 불순서 목록 항목 표시로 사용되는 이미지를 지정합니다. 이미지가 목록 항목 내용에 대한 위치는 일반적으로 list-style-position 속성을 사용하여 제어됩니다.
주석:이미지가 사용할 수 없을 경우 항상 "list-style-type" 속성을 지정하십시오.
또한 참조:
CSS 강의:CSS 목록
CSS 참조 가이드:CSS list-style 속성
HTML DOM 참조 가이드:listStyleImage 속성
예제
이미지를 목록의 항목 표시로 설정하십시오:
ul
{
list-style-image:url("/i/arrow.gif");
list-style-type:square;
}
CSS 문법
list-style-image: none|url|initial|inherit;
속성 값
| 값 | 설명 |
|---|---|
| URL | 그래픽의 경로. |
| none | 기본. 그래픽이 표시되지 않습니다. |
| inherit | list-style-image 속성의 값을 부모 요소에서 상속해야 합니다. |
기술 세부 사항
| 기본 값: | none |
|---|---|
| 상속성: | yes |
| 버전: | CSS1 |
| JavaScript 문법: | object.style.listStyleImage="url('/images/blueball.gif')" |
더 많은 예제
- 이미지를 목록 항목 표시로 사용
- 이 예제에서 이미지를 목록 항목 표시로 사용하는 방법을 보여줍니다.
브라우저 지원
표의 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.
| 크롬 | IE / 엣지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
- 이전 페이지 list-style
- 다음 페이지 리스트스타일-포지션
