list-style-image

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

list-style-image 은 list-style 에서 구분점을 이미지로 바꾸는데 특화되었습니다.

예제 1
list-style-image 개요
보기
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
소스
<style type="text/css">
    .css_test {
        font-size : 12pt !important;
        list-style-image : url('http://superkts.com/img/css/icon0135.gif');
    }
</style>

<ul class="css_test">
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
    <li>CSS 공작소</li>
</ul>
사용된 CSS (클릭시 보기) : font-sizelist-style-image
예제 2
실습 - 구분점을 이미지로 바꿔보기
보기
list-style-image :
list-style-image : url('이미지경로')
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
  • CSS 공작소
설명
- list-style 의 기능중 구분점을 이미지로 바꾸는 기능만 특화된 속성입니다.
- 참고 : list-style
 
+ 관련 CSS +