HTML / CSS
[CSS] CSS만으로 scrollbar 디자인하기
- 2023.07.05 20:06:59
 최근 익스플로러가 사용 중단 조치 되면서 스크롤바 디자인이 좀 더 자유로워졌다. 아래 CSS를 통해 간단히 웹킷 브라우저에서 스크롤바 디자인을 변경할 수 있다. [!]CSS[/!] 아래 코드를 통해 스크롤바 디자인이 가능하다. .scroll::-webkit-scrollbar {width: 10px}
.scroll::-webkit-scrollbar-thumb {background-color: #b4b4b4; border-radius: 10px; background-clip: padding-box} .scroll::-webkit-scrollbar-track {background-color: #f1f1f1; border-radius: 10px; } 위 코드에서 .scroll 은 스크롤이 적용되는 엘리먼트이며, ::-webkit-scrollbar 는 스크롤바 전체 영역, ::-webkit-scrollbar-thumb 는 스크롤 바, ::-webkit-scrollbar-track 는 트랙의 스타일을 지정하면 된다. 예시는 아래와 같다.  |