본문 바로가기
IT

스크롤바 색상 바꾸기

by 세상밖으로  2013. 3. 5.
반응형

티스토리 블로그나 인터넷 쇼핑몰을 디자인하면서 꼭한번은 생각하게될 부분이죠.
쉽고 간단하게 익스플로러의 스크롤바 색상을 바꾸는 방법을 알아보도록 하겠습니다.

스크롤바의 색상을 바꾸려면 간단하게 태그를 이용하여 바꿀 수 있습니다.
스크롤바 색상과 관련된 태그들은 다음과 같습니다.

1. scrollbar-arrow-color: #색상값 (예: #ffffff...)  -> 스크롤바 위, 아래 작은 네모버튼 안의 화살표 색상
2. scrollbar-3dlight-color: #색상값 (예: #ffffff...) -> 스크롤바 위, 왼쪽 최외곽선의 색상
3. scrollbar-darkshadow-color: #색상값 (예: #ffffff...) -> 스크롤바 아래, 오른쪽 최외곽선의 색상
4. scrollbar-face-color: #색상값 (예: #ffffff...) -> 스크롤바 버튼들의 색상
5. scrollbar-highlight-color: #색상값 (예: #ffffff...) -> 스크롤바 버튼의 위, 왼쪽 선의 색상
6. scrollbar-shadow-color: #색상값 (예: #ffffff...) -> 스크롤바 버튼의 아래, 오른쪽 선의 색상
7. scrollbar-track-color: #색상값 (예: #ffffff...) -> 스크롤바 버튼이 움직이는 공간의 바탕색상


이 태그들의 사용법은

<style>
body {
scrollbar-arrow-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-face-color: #003399;
scrollbar-highlight-color: #ff0000;
scrollbar-shadow-color: #ff0000;
scrollbar-track-color: #ffffff;
}
</style>

이런 식으로 작성하고 위에 태그들을 html 작성시 <head>와 </head> 사이에 넣어주면 됩니다.
css 파일에 넣어 사용해도 되구요.

이렇게 수작업으로 하셔도 되고 스크롤바 색상을 직접 지정하여 원하는 색상으로 디자인하면 자동으로 태그들을 생성시켜주는 사이트도 있습니다.



위에 사이트에서 스크롤바 색상을 지정하면 훨씬 편하군요.


이렇게 되어있구요.

위에 이미지 보시면 색상값 넣는 텍스트박스보이시죠?
그곳에 색상값을 넣어주시면 됩니다.
주의하실것은 색상값을 넣어주실때 '#'은 생략하셔야 한다는점!!

이렇게해서 완성된 스크롤바 태그들이 밑에 커다란 텍스트박스에 작성되구요.
그 태그들을 그대로 복사해서 사용하시면 됩니다.
맨아래 'copy css to clipboard' 버튼을 누르셔도 됩니다.

지금까지 스크롤바 색상을 바꿔봤습니다.
사이트 디자인하실때 유용하게 사용하셨으면 좋겠네요.^^


반응형

댓글