*{
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

.common {
  height: 550px;
  width: 100%;
  max-width: 1200px;
  background-color: #222;
  margin: 0 auto;
}
.common:nth-child(2){
  background-color: #333;
}
.common:nth-child(3){
  background-color: #444;
}
.common:nth-child(4){
  background-color: #555;
}
.common:nth-child(5){
  background-color: #666;
}
.common:nth-child(6){
  background-color: #777;
}
.common:nth-child(7){
  background-color: #888;
}

.common:nth-child(8){
  background-color: #999;
}

/* var() --progress 변수 설정 */
#progress-bar {
  position: fixed;
  left: 0;
  top: 0;
  --progress : 0;
  height: 10px;
  width: var(--progress);
  background-color: blue;
}

const progress = document.getElementById('progress-bar');

document.addEventListener('scroll', updateProgressBar);

function updateProgressBar(){
  const {scrollTop, scrollHeight} = document.documentElement;

  //백불률을 구해서 수학함수인 Math.floor로 서수점이하를 버려준다 작은수 / 큰수 * 100 백분율 공식
  const scrollPercent = Math.floor(scrollTop / (scrollHeight - window.innerHeight) * 100) + '%';

  progress.style.setProperty('--progress', scrollPercent);
}