[블로그 디자인 1.0.9] 프로그레스바 만들기

본문 글을 확인할 때, 지금 얼마나 읽었는 지 스크롤바를 통해 파악을 할 수 있는데요!

 

추가로 상단에 얼마나 읽었는 지를 나타내는 프로그레스바가 있으면 예쁘지 않을까라는 생각을 해서 추가를 해 보려고 합니다!

 

목차

---

0. 프로그레스바 추가하기

아주아주 익숙하게 환경설정 > 스킨 편집 탭에 들어갑니다.

 

 

HTML 편집 버튼을 눌러줍니다.

 

 

</body>의 바로 위에 아래와 같은 script를 추가해줍니다.

(script형태이기 때문에 위치는 상관이 없습니다!!)

 

 

<!-- 프로그레스 바 -->
<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script> 			<script type="text/javascript"> $(function() {
	$("body").prognroll({ height: 5, color: "#006400" });
	$(".content").prognroll({ custom: true }); });
</script>

 

여기서 우리가 바꿀 수 있는 내용은 height와 color입니다.

height에 따라 바의 굵기가 바뀌고, color에 따라 바의 색깔이 바뀝니다.

 

적용한 모습

---

1. 프로그레스바 원리

우리가 HTML에 작성했던 코드에는 script문이 2개가 있죠?

 

첫 번째 script문은 어딘가에 이미 저장되어있는 cdn을 가져와서 쓰겠다는 의미입니다.

실제로 src에 적혀있는 링크로 이동하면 아래와 같은 script 코드가 들어있습니다.

 

두 번째 script문은 가져온 cdn에 있는 prognroll이라는 함수를 사용합니다.

첫 번째 body에서는 height, color를 바꿀 수 있고,

두 번째 .content는 그대로 true로 두면 됩니다.

 

그리고 우리가 별 다른 설정을 안했죠?

그렇기 떄문에 모바일 화면에서도 동일하게 body의 맨 위, 화면의 맨 위에 프로그레스바가 출력됩니다!

 

---

 

오늘은 CDN을 이용하여 간단하게 프로그레스바를 만들었습니다.

나중에는 CDN을 이용하지 않고 직접 하나하나 따져가면서 수정해 볼 생각입니다.

(옵션이 2가지 뿐이라 투명도 조절이 불가능하다는 치명적인 단점이 있습니다..)

 

그렇다면 다음 블로그 업데이트에서 뵙도록 하겠습니다!!

읽어주셔서 감사합니다 😁😁