티스토리 우측 하단에 원형 스크롤바 적용하기 (+ 원하는 스타일 적용)

📌 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/scrollIndicator/css/styles.css" />

• 4.

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

  

• 5.

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

  

• 6.

  아래 코드를 복사한다.

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

• 7.

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

  

• 8.

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

🎨

원하는 스타일 적용하기

💡

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

• 1.

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

  

• 2.

  아래 코드를 복사한다.

  <style>
            #scrollIndicator {
              /* 우측 기준 거리 (여백) */
              right: 32px;
          
              /* 하단 기준 거리 (여백) */
              bottom: 32px;
          
              /* 길이 (숫자만 변경) */
              width: 72px;
          
              /* 높이 (숫자만 변경) */
              height: 72px;
            }
          
            #scrollIndicator .progressCircle {
              /* 채워지는 선 굵기 (숫자만 변경) */
              stroke-width: 3;
          
              /* 채워지는 선 색상 */
              stroke: "#000000";
            }
          
            #scrollIndicator text {
              /* 내부 폰트 크기 */
              font-size: 20px;
          
              /* 내부 폰트 색상 */
              fill: "#000000";
            }
  </style>

• 3.

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

  

• 4.

  각 주석 내용에 맞게끔 스타일을 변경하는데, 여기서 색상은 hex code를 입력해 준다.

  ❗️

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

• 5.

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