
textarea 등 스크롤바가 나타는 요소에 커스텀 적용하기
스크롤바 커스텀
- ::-webkit-scrollbar > 스크롤바 영역 설정
- ::-webkit-scrollbar-thumb > 스크롤바 막대 설정
- ::-webkit-scrollbar-track > 스크롤바 뒷배경 설정
body::-webkit-scrollbar {
width: 8px;
}
body::-webkit-scrollbar-thumb {
height: 25%;
background: #0051ED;
border-radius: 10px;
}
body::-webkit-scrollbar-track {
background: #E8E8E8;
}
예시
See the Pen Untitled by seola (@seola-the-reactor) on CodePen.
*** scrollbar 커스텀 할 때에는, 맨 처음 ::-webkit-scrollbar 부터 순서대로 지정해줘야 합니다.
막대 스타일만을 변경하기 위해 scrollbar-thumb부터 적용시, 스타일 적용이 안될 수 있습니다.
'웹 퍼블리싱 - WEB PUBLISHING' 카테고리의 다른 글
| 웹사이트 필수 요소 - OG 메타 태그 완벽 가이드 (3) | 2025.07.23 |
|---|---|
| [Git] Git 파일 원복하기 (git branch / git checkout 활용하기) (0) | 2024.02.26 |
| Visual Studio Code 서버 원격 접속 방법 > SFTP로 손쉽게 연결하기 (0) | 2023.07.13 |
| [홈페이지제작기초] 웹 서버 설치 & 서버 원격 연동하기 (0) | 2023.07.13 |
| FTP 사용법 - 파일질라 설치 및 기본 사용법 (0) | 2023.07.13 |