[TIL]2024.01.11 스크롤바 css

JunSeok·2024년 1월 11일

TIL

목록 보기
10/27

서론

팀프로젝트 진행 도중 이런식으로 사진이 박히면 밑에 스크롤바가 생기면서 문서가 깨지지 않는걸 원했는데
써보질 않았으니 어떻게 작성하는지 전혀 몰랐다. 바로 구글에 검색하면서 방법을 찾아 봤다.
위 사진밑에 스크롤이 생기게 하고 싶었다.
방법은 의외로 간단했다

overflow-x: scroll;

이 코드만 넣으면
손쉽게 스크롤바 를 생성 할수 있었는데
아.. 뭔가 밋밋하다 이왕하는거 좀 더 이쁘게 만들어 보고 싶어서 커스텀도 검색 해봤다.

::-webkit-scrollbar : 
::-webkit-scrollbar-thumb : 
::-webkit-scrollbar-track  : 

바로 저 3가지가 있겠다.
참고로 영역코드로 적용 대상을 제한해서 사용할 수 있다고 한다.

  1. ::-webkit-scrollbar : 스크롤바 영역 설정
  2. ::-webkit-scrollbar-thumb : 스크롤바 막대 설정
  3. ::-webkit-scrollbar-track : 스크롤바 뒷 배경 설정

이렇게 되겠다. 쉽게 말해 1번은 넓이 지정이고, 2번은 스크롤바 색상 밑 모양을 다듬을수 있겠다.
3번은 스크롤바 뒤에있는 배경 색 등을 만질수 있다.

모던하게 회색으로 잘 적용된 모습을 확인 할수 있다.

마무리

새로운 css를 찾아보고 적용 해보기 까지 완료 해봤다.
프로젝트는 순조롭게 진행되고 있어서 마음이 조금 놓인다.
팀원분들도 다들 소통에 적극적이여서 진행하기 수월하다.
이번프로젝트 무사히 마무리 됐으면 좋겠다.

0개의 댓글