| 알고 계신가요?

오늘은 티스토리에 "프로그레스바" 기능을 적용하는 방법에 대해 말씀드리겠습니다.

프로그레스바란?

포스팅을 읽을 때마다 포스팅 진도를 가시적으로 보여주는 막대가 바로 "프로그레스바" 입니다.

아래와 같이 스크롤링 할 때마다 웹사이트 상단에 뭔가 오른쪽으로 지나가는 것이 보이실텐데요, 이게 바로 프로그레스바 입니다.

"프로그레스바"는 글을 얼만큼 읽었는지 가시적으로 나타내줌으로써 사용자 경험을 향상시키는 효과가 있습니다. 프로그레스바 적용방법은 아래와 같습니다.

프로그레스바 코드 적용방법

✅ HTML에 코드 추가

1 티스토리 관리창에서 [스킨편집] → [html 편집] 버튼을 누릅니다.

2 HTML에서 80~100번째 행을 보시면 <s_t3>이라는 코드가 있습니다. 해당코드 바로밑줄에 아래의 HTML 코드를 복사 붙여넣기 하시면 됩니다.

<HTML 코드>

  <!-- 프로그레스바 시작-->
  <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 HTML 코드를 복사&붙여넣기했을 때 위와 같이 코드들 색깔이 알록달록하다면 정상적으로 복붙하신 겁니다. 다음으로는 CSS에 코드를 추가해보겠습니다.

✅ CSS에 코드 추가

4 CSS 버튼을 눌러서 CSS 화면으로 이동합니다.

5 CSS 코드 맨끝으로 이동하신 다음에 아래의 CSS 코드를 복붙하시면 됩니다. HTML때와 마찬가지로 복붙한 코드의 색깔이 알록달록하다면 정상적으로 복붙하신 겁니다.

<CSS 코드>

/* 프로그레스바 시작 */
#mybar { 
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 4px; /* 프로그레스 바 굵기 */
  z-index: 9999999;
  transition: all .2s ease;
  background: linear-gradient(135deg,#ffffff,#a8a8a8); /* 프로그레스바 색상_변경 250319 */
}
/* 프로그레스바 끝 */