웹사이트 상단 진행바 넣기 / HTML 16진수 색상코드 쉽게 얻는 법

1. Progress Bar 적용하기

스크롤이 있는 페이지에서, 페이지 상단에 현재 어느 정도까지 읽었는지 표시되는 Progress Bar를 적용하는 방법을 다뤄보고자 한다. 

상단 진행바 예시

위 사진과 같이 읽은(스크롤한) 정도에 따라 차오르는 진행바는 다음과 같은 내용을 웹페이지의 `body` 태그 안에 넣어서 적용할 수 있다. 

 

1-1. PrognRoll jQuery 플러그인 CDN으로 적용

<script type="text/javascript" src="https://rawcdn.githack.com/mburakerman/prognroll/0feda211643153bce2c69de32ea1b39cdc64ffbe/src/prognroll.js"></script> 
        
<script type="text/javascript"> 
	$(function() { 
	$("body").prognroll( 
		{height: 3, color:"#ab9bbf"} 
	); 
	$(".content").prognroll({ 
	custom:true}); 
	}); 
</script> 

 

height 우측에 있는 숫자를 수정해서 진행바의 굵기를 설정할 수 있디. 

1-2. 색상코드 찾아서 넣기

진행바의 색깔은 16진수 색상코드를 입력해서 설정하는데, 위 예시의 경우는 `#ab9bbf`으로, 연보라색이다.

갓구글 검색을 이용하면 색상코드 값을 쉽게 구할 수 있는데, 구글에 위 예시인 `#ab9bbf`를 검색해보면 

위와 같이 색상표가 나온다. 슬라이더와 색상표를 마우스로 조절하거나 RGB 값을 입력하여 #HEX에서 원하는 색상코드를 찾을 수 있다. 

Googe에서 쉽게 색상 코드를 얻을 수 있다.

3. 적용 예시

script 코드를 `body` 태그 안에 넣고, 원하는 굵기와 색상을 선택하면 웹페이지에서 다음과 같이 나타나는 것을 확인할 수 있다. 

상단 진행바가 적용된 모습