<progress>

시도해보기

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

콘텐츠 카테고리	플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠.
가능한 콘텐츠	구문 콘텐츠 . 단, 다른 `<progress>` 요소는 사용할 수 없습니다.
태그 생략	None, both the starting and ending tag are mandatory.
가능한 부모 요소	구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할	없음
DOM 인터페이스	`HTMLProgressElement` (en-US)

특성

이 요소는 전역 특성을 포함합니다.

max: <progress> 요소가 나타내는 작업에 필요한 작업량. 지정하는 경우, 반드시 0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.
value: <progress> 요소가 나타내는 작업을 완료한 양. 유효현 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 이하, 그렇지 않으면 0 이상 1 이하여야 합니다. value 특성이 없으면 미결정 상태로, 현재 작업의 종료 시점을 예측할 수 없음을 나타냅니다.

참고: <meter> 요소와 달리, 최솟값은 항상 0이며 min 특성을 지정할 수 없습니다.

참고: CSS :indeterminate (en-US) 의사 클래스를 사용하면 미결정 상태의 진행 표시줄을 선택할 수 있습니다. 값을 지정한 진행 표시줄을 미결정 상태로 바꾸려면 element.removeAttribute('value')를 사용해 value 특성을 제거해야 합니다.

예제

<progress value="70" max="100">70 %</progress>

결과

Windows 7에서는 다음과 같은 모습으로 나타납니다.

명세

Specification	Status	Comment
HTML Living Standard The definition of '<progress>' in that specification.	Living Standard
HTML5 The definition of '<progress>' in that specification.	Recommendation	Initial definition

브라우저 호환성

BCD tables only load in the browser

<progress>

시도해보기

특성

예제

결과

명세

브라우저 호환성

같이 보기