scrollbar Property

Home > Document > CSS > Font > scrollbar

scrollbar Property

scrollbar color에 관한 내용인데 W3C의 Property 목록에는 없습니다. 한 마디로 족보에 없는 넘이죠. 그럼 대체 어디서 나온 Property 일까요. 아마 짐작 들 하셨겠지만 MS 에서 나온 Property 입니다. 머 꼭 족보에 있다고 해서 좋은 것도 아니고 반대라고 해서 나쁜 것도 아니지만 초보자 들이 가장 신기해 하고 재밋어 하는 Property 중에 하나져. 남녀를 막론하고 이 色 이라는 것은 항상 사람들의 눈길을 끄나 봅니다. 이 Property 들은 scrollbar가 생기는 element(Div, Textarea..)라면 다 적용되며 하위의 scrollbar가 생기는 Element에 상속(Inherit) 됩니다.. 우선 명칭 부터 알아 보도록 하겠습니다. 원래 길쭉하게 생겼지만 기냥 넙떠~억 하게 표현했으니까 알아서 보시져...


  [표 보는 방법]
scrollbar Property
HTML Syntax { scrollbar-3dlight-color: vColor } v = value
{ scrollbar-highlight-color: vColor }
{ scrollbar-face-color: vColor }
{ scrollbar-shadow-color: vColor }
{ scrollbar-darkshadow-color: vColor }
{ scrollbar-track-color: vColor }
{ scrollbar-arrow-color: vColor }
{ scrollbar-base-color: vColor }
Scripting object.style.scrollbar3dLightColor [ = vColor ]
object.style.scrollbarHighlightColor [ = vColor ]
object.style.scrollbarFaceColor [ = vColor ]
object.style.scrollbarShadowColor [ = vColor ]
object.style.scrollbarDarkshadowColor [ = vColor ]
object.style.scrollbarTrackColor [ = vColor ]
object.style.scrollbarBaseColor [ = vColor ]


Scrollbar 각 부위 별 명칭
▲
         
         
         
▼


3dLight Highlight Face Shadow Darkshadow Track Arrow


scrollbar를 모든 문서의 body에 지정하는 방법

내 사이트에 있는 모든 문서에 같은 color 의 scrollbar를 사용하고 싶다면 .CSS 파일로 Link 시키는 방법을 사용합니다. 예를 들어 내가 사용하는 .CSS 파일이 mysite.css라면 아래와 같이 Type selector를 지정하여 Coding 합니다.

mysite.css 
.
.
.

body { 
scrollbar-3dlight-color: vColor 
scrollbar-highlight-color: vColor 
scrollbar-face-color: vColor
scrollbar-shadow-color: vColor 
scrollbar-darkshadow-color: vColor
scrollbar-track-color: vColor 
scrollbar-arrow-color: vColor
}

.
.
.

작업하는 파일 
<HTML>
    <HEAD>
        <TITLE> .CSS 파일 Link로 scrollbar color 지정하기</TITLE>
    <LINK rel="stylesheet" type="text/css" href="경로/mysite.css">
    </HEAD>
    <BODY>
    ......
    </BODY>
</HTML>


scrollbarBaseColor Property

scrollbar-base-color Property 는 위의 7 가지 Property를 각각 세부적으로 지정하지 않고, scrollbar-face-color 색상만 지정하면 나머지 부분이 조화가 되는 색상으로 자동 지정되게 하는 Property 입니다. 다음은 scrollbar-base-color 의 몇 가지를 다룬 DHTML 입니다. 해당 버튼을 클릭하면 scrollbar-base-color 를 변경 할 수 있습니다.


Scrollbar-base-color sample
red darkslateblue orange limegreen darkolivegreen pink #666666




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

Top
Back
New
검색