HTML <progress> 태그 – 올바른 이해와 사용 방법

`<progress>` 태그의 정의 및 사용법

<progress> 태그는
작업 완료의 진행 상황을 나타내며, 브라우저에서 가로 막대 형태로 표시합니다.
가로 막대 형태로 표시되는 것을 흔히 'progress bar'라고 부릅니다.

예를 들어, 파일 업로드나 다운로드, 설치 등의 진행률을 보여줄 때 사용됩니다.

기본 예제

알아두세요!
<progress> 태그 내의 텍스트는 접근 가능한 레이블이 아니며, 이 태그를 지원하지 않는 오래된 브라우저에 대한 대안으로만 사용합니다.

<progress> 태그에 단위를 지정하는 명확한 방법은 없지만, 자유형 텍스트로 title 속성으로 단위를 지정할 수 있습니다.

사용법 참고사항

<progress> 태그를 알려진 범위 내의 정량적인 측정값 또는 분수 값을 나타내는 측정기(gauge)처럼 사용해서는 안 됩니다.
이러한 용도로는 HTML의 <meter> 태그를 사용하는 것이 적절합니다.

또한, <progress> 태그는 알려진 범위가 아닌 임의의 작업 범위 내에서 진행 상황을 나타내는 데 적합합니다. 예를 들어, 디스크 사용량이나 시험 점수 등을 보고하는 데 사용해서는 안 됩니다.

관련 속성 사용하기

<progress> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

progress 태그의 관련 속성
속성	설명
`max`	진행 상태가 완료되는 최댓값을 지정합니다.
`value`	현재값을 지정합니다.

`max` 속성

진행 상태가 완료되는 최댓값을 지정합니다.

지정하는 경우 0보다 큰 숫자나 부동 소수점 숫자이어야 합니다.
지정되지 않았거나 형식이 잘못된 경우 값은 1입니다.

`value` 속성

현재값을 지정합니다.

지정하는 경우 0보다 크고 max 값 이하의 숫자나 부동 소수점 숫자이어야 합니다.
지정되지 않았거나 형식이 잘못된 경우 확정적이지 않은 상태로, 현재 작업이 진행 중이지만 걸리는 시간을 알 수 없음을 나타냅니다. 불확정 프로그레스바(indeterminate progress bar)라고 합니다. 그렇지 않은 경우를 확정 프로그레스바(determinate progress bar)라고 합니다.

불확정 프로그레스바(indeterminate progress bar)

value 속성이 지정되지 않았거나, 형식이 잘못된 경우를 말합니다.
예제를 통해 살펴보겠습니다.

HTML

<label for="setup">설치 진행률</label>
<!-- value 속성을 지정하지 않은
     불확정 프로그레스바 -->
<progress id="setup" max="100"></progress>

불확정 프로그레스바(indeterminate progress bar)를 만들려면 value 속성을 제거하세요.

속성 사용 시 주의할 점

<progress> 태그에는 min 속성이 허용되지 않습니다.

기술적인 문법 요약

progress 태그의 기술적인 구문 요약
허용되는 콘텐츠	구문과 관련된 콘텐츠 단, `<progress>` 태그는 허용하지 않습니다.
암시적인 `role` 속성 값	`progressbar`
허용된 `role` 속성 값	없음

접근성 고려사항

<progress> 태그를 사용할 때에는 스크린 리더 등 보조기기와의 호환성을 높이려면, <label>을 함께 사용하는 것이 좋습니다.

브라우저 호환성

progress 태그의 브라우저 호환성
태그	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`<progress>`	6	12	6	6

명세서

progress 태그의 명세서 사양
명세서 사양
`<progress>`	HTML Standard #the-progress-element

참고문헌

MDN - <progress>: The Progress Indicator element

<progress> 태그의 정의 및 사용법