[HTML,CSS] 예쁜 스크롤바 만들기

기본으로 제공되는 스크롤바는 너무 평범하고 밋밋하죠....

그래서 저 같은 경우에는 CSS를 사용해서 예쁜 스크롤바를 만들기로 결정하였습니다..!!

(정말 간단합니다)

---

 

스크롤바를 꾸미기에 앞서서  스크롤바 css에 대해 간략하게 설명드리자면...

• ::-webkit-scrollbar : 스크롤바 전체
• ::-webkit-scrollbar-thumb : 스크롤 막대
• ::-webkit-scrollbar-track : 스크롤 막대 외부

이런 식으로 스크롤바는 구성되어있습니다..

 

---

이제 본격적으로 확인해보겠습니다

::-webkit-scrollbar{
    width: 3px;
}
::-webkit-scrollbar-thumb {
  background-color: #00a2ff; //제가 좋아하는 색을 넣어봤어요.여러분이 좋아하는 색을 넣으시면 됩니다
	border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: #fff;
	border-radius: 10px;
}

그러면 보시는 것처럼 예쁜 스크롤바가 탄생하게 됩니다~~

 

---

다들 즐거운 코딩생활 되십셔 :)