진행률 퍼센트 게이지바 만드는 방법 - progress
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>data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="441"
data-pen-title="HTML 진행 정도 나타내는 바 tag progress 예제"
data-slug-hash="YzqgQMV"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 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';
}data-editable="true"
data-preview="true"
data-default-tab="result"
data-height="441"
data-pen-title="HTML 진행 정도 나타내는 바 tag progress 예제2"
data-slug-hash="wvGOebx"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 441px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
<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로 설정했습니다. -->data-editable="true"
data-preview="true"
data-height="441"
data-theme-id="light"
data-default-tab="result"
data-user="LiveBlogger"
data-slug-hash="WNoXrwR"
style="height: 441px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="HTML meter 예제"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.