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-size
list-style-image
예제 2
실습 - 구분점을 이미지로 바꿔보기
보기
list-style-image :
이미지 1
이미지 2
이미지 3
이미지 4
이미지 5
이미지 6
list-style-image : url('이미지경로')
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소
CSS 공작소
설명
-
list-style
의 기능중 구분점을 이미지로 바꾸는 기능만 특화된 속성입니다.
- 참고 :
list-style
+ 관련 CSS +
list-style
li 태그 각 항목의 "구분점" 표시 방법을 지정합니다
list-style-image
list-style 에서 "구분점" 을 이미지 지정만 합니다
list-style-position
list-style 에서 들여쓰기 설정만 합니다
list-style-type
list-style 에서 항목의 "구분점" 모양만 지정합니다
☞ 목록으로 가기