CSS . 스타일시트로 스크롤바 색깔 바꾸기.

요즘 블로그 방문자가 느는 바람에 뭔가를 설명할때 상당히 조심스러워진다.
알고있는것만 죽 적어 나갈려니 틀리면 어쩔까 -ㅂ-;; 하는 생각에 조바심 마저 든다.

CSS. 스타일시트에 관해서 잠시 언급한바가 있다.
물론 깊숙한 설명은 전혀 없었지만 어느정도 개념은 잡았으리라 생각이 된다.

그 스타일 시트라는 녀석으로 스크롤바의 모양을 현란하게 수정해보자.
(추천하는 스킬은 아니지만 회색으로 깔끔하게 웹브라우저의 스크롤바를 수정하는것 정도는 좋을듯 하다.)

 1.스크롤바를 이루고 있는 모든 색상의 변경이 가능하다는걸 미리 알고 있자.

우측에 보이는 우리가 늘상 잡아 흔들어대던 스크롤바는 스타일시트 명령에 의해서 수정할수 있다.
스크롤바를 보이지 않게 표현할수도 있으며 스크롤바를 마치 투명한듯양 흰색으로 변경할수도 있다.
(스크롤바에는 투명(transparent)의 기능은 없다.) 

2.스크롤바를 이루고 있는 하나하나의 이름을 알도록 하자.

 

 <각각의 스크롤바를 명령하는 스타일들의 역할을 정리해봤다>

 3.자신의 HTML 파일에 스타일시트를 직접 적용시켜보자

  

 <style type="text/css">
 
  BODY {
   scrollbar-base-color:색상코드;
   scrollbar-face-color:색상코드;
   scrollbar-shadow-color :색상코드;
   scrollbar-highlight-color:색상코드;
   scrollbar-darkshadow-color:색상코드;
   scrollbar-3dlight-color:색상코드;
   scrollbar-track-color:색상코드;
   scrollbar-arrow-color:색상코드;
   }
 
 </style>

 

이녀석을 자신의 HTML파일에 취향에 맞게 디자인해서 올려보도록 하자.

 

------------------------------------------------------------------------------------

 

오늘 본것은 단순히 따라하기만 하면 쉽게 만들수 있을것이다.

봐도봐도 이해가 가지 않으시는분은 더 많이 보시면 알수 있을것이다.

 

경험이 곧 배움의 지름길이니 수없이 반복해서 실전처럼 연습하다보면

어느새 ASP,JAVA,포토샵,드림위버 등등 수많은 언어와 프로그램들을 접하고 있는 자신을 보게 될것이다.

 

그럼 오늘은 이만 늦었으니 휙 -