♡──── 컴퓨터학습/태그자료

스크롤바 꾸미는 태그

풍순 2017. 12. 8. 15:35

<STYLE type=text/css>
<!--
body {
{scrollbar-face-color: #006400;
scrollbar-shadow-color: #ff6699;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #ff6699;
scrollbar-darkshadow-color: #FF0000;
scrollbar-track-color: #ffffff;
scrollbar-arrow-color: #ff6699}
//-->
</STYLE> 

 

 


 

 

 

★ 스크롤바 꾸미는 소스입니다.

 

<style type="text/css">
<!--
body {
{scrollbar-face-color: #ff9bbc;
scrollbar-shadow-color: #ff6699;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #ff6699;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
scrollbar-arrow-color: #ff6699}
//-->
</style>

 

★ 소스 설명입니다.

scrollbar-face - 움직이는 바 전체색

scrollbar-shadow - 스크롤바의 오른쪽과 아래쪽 그림자색

scrollbar-highlight - 스크롤바의 왼쪽과 위쪽의 얇은 선색

scrollbar-3dlight - 스크롤바의 왼쪽위에 진하게 드러가는 선

scrollbar-darkshadow - 스크롤바의 오른쪽과 아래쪽에 들어가는 얇은 색

scrollbar-track - 스크롤바가 없는 아래바탕부분의 색

scrollbar-arrow - 위 아래 화살표 색

 

 

 

(head)
(style type="text/css")
(!--
body {
scrollbar-face-color: #000000;
scrollbar-shadow-color: #999999;
scrollbar-highlight-color: #999999;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #999999;}
//--)
(/style)
(/head)


※ () 요걸 모두 < > 요걸루 바꾸셔야 합니다!!! (단, { } 요건 빼고...)


설명...

이렇게 되는데요.. 여기서.. 이 소스를 head 사이에 넣어야만 하구요.

중요한것은!!!! *익스플로어 5.5 이상 에서만 이 소스가 적용됩니다!!*

scrollbar-face <--- 움직이는 바 전체색
scrollbar-shadow <--- 바의 오른쪽과 밑쪽 그림자색
scrollbar-highlight <--- 바의 왼쪽과 위쪽의 얇은 선색
scrollbar-3dlight <--- 바의 왼쪽위쪽에 진하게 드러가는 선
scrollbar-darkshadow <--- 바의 오른쪽과 밑쪽에 들어가는 얇은 색
scrollbar-track <--- 바가 없는 아래부분의 색
scrollbar-arrow <--- 위 아래 화살표 색