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

 

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

 

목차


    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>

     

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

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

     

    적용한 모습


    1. 프로그레스바 원리

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

     

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

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

     

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

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

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

     

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

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

     


     

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

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

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

     

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

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

     

    반응형
    • 네이버 블로그 공유하기
    • 네이버 밴드에 공유하기
    • 페이스북 공유하기
    • 카카오스토리 공유하기