보통 일기를 적을 때는 tistory를 사용한다.

근데 개발 관련 글을 읽을 때 scroll indicator가 있는 게 너무 읽는 사람에게 편해보였다.

google에 page scroll indicator를 검색했고,

다음과 같은 페이지를 얻을 수 있었다. $\rarr$ page scroll indicator

1️⃣ html

---

<div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
</div>

난 이걸 넣을 자리를 찾을 때 꽤 애 먹었다. 하지만 이번에 start element selection 을 사용하는 방법을 알았다.

chorme & safari start element selection

---

chorme의 경우 $\rarr$ F12 (개발자 모드) $\rarr$ ⇧ + ⌘ + c
safari의 경우 $\rarr$ ⌘ + ⌥ + i (개발자 모드) $\rarr$ ⇧ + ⌘ + c

이건 나중에 정말 많이 사용할 거 같다.

2️⃣ CSS

---

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #04AA6D;
  width: 0%;
}

css의 경우에도 이번에 색을 표현하는 방법을 알았다. RGB, RGBA, etc...

나는 깔끔한게 좋아서 아래와 같이 바꿨다.

.progress-container {
  width: 100%;
  height: 8px;
  background: transparent;
}
/*뒷 배경을 투명하게 변경했다.*/
.progress-bar {
  height: 8px;
  background: rgb(93, 176, 159;
  width: 0%;
}
/*색은 블로그의 테마색과 같게 했다.*/

색상 표기법

3️⃣ javascript

---

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}

최근데 콜백함수에 대해서 배운 적이 있는데 여기서 myFunction이 callback 함수이지 않을까 생각했다.

느낀점

---

html을 굉장히 만만하게 생각하고 그냥 사이트에 나온 그대로 넣으면 되겠지 생각했다.

근데 생각보다 까다로운 녀석이다.

또 indicator의 위치를 뭔가 아래로 내리고 싶은데 tistory의 banner class 아래에 바로 달았는데 나는 banner위에 indicator가 위치하게 되었다.

아래는 나의 tistory 블로그이다.

티스토리 블로그