깃블로그(16) 스크롤바 꾸미기
스크롤바 꾸미기
_layout/default.html 역할
default.html 는 html, head, body를 갖추고 있는 최상위 레이아웃이다.
(head 태그는 _include/head.html에서 include함)
default.html 수정
아래 내용을 <head> 태그안에 추가해주고 결과를 확인하면 된다.
<style>
::-webkit-scrollbar{width: 16px;}
::-webkit-scrollbar-track {background-color:#4b4f52; border-radius: 16px;}
::-webkit-scrollbar-thumb {background-color:#5e6265; border-radius: 16px;}
::-webkit-scrollbar-thumb:hover {background: #ffd24c;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment
{
width:12px;height:12px;background:transparent;}
}
</style>
- track, thumb, 등등 다 스크롤의 구성 요소들이다.
- border-radius : 모서리 둥글게 할 정도.
- background-color : 스크롤 색상 지정.. 저렇게 하드 코딩하면 안되는데 ㅠㅠ.. 색상을 변수 파일에 지정해두고 사용하실 것을 추천드립니다!
Leave a comment