[formatting] HTML - <progress> 태그 - 진행상태바 (=진행바 = 진행막대 = 작업막대 = progress태그 = 프라그레스태그 = 프로그레스태그, IE10)

1. <progress> 예제 - 진행상태바 (예: 30%)
2. <progress> 정의
3. <progress> 구문
4. <progress> 속성
5. <progress> 예제 - CSS 디자인 입히기

<progress> 예제 - 진행상태바 (예: 30%) 

<progress> 정의

 

작업 진행 상태를 막대로 표시.

 

---

 

1.

시작 태그와 종료 태그로 구성

2.

IE 10 이상 최신 브라우저만 지원. 

3.

주의: 전체 용적 중 현재 용적을 표시하는 건 <meter> 태그 이용.

(예: 하드 100 GB 중 현재 60 GB 사용)

4. MDN <progress> 예제 보기

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

<progress> 구문

 

<progress value="현재값" max="최대값"></progress>

<progress> 속성

 

max
전체 일 중 행해져야 하는 최대값 (예) 100

value
현재 달성된 값 (예) 70

 

<progress> 예제 - CSS 디자인 입히기

 

<style>

#hz progress { width:400px; height:12px; appearance:none; position:relative; top:-2px;}

#hz progress::-webkit-progress-bar { background-color:#eeeeee; border-radius:6px; border:1px solid #cccccc; }

#hz progress::-webkit-progress-value { border-radius:6px; }

#hz div:nth-child(1) progress::-webkit-progress-value { background-color:red; }

#hz div:nth-child(2) progress::-webkit-progress-value { background-color:blue; }

#hz div:nth-child(3) progress::-webkit-progress-value { background-color:green; }

#hz div:nth-child(4) progress::-webkit-progress-value { background-color:orange; }

</style>

<div id="hz">

    <div>홈: <progress value="4" min="0" max="10"></progress> 40%</div>

    <div>짱: <progress value="3" min="0" max="10"></progress> 30%</div>

    <div>닷: <progress value="2" min="0" max="10"></progress> 20%</div>

    <div>컴: <progress value="1" min="0" max="10"></progress> 10%</div>

</div>

 

결과보기