[tistory] 티스토리 설정 스크롤바 색, 스타일 변경하기

 

 

 

 

 

 

 

프로그래밍 세계를 탐구합시다.

 

 

 

 

 

 

 

티스토리 설정 스크롤바 색, 스타일 변경하기

 

 

 

 

간단한 설정으로 티스토리 블로그의 스크롤바의 색상과 스타일을 변경할 수 있습니다.

 

 

 

 

기본 스크롤바 스타일

 

기본으로 설정되어 있는 스크롤바는 아래와 같습니다.

 

 

흔히 볼 수 있는 평범한 모양입니다.

 

 

 

변경한 스크롤바 스타일

 

 

 

 

저는 초록색으로 설정하였습니다.

 

 

 

 

 

설정 방법

 

 

1. 관리 > 꾸미기 > 스킨 편집 접속

 

 

블로그의 관리 페이지에서 꾸미기 카테고리를 찾아 스킨 편집을 클릭합니다.

 

 

 

 

 

 

 

2. html 편집

 

html 편집을 클릭합니다.

 

 

 

 

 

 

3.  CSS 코드 입력

 

CSS body 위쪽에 아래 코드를 입력합니다.

(이 위치가 아니어도 상관 없습니다. 저는 관리를 편리하게 하기 위해 body 위쪽에 넣었습니다.)

 

::-webkit-scrollbar-track {
    background-color: #e1ffb4a4;
    border-radius: 10px;
}

::-webkit-scrollbar {
    width: 13px;
    background-color: #F5F5F5;
    ;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-image: -webkit-gradient(linear,
            left bottom,
            left top,
            color-stop(0.44, rgb(174, 217, 122)),
            color-stop(0.72, rgb(80, 145, 34)),
            color-stop(0.86, rgb(77, 141, 21)));
}

 

 

[  예시  ]

 

 

 

 

 

 

 

위 코드를 입력하면 제가 설정한 색인 초록색이 나타나게 됩니다.

 

 

4. 색 변경

 

초록색 네모 칸 위에 마우스를 올리면 원하는 색으로 쉽게 변경할 수 있습니다.

 

 

 

 

* 색상 코드를 입력해서 변경하는 방법도 있습니다.

아래 사이트에서 색상 코드를 가져올 수 있습니다.

 

https://www.rapidtables.org/ko/web/color/html-color-codes.html

HTML 색상 코드 차트 🎨

 

 

 

 

5. 적용

 

적용 버튼을 누르면 변경 사항이 저장됩니다.

 

 

 

 

 

 

 

 

 

 

 

위와 같은 방법으로 스크롤바 스타일을 설정하여 티스토리를 색다르게 꾸밀 수 있습니다.