progress bar CSS로 디자인 수정하기

HTML5의 progress 태그로 구현한 프로그레스 바의 디자인을 수정한다.

HTML:

<progress value="0" max="100"/>

여기에서 max는 progress 요소의 작업 진행에 필요한 전체 작업량이다. 반드시 0보다 크고 유효한 부동소수점 숫자여야한다.
value는 프로그레스바의 작업 진행 정도이다. 부동소수점 숫자여야한다.

기본 HTML5로 구현된 <progress> 의 디자인을 수정하고싶다면 웹킷 의사 요소 선택자로 선언해줘야한다.

하지만 MDN에서는 이 기능이 비표준이기 때문에 모든 사용자에 적용되지 않을 수 있음을 강조한다.

::-webkit-progress-bar 의사 선택자는 progress 요소의 전체 bar를 나타낸다.
::-webkit-progress-value 의사 선택자는 value를 나타낸다.

progress {
  -webkit-appearance: none;
}

::-webkit-progress-bar {
  background-color: grey;
}

::-webkit-progress-value {
  background-color: orange;
}