list-style-image Property

Home > Document > CSS > Classification > list-style-image

list-style-image Property

list-style-image Property는 disc, square, decimal 등의 형태로 글머리 기호나 번호를 붙이는 대신에 그 위치에 사용자가 지정한 그림 파일(주로 gif 형식)을 넣어 줍니다. 이 방법을 사용하면 <IMG> Tag을 사용하여 일일이 그림 파일을 링크하지 않아도 지정한 image를 목록 앞에 붙힐 수 있고, 사용 값은 <uri> 와 none(그림을 지정하지 않음) 이 있습니다.

[표 보는 방법]

list-style-image Property
Value	<uri> \| none \| Inherit
Initial	none
Applies to	elements with 'display: list-item'
Inherited	yes
Percentages	N/A
Media	Visual
HTML Syntax	{ list-style-image: sImage }
Scripting	object.style.listStyleImage [ = sImage ]

CSS Scripting

onClick="this.style.listStyleImage='url(경로/그림파일이름)';"

list-style-image를 사용하지 않고 글 앞에 이미지 넣기

우선 지금까지 우리가 알고 있는 방법으로 즉, <IMG> Tag을 사용하여 글머리에 이미지를 넣어 보겠습니다. 이미지 파일은 바로 요거와 요거를 사용하도록 하져... 그림 파일을 우클릭 하여 '다른 이름으로 그림 저장(S)... 파일 이름은 각각 'arrow.gif' 와 'arrow_ani.gif' 가 되겠습니다.

입력

<HTML>
    <HEAD>
        <TITLE>IMG Tag으로 글머리에 그림 넣기</TITLE>
    </HEAD>
    <BODY>
        <IMG src="../images/arrow_ani.gif" width="12" height="10" alt=""> 
        일일이 그림 넣을라니 힘들군...<BR>
        <IMG src="../images/arrow_ani.gif" width="12" height="10" alt=""> 
        이건 완전 노가다네...<BR>
        <IMG src="../images/arrow_ani.gif" width="12" height="10" alt=""> 
        그래도 이 방법 밖에 모르니 할 수 음찌...<BR>
    </BODY>
</HTML>

출력결과

일일이 그림 넣을라니 힘들군...

이건 완전 노가다네...

그래도 이 방법 밖에 모르니 할 수 음찌...

list-style-image Property를 사용하여 글 앞에 이미지 넣기

이번에는 list-style-image Property를 사용하여 이미지를 넣어 보겠습니다. 아래와 같이 Coding 합니다. arrow_ani.gif 파일이 Myfolder/images 폴더에 있고, 작업하는 HTML 파일은 Myfolder/html 폴더에 있다는 가정하에 Coding 한 Source 입니다. 먼 말인지 모르는 사람은 여기 참조...

입력

<HTML>
    <HEAD>
        <TITLE>list-style-image Property를 사용한 image 넣기</TITLE>
    <STYLE type="text/css">
    <!-- 
    .arrow { list-style-image : url(../images/arrow.gif) }
    .arrow_ani { list-style-image : url(../images/arrow_ani.gif) }
    -->
    </STYLE>
    </HEAD>
    <BODY>
        <UL class="arrow">
            <LI>움직이지 않는 화살표 - 1</LI>
            <LI>움직이지 않는 화살표 - 2</LI>
            <LI class="arrow_ani">움직이는 화살표</LI>
            <LI>움직이지 않는 화살표 - 3</LI>
        </UL>
    </BODY>
</HTML>

출력결과

움직이지 않는 화살표 - 1
움직이지 않는 화살표 - 2
움직이는 화살표
움직이지 않는 화살표 - 3

위와 같이 <UL> Tag 에 class로 지정하면 <UL> Tag 속에 있는 모든 <LI> Tag에 같은 Image가 지정되고, <LI> Tag에 지정하면 해당 <LI> Tag에만 Image가 지정 됩니다.

Top

Back

New

검색