HTML / progress - 진행 정도 나타내는 바 만드는 태그

progress

  • progress는 진행 정도 나타내는 바를 만드는 태그입니다.
  • HTML5에서 추가되었습니다.
  • IE는 버전 10부터 지원합니다.
  • 주요 속성은 max, value입니다. max를 전체로 보았을 때 value에 해당하는 정도를 나타냅니다.

예제 1

  • 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다. 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다.
  • 웹브라우저마다 표현 방식이 다릅니다.

IE Edge

Chrome

예제 2

  • CSS로 크기를 바꾸고, 스크립트로 동적인 효과를 준 예제입니다.
  • 버튼을 클릭하면 value를 20에서 80으로 바꿉니다.