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:버튼 색상;}
|
참 쉽지요? :)
'알아두면 좋은 정보' 카테고리의 다른 글
| 영어 필기체 쓰는법 따라쓰기로 배워봐요! 영문 캘리그라피 연습 (0) | 2019.07.29 |
|---|---|
| 자취생활에 없어선 안될 자취생 필수템 자취 필수품 BSET4 알아보자! (0) | 2019.07.29 |
| 방치해둔 공간 활용 선반을 이용한 인테리어 (0) | 2019.07.29 |
| 임신 불면증 원인과 치료법 알아보기. 임산부 잠 잘자는법 (0) | 2019.07.29 |
| 임신중 담배를 피우거나 냄새를 맡으면? 담배가 태아에 미치는 영향 (0) | 2019.07.29 |
댓글