(HTML5 08) progress element

SoloLearn HTML 번역

HTML5 progress Element

Progress Bar

진행 표시 줄

  • The <progress> element provides the ability to create progress bars on the web.
    • <progress> element는 웹에서 진행 표시 줄을 생성하는 기능을 제공한다.
  • The progress element can be used within headings, paragraphs, or anywhere else in the body.
    • progress element는 제목, 토막글, body의 다른 곳에서 사용될 수 있다.

Progress Element Attributes

progress element 속성

  • value: Specifies how much of the task has been completed.
    • 완료된 작업의 양을 지정한다.
  • max: Specifies how much work the task requires in total.
    • 작업에 필요한 작업량의 합계를 지정한다.

  • Example:
Status: <progress min="0" max="100" value="35"></progress>

코드 실행 확인

  • Result:


Use the <progress> tag in conjunction with JavaScript to dynamically display a task’s progress.

JavaScript와 함께 <progress> 태그를 사용해서 작업 진행을 동적으로 표시한다.


  • Define a progress bar that shows 63 percent of progress:
    • 진행률의 63퍼센트를 보여주는 진행 표시 줄을 정의해라.