list-style Property

Home > Document > CSS > Classification > list-style

list-style Property

list-style Property 는 list-style-type, list-style-image, list-style-position 이렇게 3가지의 list-item 관련 Property의 단축형(Shorthand) Property 입니다. font Property 같은 다른 단축형 Property와 마찬가지로 초기값은 없습니다.

  [표 보는 방법]
list-style Property
Value [ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | Inherit
Initial not defined for shorthand properties, 단축형에는 없음.
Applies to elements with 'display: list-item'
Inherited yes
Percentages N/A
Media Visual
HTML Syntax { list-style: s }
Scripting object.style.listStyle [ = sStyle ]



CSS Scripting
onMouseOver="this.style.listStyle='inside url(경로/파일이름)';"

onMouseOut="this.style.listStyle='disc outside';"


출력결과

  • list-style Property list-style Property list-style Property list-style Property list-style Property list-style Property list-style Property list-style Property list-style Property list-style Property
Source code 
<HTML>
  <HEAD>
      <TITLE>list-style DHTML</TITLE>
  </HEAD>
  <BODY>
  <UL onMouseOver="this.style.listStyle='inside url(../../../images/arrow/arrow_ani.gif)';" 
  onMouseOut="this.style.listStyle='outside url()';">
  <LI> list-style Property list-style Property list-style Property list-style Property list-style 
  Property list-style Property list-style Property list-style Property list-style Property 
  list-style Property </LI>
  </UL>
  </BODY>
</HTML>

위와 같이 url(경로/파일이름) 을 지정하여 list-style-image를 사용할 경우 굵은 글씨체로 된 부분처럼 url() 의 괄호 속을 비우면 onMouseOver 동작에서 지정된 image 파일의 지정이 해제 됩니다.



이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색