본문 글을 확인할 때, 지금 얼마나 읽었는 지 스크롤바를 통해 파악을 할 수 있는데요!
추가로 상단에 얼마나 읽었는 지를 나타내는 프로그레스바가 있으면 예쁘지 않을까라는 생각을 해서 추가를 해 보려고 합니다!
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가지 뿐이라 투명도 조절이 불가능하다는 치명적인 단점이 있습니다..)
그렇다면 다음 블로그 업데이트에서 뵙도록 하겠습니다!!
읽어주셔서 감사합니다 😁😁
최근댓글