스크롤바
![[CSS] 스크롤바 없애기(숨기기)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FPSiSq%2FbtrUh5MFpTs%2FKOUoVS0lAAHYuvIwZtxst1%2Fimg.gif)
[CSS] 스크롤바 없애기(숨기기)
파이어폭스와 익스플로러는 기타 브라우저와 다른 코드를 적용해줘야합니다. 예제 코드 See the Pen Scrollbar hide by hyukson (@hyukson) on CodePen. 코드 /* ( 크롬, 사파리, 오페라, 엣지 ) 동작 */ .scroll::-webkit-scrollbar { display: none; } 영역::-webkit-scrollbar : 스크롤바 영역에 대한 설정으로 display: none 속성으로 스크롤바를 없앨 수 있습니다. .scroll { -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; /* 파이어폭스 */ } 익스플로러, 파이어폭스는 -webkit-scrollbar 코드로 동작이 되지 않으며..
![[CSS] 스크롤바 스타일 커스텀하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F4Fco8%2FbtrqRZVo0g8%2FZE1vYKit8JsvYuqnNIlock%2Fimg.gif)
[CSS] 스크롤바 스타일 커스텀하기
코드 각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다. ::-webkit-scrollbar : 스크롤바 영역에 대한 설정 ::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정 ::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정 영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. body::-webkit-scrollbar { width: 8px; /* 스크롤바의 너비 */ } body::-webkit-scrollbar-thumb { height: 30%; /* 스크롤바의 길이 */ background: #217af4; /* 스크롤바의 색상 */ border-radius: 10px; } body::-webkit-scrollbar-t..