Scrollbar
스크롤바 색상을 바꾸는 것만으로 홈페이지 느낌이 달라지지요. 개인적으로 톤이 강한 색을 많이 쓰는 웹페이지에 더 잘 어울리는 것 같아요. 예를 들어 블랙/화이트 배경을 가진 홈페이지에 포인트로 줘도 좋겠고, 테마 색상에 맞춰 보색 효과를 주기에도 유용하고요. 간단하게 CSS로 스크롤바 색상 변경하는 법을 함께 알아 볼게요. 단, 이 방법은 파이어폭스랑 익스플로러 IE/Edge와는 호환되지 않고 Webkit 브라우저인 크롬, 사파리, 오페라에서만 활용 가능합니다.
Style/CSS
아래 소스를 html 파일 <head><style> 코드 </style></head> 사이에 추가하거나 CSS 파일 body 뒤에 바로 붙여 넣기 하면 됩니다. (예: body::-webkit-scrollbar....)
::-webkit-scrollbar{width: 16px;}
::-webkit-scrollbar-track {background-color:#f1f1f1;}
::-webkit-scrollbar-thumb {background-color:#f1ef79;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: #555;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
width:16px;height:16px;background:#f1ef79;} 흰색 글자로 표기된 부분을 원하는 넓이와 색으로 변경해 주세요. ▶컬러 고르기
둥근 모서리 효과를 주고 싶지 않으면 border-radius 부분 삭제, 따로 버튼에 효과를 주고 싶지 않으면 button 부분 삭제 등 스타일을 주고 싶은 부분만 사용하면 됩니다. 그 외 원하는 스타일이 있다면 추가로 부문별 CSS 스타일을 추가해 주시고요!
|
더 자세히 살펴보면, ::-webkit-scrollbar{width: 스크롤바 넓이px;} ::-webkit-scrollbar-track {background-color:트랙 배경 색상;} ::-webkit-scrollbar-thumb {background-color:바 색상;border-radius: 바 둥근 모서리 정도px;} ::-webkit-scrollbar-thumb:hover {background: 마우스를 올렸을 때 색상;} ::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment { width:버튼 넓이px(보통 스크롤바 넓이랑 같이 맞춰줘요);height:버튼 높이px;background:버튼 색상;} |
참 쉽지요? :)
