티스토리 상단 스크롤 진행 바 만들기
블로그 글이나 뉴스기사를 접할 때 상단에 글의 진행 정도를 보여주는 진행바가 있는 글들이 있습니다. "프로그래스 바"라고 하는데 티스토리 블로그에 프로그래스 바를 입히는 방법에 대해서 알아보겠습니다.
1. 프로그래스 바란?
프로그래스 바(ProgressBar)는 전체 작업의 진행 정보를 동적으로 보여주는 박스형태의 게이지입니다.
파일을 다운로드할 때 0부터 100까지의 게이지가 있고 색이 차오르면서 진행 상황을 볼 수 있게 해주는 것들을 프로그래스 바라고 합니다.
티스토리 블로그에서는 간단한 태그 몇 개를 추가함으로써 본문 글 상단에 전체 글의 진행 정도를 확인할 수 있도록 설정해 줄 수 있습니다.
2. 프로그래스 바 추가하는 방법
프로그래스 바는 전체 바가 있고, 진행할 때 움직여주는 바 두 가지로 이루어져 있습니다.
HTML과 CSS에 추가해서 만들어 낼 수 있으니 5분 정도만 투자해서 블로그를 가독성 있게 만들어 보는 것도 좋을 것 같습니다.
티스토리 블로그관리에서 스킨편집->HTML편집으로 들어갑니다.
HTML에서 ctrl+f로 검색하기를 열고, wrap를 검색합니다.
<div id="wrap">와 <header id="header"> 사이에 아래 코드를 붙여 넣어 주면 됩니다.
프로그래스 바 컨테이너와 프로그래스 바를 만들어 주는 작업입니다. 컨테이너는 배경이 되는 게이지이고 프로그래스 바는 움직일 녀석입니다. 움직일 녀석에게는 인디케이터로 아이디 선언을 해줍니다.
<!-- progress-bar 영역 Start -->
<div class = "progress-container">
<div class = "progress-bar" id = "indicator"></div>
</div>
<!-- progress-bar 영역 End -->
위 코드를 복사해서 붙여 넣기 해주시면 됩니다.
인디케이터를 만들었으면 이벤트가 발생할 때 움직임이 있도록 만들어 주어야 합니다.
<!-- 프로그래스바 스크립트 START -->
<script>
// 인터넷 스크롤 이동 시 이벤트
window.onscroll = function() {createPrograssBar()};
function createPrograssBar() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("indicator").style.width = scrolled + "%";
}
</script>
<!-- 프로그래스바 스크립트 END -->
위 스크립트를 복사해서 <head>와 </head> 사이에 붙여 넣고 적용을 누르면 됩니다.
이제 HTML 수정은 끝이 났습니다. 스크롤에 따라서 게이지가 움직이는 것까지는 만들었고, 색이나 크기만 설정해 두면 모든 글에서 적용이 될 수 있습니다.
이것은 CSS에서 설정이 가능합니다.
프로그래스 바 디자인은 위 코드를 CSS 아무 곳에나 붙여 넣고 적용하시면 됩니다.
위에서 수정하실 것은 height와 background입니다. 그 외에는 손대실 필요는 없습니다. 상단에 고정해서 움직인다는 뜻이고 컨테이너는 배경박스, 프로그래스바는 움직이는 박스기 때문에 둘의 색만 바꿔주시면 됩니다.
높이는 5~8px이 가장 깔끔한 두께입니다. 선호하는 두께로 하셔도 됩니다. 10px이상 원하시면 상관은 없습니다.
색은 배경색은 투경하게 기본배경색으로 했고 #ccc나 다른 색으로 하셔도 됩니다.
프로그래스 바 디자인에서도 높이는 컨테이너와 픽셀을 맞춰주시고 색상을 눈에 띄면서 블로그와 어울리는 색으로 선택하시면 됩니다.
저는 블루계열을 선택했는데, 회색이나 검은색 빨간색으로 설정하시는 분들도 많습니다.
색상코드는 #000000; 부분에 마우스를 올리면 색상표가 나오기 때문에 직접 클릭하셔서 선택하시면 됩니다.
완성 후 적용하기 버튼을 누르면 게시된 모든 글에 프로그래스 바가 설정된 것을 확인하실 수 있습니다.
/* 프로그래스바 컨테이너 디자인 */
.progress-container {
position: fixed; /*상단 고정*/
top: 0; /*페이지의 최상단에 붙어서 위치*/
z-index: 1000; /*페이지의 다른 요소보다 가장 위에 나타나도록 설정*/
width: 100%;
height: 8px; /* 높이 */
background: transparent; /* 기본 배경색 */ /*#ccc*/
}
/* 프로그래스바 디자인 */
.progress-bar {
height: 8px; /* 높이 */
background: #339bfc; /* 색상 */
width: 0%;
}
위 코드를 CSS 아무곳에나 붙여 넣으면 됩니다. 저는 가장 하단에 추가했습니다.
위 이미지는 프로그래스 바가 적용된 페이지입니다. 위 이미지처럼 스크롤 내려보면서 적용이 된 것을 확인하고, 움직임까지 확인이 되었으면 내 블로그와 잘 어울리는지 등등 두께와 색상을 보시고 CSS만 수정하시면 됩니다.
이상으로 티스토리에 프로그래스 바 설정하는 방법에 대해서 알아보았습니다.
'티스토리 > 티스토리 관리 팁' 카테고리의 다른 글
| 티스토리 코드블럭 복사버튼 만들기 (0) | 2023.12.16 |
|---|---|
| 티스토리 이미지 지연로드 설정방법 (0) | 2023.12.14 |
| 티스토리 개인정보 처리방침 URL 설정 방법 (애드센스 GDPR) (0) | 2023.12.03 |
| 티스토리 카카오 애드핏 승인신청방법 (1) | 2023.11.30 |
| 티스토리 줌 검색사이트 등록 방법 (0) | 2023.11.27 |
