스크롤바 색상 바꾸기

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

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

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...) -> 스크롤바 버튼이 움직이는 공간의 바탕색상

이 태그들의 사용법은

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

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

http://www.iconico.com/CSSScrollbar/

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

이렇게 되어있구요.

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

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

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

'IT' 카테고리의 다른 글

익스플로러8 네이버자료실 파일 다운로드시 '이 탭은 복구 되었습니다' 현상 해결방법 + ...[으]로 되돌아갈 수 없습니다. 해결방법 (4)	2013.03.26
크롬과 익스플로러에서 다 잘되는 iframe 높이자동조절 방법 (16)	2013.03.19
컴퓨터 부품 구입시 벌크, 리퍼비시, 재생품 이란? (3)	2012.12.10
베가스를 이용한 안개효과/연기효과/연무효과 (0)	2012.09.01
안드로이드 초간단 언루팅하기 (10)	2012.06.06

세상밖으로

스크롤바 색상 바꾸기

'IT' 카테고리의 다른 글

댓글

티스토리툴바

스크롤바 색상 바꾸기

'IT' 카테고리의 다른 글

관련글

댓글

티스토리툴바