티스토리 헤더 스크롤바 적용하기 (+ 원하는 색상 적용)

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

• 4.

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

  

• 5.

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

  

• 6.

  아래 코드를 복사한다.

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

• 7.

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

  

• 8.

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

🎨

원하는 색상 적용하기

💡

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

• 1.

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

  

• 2.

  아래 코드를 복사한다.

  <style>
          header {
            /* header 아래 테두리 색상 */
            border-bottom: 1px solid #dddddd;
          }
        
          #headerScrollIndicator {
            /* 채워지는 scroll indicatior의 색상 */
            background: #333333;
        
            /* 채워지는 scroll indicatior의 높이 (숫자만 변경) */
            height: 3px;
          }
  </style>

• 3.

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

  

• 4.

  각 주석 내용에 맞게끔 내용을 변경하는데
  높이는 "#headerScrollIndicator"의 height를 수정하면 되고,
  색상은 "border-bottom" 및 "background" 뒤에 위치한 hex code를 원하는 색상으로 변경한다.

  ❗️

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

• 5.

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