[HTML] 양식(8) - progress

2020. 8. 30. 20:20HTML, CSS/HTML

 

▶ <progress>

  • 작업 완료의 진행률을 표시.

    - 로딩바(loading bar)와 유사.

 

  • 속성

  max: 작업의 총량. 완료되었을 때의 값을 의미.

  - 숫자 값 입력.


  value: 작업의 진행량.

  - 숫자 값 입력.

  - max 속성을 생략할 경우 value 속성의 값은 0~1 사이의 숫자여야 함.
  - value 속성에 대한 값은 Javascript를 통해 작업하는 편임. 값이 가변하기 때문.

 

 

 

<progress> 사용 예시

 

 

<progress> 사용 예시(2)

  - max 속성을 생략 시 value 속성 값은 0~1 사이의 값이어야 함.

 

 

<progress> 사용 예시(3)