Contents
티스토리(스킨편집) 프로그레스 바, 진행 바 란?
PC에서 또는 모바일에서 글들을 볼 때 한 번씩은 위 이미지처럼 상단에 진행 바 같은 것을 보셨을 겁니다. PC 버전에서 스크롤을 내릴 때마다 또는 모바일에서 아래로 드래그할 때마다 게이지가 차거나 줄어들거나 합니다. 이것을 '프로그레스 바(Progress Bar)' 또는 '진행 바'라고 합니다. 이 기능의 역할은 전체 문서의 길이를 측정한 다음 본인이 보고 있는 위치가 전체 글의 어느 부분인지 눈으로 볼 수 있게 해 줍니다. 때문에 시인성도 좋고 즉각적으로 전체 글의 양 또는 위치를 쉽게 파악할 수 있습니다. 별거 아닌 것처럼 보이지만 이 기능을 통해서 글을 읽는 사람이나 구독자들의 편의성이 더욱 높아질 겁니다.
티스토리 HTML / CSS 이해하기
먼저 이 프로그레스 바, 진행 바를 본인의 티스토리 블로그에 적용하기 위해서는 간단하게나마 HTML과 CSS를 알고 넘어가는 것이 좋습니다.
HTML
Hyper Text Markup Language의 약자로 웹 페이지를 만드는데 필요하고 사용되는 언어.
CSS
Cascading Style Sheets의 약자로 HTML과 같은 양식으로 작성된 문서를 표현하는 기술.
간단하게 요약하자면 'HTML은 웹페이지를 구성하기 위한 뼈대'라고 보시면 되고 'CSS는 그 뼈대 안의 크기, 색상, 위치 등 세부적인 요소들을 컨트롤'한다고 보시면 됩니다.
간단하게나마 HTML과 CSS의 기능들을 알아봤습니다. 티스토리 - 스킨 편집에서 HTML과 CSS을 잘 활용하신다면 나만의 사이트를 꾸밀 수도 있으니 차근차근 관련 자료들을 업로드 드리겠습니다.
티스토리 프로그레스 바 설정 방법
티스토리에 들어가 보시면 스킨 편집 파트가 있습니다. 여기에서 이미지를 따라서 HTML 편집으로 들어가 주시면 3가지의 파트를 보실 수 있고 HTML / CSS / 파일업로드 순으로 보이실 겁니다.
위 이미지처럼 HTML에서 간단한 문구를 삽입해주게 된다면 프로그레스 바, 진행 바를 적용시킬 수 있습니다. 그렇다면 어떤 문구를 그리고 어떤 위치에 넣어야 하는지 설명드리겠습니다.
HTML 편집에 적용할 프로그레스 바 내용
위 내용을 처음 보신다면 아마도 무슨 내용인지 헷갈려하시는 분들이 열에 아홉이실 겁니다.
우선 큰 카테고리로 보자면 가장 상단, 하단에 보이는 <!-- start progress bar -->와 <!-- end progress bar -->는 HTML에 영향을 미치지 않습니다. 그래서 어떤 내용을 적용시킬 건지 간단하게 수정해서 메모를 해두시는 분들도 많습니다.
다음은 1번째 script와 2번째 script로 나뉘어있는데 첫 번째는 프로그레스 바를 실행할 url 주소이고 두 번째 문구가 티스토리에 보이게끔 하는 코드입니다. 그리고 height와 color는 수정이 가능합니다.
height : 5
프로그레스 바의 두께를 설정합니다. 5가 기본으로 잡혀있고 숫자가 클수록 두께가 두꺼워집니다.
color : "#FCE493"
프로그레스 바의 색상을 설정합니다. 각자 원하는 색깔로 설정이 가능하고 코드는 아래에 링크를 달아드리니 참고하시고 희망하는 색깔의 코드를 넣어주시면 됩니다.("#FCE493" 이 코드 색상은 제 글에 보이는 프로그레스 바 색상과 동일한 코드입니다.)
색상 참고 웹 페이지
아래의 사이트에서 희망하는 색상의 코드를 color : "---------" 안에 입력해주시면 됩니다.
HTML Color Codes
Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values.
htmlcolorcodes.com
HTML 내용 적용 위치는?
위에서 'HTML_프로그레스 바. txt'파일을 열어보시고 전체 내용을 카피하여 HTML 편집으로 가셔서 HTML 내용 중 헤드와 헤드 사이에 붙여 넣기 하시면 됩니다.
<head>
(이 공간에 페이스트)
</head>
참고 및 주의사항
참고로 HTML 수정을 하시기 전에는 간단하게 내용 백업을 해두시고 진행하시길 추천드립니다. 오늘 프로그레스 바 HTML 작업의 경우는 간단한 문구를 헤드와 /헤드 사이에 삽입하고 높이와 컬러의 조정만 한다면 기능을 하는 간단한 작업이었습니다. 추후 복잡한 HTML 편집이나 압축을 사용하시게 되실 때에는 HTML의 수정으로 블로그에 치명적인 오류를 초래할 수도 있으니 항상 내용들을 백업해주시기 바랍니다.
프로그레스 바 포스팅을 줄이며
오늘 프로그레스 바(인디케이터) 포스팅을 시작으로 티스토리(북스킨) HTML / CSS 편집, 스킨 꾸미기, 티스토리 노하우 등 다양한 소재로 업로드를 할 예정입니다. 비록 전문적이고 고난도의 작업은 아닐지라도 많은 분들에게 도움이 될 수 있는 내용으로 돌아오도록 하겠습니다. 혹시나 궁금한 부분은 댓글 남겨주시면 답변 약속드리며 여기까지 글을 줄이도록 하겠습니다.
