progress
-
<progress>는 진행 정도 나타내는 바를 만드는 태그입니다. - 주요 속성은 max, value입니다.
- max 를 전체로 보았을 때 value 에 해당하는 정도를 나타냅니다.
- 웹브라우저마다 표현 방식이 다릅니다.
예제
예제 1
- 첫 번째 바는 전체를 100으로 보았을 때 20을 나타냅니다.
- 두 번째 바는 전체를 200으로 보았을 때 20을 나타냅니다.
<div>
<progress value="20" max="100"></progress>
</div>
<div>
<progress value="20" max="200"></progress>
</div>
예제 2
- CSS 로 크기를 바꾸고, JS 로 동적인 효과를 준 예제입니다.
- 버튼을 클릭하면 value 를 20에서 80으로 바꿉니다.
<div>
<progress value="20" max="100" id="lb"></progress>
</div>
<button onclick="lbFunc()">Click</button>
function lbFunc() {
document.getElementById( 'lb' ).value = '80';
}
<meter> 태그는 <progress> 태그와 결과
화면이 거의 같이 때문에 혼동하곤 합니다. <meter> 태그는
작업이 진행된다는 의미보다 지정된 범위 내에서 해당 값이 어느정도 차지하고
있는지를 표현합니다.
- 주요 속성은 low 나 high 로 현재값(value)이 높은지 낮은지 색상으로 표시하여 비교할 수 있습니다.
<label>점유율 0.8 </label>
<meter value="50"></meter>
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다. -->
<label>사용량 64% </label>
<meter min="0" max="100" value="64"></meter>
<!-- 전체 100 중에서 64만큼 차지합니다. -->
<label>트래픽 초과 </label>
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
<!-- 전체크기는 1024~10240인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다. -->
<label>적절한 트래픽 </label>
<meter value="0.5" optimum="0.8"></meter>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다. -->