728x90
Overview
블로그에서 아래와 같은 상단 프로그래스바를 종종 보았을 것입니다.
이 프로그래스바를 어떻게 넣을 수 있는지 설명합니다.
Edit HTML
티스토리 블로그관리에서 스킨 편집 메뉴로 들어갑니다.
들어가면 오른쪽에 html 편집 버튼을 클릭합니다.
<body>와 </body> 사이에 하기 구문을 추가합니다.
<!-- progress-bar 영역 Start -->
<div class = "progress-container">
<div class = "progress-bar" id = "indicator"></div>
</div>
<!-- progress-bar 영역 End -->
Edit CSS
html 편집 메뉴 안에서 상단의 CSS를 클릭합니다.
맨 아래에 하기 구문을 추가합니다.
/* 프로그래스바 컨테이너 디자인 */
.progress-container {
position: fixed; /*상단 고정*/
top: 0; /*페이지의 최상단에 붙어서 위치*/
z-index: 1000; /*페이지의 다른 요소보다 가장 위에 나타나도록 설정*/
width: 100%;
height: 8px; /* 높이 */
background: #ccc; /* 기본 배경색 */
}
/* 프로그래스바 디자인 */
.progress-bar {
height: 8px; /* 높이 */
background: #000000; /* 색상 */
width: 0%;
}
728x90
'Blog Management' 카테고리의 다른 글
| [ENG][블로그에]구글 에드센스 광고 게시 (0) | 2022.06.25 |
|---|---|
| [ENG][블로그에]스크롤에 따른 목차 하이라이트 만들기 (0) | 2022.06.12 |
| [ENG][블로그에]Google 검색 등록하기 (0) | 2022.06.11 |
| [ENG][블로그에]Naver 검색 등록하기 (0) | 2022.06.10 |
| [ENG][블로그에]번역기 붙이기 (0) | 2022.06.09 |
| [ENG][블로그에]목차 만들기 (0) | 2022.05.25 |