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

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

필자는 가급적 적은 시간을 들여 최대한의 효과를 줄 수 있는 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 사이에 붙여 넣어주면 끝이 난다. 이번 블로깅을 통해 좀 더 멋진 블로그를 만들 수 있기를 바라며 이만 블로깅을 마치도록 하겠다. 궁금하신 점이 있다면 댓글 남겨주시면 답변해드리도록 하겠다.

주의

하지만 익스플로러는… 적용되지 않습니다.

댓글을 달아 주세요

  1. 땀똔

    강산이 너댓번 바뀌고도 남을 만큼 예전부터 웹개발자들이 신경쓰고 골치 아파하던 부분인데,
    M$나 모질라 측은 이걸 그대로 둔다는 게 참 아쉽기도 하고 화가 나가기 하고 그렇더라고요..

    웹킷 계열의 브라우저를 인정하고 특히 좋아하는 이유중의 한 가지가,
    이 스크롤바를 마음대로 쉽게 주무를 수 있다는 점이었다죠.. @.@

  2. 묘한오빠

    이걸 몰라 저는 스크롤바를 없애고 사용하고 있었네요 ^^;
    다음번 스킨 수정시 적용해봐야겠어요 ㅎㅎ

  3. leeable

    항상 블로그 꾸밀 때 잘 참고 하고 있습니다~! 감사합니다:)

  4. So_Far

    오 html이나 css하나도 모르는데 그냥 이것저것 건드려보면서 티스토리 바꾸고 있는데 이건 한번에 적용되었네요
    심플하고 간단하고 아주 좋습니다 구독 누르고 갑니다 감사합니다~