Today's Coding, '스크롤 표시바' 만들기

티스토리 블로그 꾸미기 : Progress Bar , 진행 바 만들기.

 

스크롤을 내릴 때마다 페이지 상단에 진행 바(progress bar)가 만들어 보려고 한다.

전체 글을 어느 정도 읽었는 지 알 수 있어서, 긴 글도 끝까지 유도할 수 있도록 하는 유용한 역할을 한다.

 

나중에 이런 사소한 Tip들은 따로 폴더를 구성하여 저장해두어야 겠다.

---

소스 입력하는 위치

 -> 나는 T-story 스킨 변경의 HTML의 가장 맨 아래 부분에 수정을 하였다.

 

src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js">

 ## 사실 .hgroup으로 하니깐 안된다,, 왜 안될까,,?

 

1. 위치

Progress bar가 나타나는 페이지 위치는 위 소스를 보면 ".hgroup"이다. .hgroup로 설정하게 되면, 쉽게 말해 메인 화면을 제외한 콘텐츠가 있는 나머지 페이지에는 모두 노출된다라는 뜻이다. 만약 메인화면까지 포함하여 모든 페이지에서 Progress bar가 나오게 하고 싶다면 .hgroup 대신 " " 안에 html 이라고 적으면 된다.

 

2. 컬러

Progress Bar 색깔은 위 소스에서 color 텍스트 옆에 있는 '#~'에서 숫자를 바꿔주면 된다.

 

3. 굵기

마지막으로 Progress Bar 굵기를 조정하려면 height 텍스트 옆에 있는 값을 변경해주면된다.