티스토리 본문 상단 스크롤바 적용하기 (+ 원하는 색상 적용)

📌 TL;DR

💡

1. 아래의 코드 2줄만 추가하면 본문 상단에 가로 스크롤바를 적용할 수 있다.

2. 색상, 굵기 등 원하는 스타일로도 적용 가능하다.

📊

본문 상단에 스크롤바 적용하기

• 1.

  티스토리 관리자 페이지에서 "스킨 편집"을 누른다.

  

• 2.

  "찾기(ctrl+f)"를 눌러 "</head>"를 검색하여 코드의 위치를 확인한다.

  

• 3.

  아래 코드를 복사한다.

  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-components-kit/topScrollIndicator/css/styles.css" />

• 4.

  복사한 코드를 "</head>" 라인 바로 위에 붙여 넣는다.

  

• 5.

  "찾기(ctrl+f)"를 눌러 "</body>"를 검색하여 코드의 위치를 확인한다.

  

• 6.

  아래 코드를 복사한다.

  <script src="https://cdn.jsdelivr.net/gh/ungveloper/web-components-kit/topScrollIndicator/js/scripts.js"></script>

• 7.

  복사한 코드를 "</body>" 라인 바로 위에 붙여 넣는다.

  

• 8.

  코드 저장 후 해당 페이지를 새로 고침하여 코드 적용이 잘 되었는지 확인한다.

🎨

원하는 스타일 적용하기

💡

원하는 스타일을 적용하려면 📊 본문 상단에 스크롤바 적용하기를 사전에 적용해둔 상태여야 한다.

• 1.

  "찾기(ctrl+f)"를 눌러 "</head>"를 검색하여 코드의 위치를 확인한다.

  

• 2.

  아래 코드를 복사한다.

  <style>
            #topScrollIndicator {
              /* 채워지는 선 굵기 (숫자만 변경) */
              height: 3px;
          
              /* 채워지는 선 색상 */
              background: #333333;
            }
  </style>

• 3.

  복사한 코드를 "</head>" 라인 바로 위에 붙여 넣는다.

  

• 4.

  각 주석 내용에 굵기와 색상을 지정해주는데, 여기서 색상은 hex code를 입력해 준다.

  ❗️

  hex code가 뭔지 몰라 컬러를 설정하기 어렵다면,
  W3C 페이지에 정의되어 있는 "Color name"으로도 사용 가능하다.

• 5.

  코드 저장 후 해당 페이지를 새로 고침하여 코드 적용이 잘 되었는지 확인한다.