Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
| 31 |
Tags
- 당근마켓
- jwt
- github
- 서버리스 #
- 클론코딩
- angular
- npm
- ES5
- 1px border
- Props
- 0.25px border
- literal
- 으
- entity
- 0.75px border
- 문서번호
- 데이터베이스 #try #이중
- TS
- 타입스크립트
- font-size
- 0.5px border
- &연산
- TypeScript
- 전역변수
- 10px
- Strict
- es6
- ZOOM
- 컴포넌튼
- Websocket
Archives
- Today
- Total
복잡한뇌구조마냥
CSS 공부 ( Custom Scrollbar ) 본문
프로젝트 개발 중 디자인을 따라 만들었더니 스크롤바가 너무 거슬리는 상황이 발생했다.
투박한 스크롤 바가 아닌 디자인에 부합하는 스크롤 바를 만들고 싶어졌다.
찾아보던 중 스크롤 바를 커스터마이징 할 수 있는 내용이 있어서 참고했다.
간단한 예제를 만들어 보았다.
See the Pen Custom Scrollbar by Dongyeop (@Yoepee) on CodePen.
🌟 스크롤 바(Scrollbar) 스타일링 💯 총정리
Custom Scrollbar 스타일링 유튜브 홈페이지를 보면 스크롤바가 일반 브라우저 스크롤바와는 달리 동그랗게 스타일링 되어 있음을 볼 수 있다. 이처럼 스크롤바 역시 다른 요소처럼 CSS 스타일링이
inpa.tistory.com
https://blog.esteetey.dev/make-your-website-stand-out-with-a-custom-scrollbar
LIST
'FE > CSS' 카테고리의 다른 글
| [CSS] text-overflow와 말줄임표(...) 처리 방법 정리 (0) | 2023.12.12 |
|---|---|
| CSS공부 ( nth-child ) (0) | 2023.05.04 |
| CSS 공부 ( font-size 10px 이하 ) (0) | 2023.04.17 |
| CSS 공부 ( border 굵기 조절 ) (0) | 2023.04.11 |
| CSS 공부 ( 브라우저 접두사 [prefix] ) (0) | 2023.03.24 |
'FE/CSS' Related Articles
more
