[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 스크롤 바 버튼 삭제 CSS 편집

2019. 8. 24. 02:12·이전 게시글/공부 관련

[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 버튼 삭제 CSS 편집


 

오늘 또 여러 가지 편집하면서 올리게 되네요!

 

이번에는 스크롤 바

 

 

이런 걸 바꿀 겁니다.

 

이걸 왜 바꾸냐면 반응형 2 스킨에서 메뉴를 열면 정말 안 이쁘거든요;;

 

그래서 메뉴에서는 안 보이게 하려고 했으나

 

코드를 못 찾겠어서

 

모양을 좀 이쁘게? 만들려고 합니다.

 

언젠가 찾게 되겠죠 프로필 이미지 크기도 찾은 것처럼ㅎㅎ

 

 

이번에는 수정이 아닌 그냥 CSS에 넣으시면 됩니다.

 

스킨마다 다르겠지만

 

반응형 2에서는 직접 넣어줘야 합니다.

 

/* 스크롤 바 */
::-webkit-scrollbar { width: 15px; }
::-webkit-scrollbar-track { background-color: #F3F3F3; }
::-webkit-scrollbar-thumb { background-color: #BDBDBD; }
::-webkit-scrollbar-button { display: none; }

 

width를 수정해서 넓이도 수정해줍시다.

 

기존 스크롤바는 꽉 찬 느낌이 아니라서 약간 불편한 느낌이 있었지만 이렇게 해주면 꽉 차 보입니다.

 

track에는 스크롤 바 밑에 색깔을 넣어주고

 

thumb에는 바 색깔을 넣어줍니다.

 

네이버에 html 색상표라고 검색하시면 색상 코드를 얻을 수 있으니 참고하세요!

 

 

그리고 중요한 게

 

스크롤 바 버튼을 없애줄 겁니다.

 

이게 있으니까 메뉴에서 별로 안 이쁘더라고요.

 

그래서

 

::-webkit-scrollbar-button { display: none; }

을 넣어줍니다.

 

이게 보이지 않을 뿐이지 해당 위치를 누르니까 기능은 남아있었습니다.

 

여러분 나름대로 예쁘게 꾸미시길 바랍니다!

 

그리고 반응형 메뉴의 스크롤 바 없애는 방법 아시는 분 댓글 좀 부탁드립니다!

저작자표시 (새창열림)

'이전 게시글 > 공부 관련' 카테고리의 다른 글

[티스토리 스킨 만들기] 블로그 화면에 이미지 고정시키기, 구석에 고양이 만들기  (2) 2019.08.25
[티스토리 스킨 만들기] 반응형 2 스킨 사이드 바 꾸미기, 3단에서 2단으로, 글꼴, 색깔, 빠르게, 애니메이션 삭제  (1) 2019.08.24
[티스토리 스킨 만들기] 반응형 2 블로그 제목, 닉네임 CSS 크기, 굵기바꾸기  (0) 2019.08.24
[티스토리 스킨 만들기] 반응형 2 블로그 프로필 이미지 크기 변경하기  (1) 2019.08.24
[티스토리 스킨만들기] 유튜브 재생목록을 블로그 배경음악으로 넣고 자동재생에 연속 재생까지 하는 법  (1) 2019.08.21
'이전 게시글/공부 관련' 카테고리의 다른 글
  • [티스토리 스킨 만들기] 블로그 화면에 이미지 고정시키기, 구석에 고양이 만들기
  • [티스토리 스킨 만들기] 반응형 2 스킨 사이드 바 꾸미기, 3단에서 2단으로, 글꼴, 색깔, 빠르게, 애니메이션 삭제
  • [티스토리 스킨 만들기] 반응형 2 블로그 제목, 닉네임 CSS 크기, 굵기바꾸기
  • [티스토리 스킨 만들기] 반응형 2 블로그 프로필 이미지 크기 변경하기
aptenia
aptenia
공부하면서 배운 것들
  • aptenia
    새벽의 아이디어
    aptenia
  • 전체
    오늘
    어제
    • 분류 전체보기 (276)
      • f1tenth (2)
      • 이전 게시글 (268)
        • 개발 관련 (25)
        • 정보 관련 (19)
        • 공부 관련 (224)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
    • 네이버 블로그
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    프로그래머스PCCE
    마인크래프트
    일본규슈공업대학교
    c언어초보
    마크스크립트
    이것이자바다연습문제
    프로그래머스
    C언어
    빅데이터공모전
    자바
    티스토리스킨편집
    마인크래프트스크립트
    반복하지않는수
    이것이자바다확인문제
    스크롤바CSS
    파이어베이스
    백준
    안드로이드
    티스토리HTML
    티스토리반응형2스킨편집
    C++강좌
    콜라츠추측
    컨텍스트스위칭
    이것이자바다
    마크
    C언어강좌
    마인크래프트강화스크립트
    캡스톤디자인
    공개SW개발자대회
    파이썬
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
aptenia
[티스토리 스킨 만들기] 스크롤 바 모양 바꾸기, 스크롤 바 버튼 삭제 CSS 편집
상단으로

티스토리툴바