설명
The HTML progress (<progress>) element is used to view the completion progress of a task. While the specifics of how it's displayed is left up to the browser developer, it's typically displayed as a progress bar.
<progress 요소는 작업이 진척되는 정도를 보기 위해서 사용됩니다. 어떻게 표시될 것인지의 자세한 사항의 브라우저 개발자에게 달려있지만, 통상적으로 진행도 바(progress bar, 어떤 한국어 표현이 좋을지...)로 표시됩니다.
Usage Context
| Permitted content | Phrasing content |
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parent elements | Phrasing content, but there must be no progress element descendants. |
| Normative document | HTML5, section 4.10.16 |
속성
이 엘리먼트는 전역속성을 지원한다.
form
This attribute specifies the form which the progress element belongs to.
이 속성은 어느 폼에 progress 요소가 속하는 지를 명시합니다.
max
This attribute describes how much work the task indicated by the progress element requires.
이 속성은 이 progress 요소가 나타내는 전체 작업량을 가리킨다.
value
This attribute specifies how much of the task that has been completed. If there is no value attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take. You can use the orient property to specify whether the progress bar should be rendered horizontally (the default) or vertically. The :indeterminate pseudo-class can be used to match against indeterminate progress bars.
이 속성은 해당 작업의 얼마만큼이 완료되었는지 가리킨다. value 속성이 없다면, 쉽게 완료된 양을 가늠할 수 없다. 즉, 진행 중인 활동이 얼마나 더 걸릴지 표시되지 않는다. CSS orient 속성을 이용하여, 진행 바가 수평으로(디폴트) 렌더링 될 것인지 수직으로 될 것인지 명시할 수 있다. :indeterminate 가상클래스는 value 속성이 없는 프로그레스바를 매칭하기 위해서 사용 될 수 있다.
예제
<progress value="70" max="100">70 %</progress>
DOM Interface
This element implements the HTMLProgressElement interface.
이 요소는 HTMLProgressElement 인터페이스를 구현합니다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 | 6.0 | 6.0 (6.0) | 11.0 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 | 6.0 (6.0) | 11.0 |
