[HTML] <progress>

<progress>

<progress> 태그는 작업의 진행 상태를 표시하는 바를 나타냅니다. 속성을 통해 최대 진행 표시와 현재 진행 표시를 나타낼 수 있습니다. 진행 바 표시는 브라우저마다 OS마다 틀릴 수 있습니다. 현재 진행률과 제목은 <label> 태그를 통해 표시합니다.

---

<progress>

<progress> 태그는 작업의 진행 상태를 정의합니다.

특징	설명
요소	인라인 요소(Inline Element)
닫는 태그	닫는 태그 사용(<progress> ~ </progress>)
버전	HTML5
시각적 표현	진행 상태 바 디자인

정의(Definition)

• <progress> 태그는 진행률을 표시 줄로 표시된 작업의 진행정도를 보여줍니다.
• <progress> 태그는 자바스크립트를 이용하여 작업률을 보여줍니다.

크로스브라우징(CrossBroswing)

• <progress> 태그는 브라우저 별로, OS에 따라 디자인이 다릅니다.

비교(Compare)

• 작업의 진행률을 표현 할 때는 <progress> 태그를 사용합니다.
• 범위를 측정하는 게이지 정보는 <meter> 태그를 사용합니다.

속성(Property)

속성	값(예)	설명	버전
max	max = "number"	작업률의 최대 값을 설정합니다.	-
value	value = "number"	현재 작업률의 값을 설정합니다.	-

Sample1

현재 진행 상태를 나타내는 예제입니다.

결과

현재 진행률 50%

html

<label for="progress">현재 진행률</label>
<progress id="progress" max="100" value="50">50%</progress>

호환성(Compatibility)

						6	7	8	9	10	11
<progress>	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능
max	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능
value	사용가능	사용가능	사용가능	사용가능	사용가능	사용안됨	사용안됨	사용안됨	사용안됨	사용가능	사용가능	사용가능	사용가능	사용가능

---