[HTML/CSS] 티스토리 스크롤 프로그레스 (Progress Bar) 초간단 적용 방법

안녕하세요, 수염난아이티 입니다.

 

인터넷을 하며 마우스 스크롤을 위/아래로 움직이다보면 웹페이지의 특정 위치에 어떤 게이지가

내가 읽고있는 위치에 따라서 같이 움직이는 것을 발견할 수 있습니다.

 

이 게이지 같은 것을 프로그레스 바(Progress Bar)라고 합니다.

이번 페이지에서는 아주 간단하게 티스토리 상단에 프로그레스 바를 적용하는 방법을 알아보겠습니다.

 

목차

1. 프로그레스 바(Progress Bar)란?

2. 프로그레스 바 HTML 코드 추가하기

3. 프로그레스 바 CSS 코드 추가하기

4. 프로그레스 바 그라데이션 CSS 코드 추가하기

 

1. 프로그레스 바(Progress Bar)란??

프로그레스 바는 사용자에게 내 블로그의 글을 어느 정도 읽었는지 시각적으로 표시하는 UI요소 입니다.

일반적으로 프로그레서 바는 진행 중인 작업의 진행 정도를 나타내는 가시적인 막대를 제공합니다.

이는 사용자에게 작업이 얼마나 더 걸릴지 또는 어디까지 진행되었는지 알려줍니다.

사용자는 프로그레스 바를 통해 블로그의글이 얼마나 남았는지 시각적으로 파악할 수 있으므로,

이는 사용자 경험을 향상시키는 데 중요한 UI요소 입니다.

 

2. 프로그레스 바 HTML 코드 추가하기

아래 그림과 같이 '티스토리 관리 → 스킨편집 → html편집' 으로 접속하여

ctrl + F3 으로 's_t3' 를 찾습니다.

 

그리고 아래의 html 코드를 <s_t3> 아래 열에 맞춰 붙여넣습니다.

<!-- 프로그레스바 -->
<div id="mybar"></div>
<script>function myBar(){var a=(document.body.scrollTop||document.documentElement.scrollTop)/(document.documentElement.scrollHeight-document.documentElement.clientHeight)*100;document.getElementById("mybar").style.width=a+"%"}window.onscroll=function(){myBar()};</script>
<!-- 프로그레스바 끝 -->

 

3. 프로그레스 바 CSS 코드 추가하기

위의 html 코드 입력을 완료했다면 아래 그림과 같이 css 코드 입력 창으로 넘어갑니다.

(html 바로 옆에 있습니다.)

 

그리고 아래의 코드를 원하는 위치에 입력합니다.

저는 맨 위에 입력했습니다.

/* 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 프로그레스 바 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: #22ac38; /* 프로그레스 바 색상 */
}
/* 프로그레스바 시작 끝 */

 

4. 프로그레스 바 그라데이션 CSS 코드 추가하기

프로그레스 바에 그라데이션 효과를 넣고 싶으시면 아래의 코드를 입력하시면 됩니다.

/* 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px; /* 프로그레스 바 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: linear-gradient(135deg, #fa709a, #fee140); /* 프로그레스 바 그라데이션 색상 */
}
/* 프로그레스바 시작 끝 */

 

#출처 : https://galam.tistory.com/