CamelAct

Overview

블로그에서 아래와 같은 상단 프로그래스바를 종종 보았을 것입니다.

이 프로그래스바를 어떻게 넣을 수 있는지 설명합니다.

Edit HTML

티스토리 블로그관리에서 스킨 편집 메뉴로 들어갑니다.

들어가면 오른쪽에 html 편집 버튼을 클릭합니다.

<!-- 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%;
}