HTML <progress> tag 정리, 한글 설명

---

HTML <progress> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

progress 태그란?

어떤 작업의 완료 정도 - 진행률 -을 나타낸다. 진행 표시줄의 형태를 띈다.

이 progress 태그를 이용해 동적인 프로그래스바를 JavaScript 로 구현할 수 있다.

 

 

progress 태그의 속성

max="number" : 가질 수 있는 최대값. (task requires in total) 반드시 0보다 크고 부동소수점 숫자여야 한다.

지정하지 않으면 기본값은 1

value="number" : 현재 상태의 작업을 완료한 값. (task has been completed) 부동소수점 숫자여야 한다.

max를 지정한 경우, 0 이상 ~ max 이하, max를 지정하지 않았다면, 0 이상 ~ 1 이하 이어야 한다.

value 값이 없으면 현재 작업의 종료 시점을 예측할 수 없음을 나타낸다. (the indeterminate progress bar)

 

 

주의사항

• 시각적으로 정도(범위)를 나타내는 meter 태그와 혼동하지 말자.
• meter 태그와 다르게, 최소값은 항상 0이고, min 속성은 없다.

 

 

progress 태그의 사용 예제

<h3>다운로드 중..</h3>
<p>
    <label for="pro">진행 상태 :</label>
    <progress id="pro" max=100 value="25">25%</progress>
</p>

 

진행 상태 :25%

 

 

기타사항

• 항상 label 태그로 접근성 향상을 위해 힘쓰자.
• pregress 태그는 HTML5 에서 추가되었다.
• 가능한 ARIA role : 없음

 

 

출처

W3schools, W3docs, MDN, TCPschool