스크롤바 꾸미기

티스토리 스크롤바를 꾸며보자!

예전부터 종종 스크롤바를 꾸며진 사이트를 볼 수가 있었다. 사실 스크롤바를 잘 보지 않다보니 깜빡 잊기도 하는데 지금 한번 필자의 블로그 스크롤을 보면 바뀌어져 있는 것을 볼 수 있을 것이다. 작은 디테일 부분을 꾸밀수록 사이트의 완성도를 올리는 것이다.

필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 Tip들을 소개하려고 하는데 바로 이 방법 역시 간단한 방법으로 최대의 효과를 볼 수 있을 것으로 보인다. 그럼 한번 방법을 알아보도록 하자.

필자의 스크롤 바 CODE

<style>    /* width */    ::-webkit-scrollbar {    width: 8px;    }     /* Track */    ::-webkit-scrollbar-track {    box-shadow: inset 0 0 2px grey;     border-radius: 0px;    }     /* Handle */    ::-webkit-scrollbar-thumb {    background: #000;     border-radius: 0px;    } </style> 

여기서 자신에게 맞게 바꾸기 위해서 하나씩 설명해 보자면 width 부분은 스크롤 바의 너비다. track은 경주 트랙처럼 스크롤바가 지나다니는 길을 말한다. box-shadow 를 통해 트랙의 그림자를 줍니다. border-radius의 수치는 필자가 0으로 해두었는데 10 으로 바꾸게 되면 트랙 위아래 끝 부분이 동그랗게 바뀔 것이다.

handle 부분이 바로 스크롤바의 컬러와 모양을 변경할 수 있는 부분이다. background 부분에 컬러를 입력하면 스크롤 바의 컬러를 변경할 수 있으며 역시 border-radius의 수치를 변경하면 라운딩 된 스크롤바를 구성할 수 있을 것이다.

 

handle과 track

CODE 입력

 

코드 전체를 꼭 복사하도록 하자.

자신의 블로그에 맞게 셋팅이 되었다면 위와 같이 스킨편집 - html편집 - html 탭에 head 사이에 붙여 넣어주면 끝이 난다. 이번 블로깅을 통해 좀 더 멋진 블로그를 만들 수 있기를 바라며 이만 블로깅을 마치도록 하겠다. 궁금하신 점이 있다면 댓글 남겨주시면 답변해드리도록 하겠다.

주의

하지만 익스플로러는… 적용되지 않습니다. 엣지쓰세요!