[HTML/jQuery] 짧은 코드로 Progress bar / Scrollbar 커스터마이징하기

안녕하세요 

 

이번 포스팅에서는 여러분들의 블로그를 간단하게 꾸미는 방법에 대해 소개합니다.

 

 

1. Progress bar

 

Progress bar는 진행 상황을 나타냅니다.

 

보통은 div나 span으로 구현하기도 하지만, 간단하게 외부 라이브러리를 이용하는 것도 좋은 방법이겠습니다.

 

다음 코드를 HTML 파일에 추가해 봅시다.

(티스토리의 경우 스킨 편집 -> HTML 편집에서 추가할 수 있습니다)

<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:"lightgreen"} ); 
        $(".content").prognroll({ custom:true }); 
    }); 
</script>

 

제이쿼리를 사용하여 prognroll을 HTML 요소에 붙이는 것을 볼 수 있습니다.

티스토리의 경우는 제이쿼리가 옛날버전으로 추가되어 있지만, 다른 플랫폼을 사용하시는 경우 제이쿼리 cdn까지 추가해 주어야 합니다.

 

이때 중요한 점은 Progress bar가 적용될 부분입니다. 다음 코드에서는 body에 붙이고 있지만,

그렇다면 블로그 대문이나 목록 화면에서도 스크롤을 내릴 때 마다 Progress bar가 진행되게 됩니다.

이 부분은 크롬의 개발자 모드를 이용하여 자신의 게시글이 진행되는 div요소의 class를 알아내어 붙이면 됩니다.

 

 

article_content가 게시글의 view를 담당하고 있습니다. 이러한 경우 body 대신에 .article_content에 prognroll을 달아주면

게시글에서 스크롤을 내릴 때만 Progress bar가 진행되게 됩니다.

 

 

다음과 같이 Progress bar가 추가되었네요. 커스터마이징을 원하시면 height, color값을 따로 변경할 수 있습니다.

자세한 코드는 여기서 확인할 수 있습니다.

↓

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

2. Scrollbar

 

기본적으로 Scrollbar는 브라우저의 기본 속성을 따라가기 때문에, css만으로 이를 커스텀하는 것은 어려운 일입니다.

하지만 webkit 엔진을 사용하는 사파리/크롬에서는 간단한 코드로 스크롤바 수정을 할 수 있습니다.

 

css 파일에 다음 코드를 추가해 봅시다.

/* 스크롤 바 크기 지정하기 */
::-webkit-scrollbar { width: 10px; height: 0px;} 

/* 스크롤 바가 차지하지 않는 배경 부분 */
::-webkit-scrollbar-track { background-color:#fff; } 

/* 스크롤 바 */
::-webkit-scrollbar-thumb { background: lightgreen; border-radius: 20px; } 

/* 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:hover { background: springgreen; } 

/* 실질적 스크롤 바를 클릭/드래그할 때 */
::-webkit-scrollbar-thumb:active { background: springgreen; } 

 

 

적용이 잘 되었네요!

 

 

 

이상 간단하게 Progress bar와 Scorllbar를 붙이는 방법에 대해 포스팅했습니다