HTML meter 태그

✔️ Chrome 39.0에서 테스트하였습니다.

1 개요

HTML <meter> Tag

HTML meter 태그

• min 기본값은 0, max 기본값은 1

2 예시 1

• 예제: http://zetawiki.com/ex/html5/meter.php

<meter value="0.75">75%</meter><br>
<meter min="1" max="6" value="3">3 / 6</meter>

3 예시 2: low, high

• 예제: http://zetawiki.com/ex/html5/meter2.php

<br><meter low="0.25" high="0.75" value="0.0"></meter> 0%
<br><meter low="0.25" high="0.75" value="0.1"></meter> 10%
<br><meter low="0.25" high="0.75" value="0.2"></meter> 20%
<br><meter low="0.25" high="0.75" value="0.3"></meter> 30%
<br><meter low="0.25" high="0.75" value="0.4"></meter> 40%
<br><meter low="0.25" high="0.75" value="0.5"></meter> 50%
<br><meter low="0.25" high="0.75" value="0.6"></meter> 60%
<br><meter low="0.25" high="0.75" value="0.7"></meter> 70%
<br><meter low="0.25" high="0.75" value="0.8"></meter> 80%
<br><meter low="0.25" high="0.75" value="0.9"></meter> 90%
<br><meter low="0.25" high="0.75" value="1.0"></meter> 100%

4 예시 3: low, high, optimum

• 예제: http://zetawiki.com/ex/html5/meter3.php

<br><meter optimum="0" low="0.65" high="0.85" value="0.0"></meter> 0%
<br><meter optimum="0" low="0.65" high="0.85" value="0.1"></meter> 10%
<br><meter optimum="0" low="0.65" high="0.85" value="0.2"></meter> 20%
<br><meter optimum="0" low="0.65" high="0.85" value="0.3"></meter> 30%
<br><meter optimum="0" low="0.65" high="0.85" value="0.4"></meter> 40%
<br><meter optimum="0" low="0.65" high="0.85" value="0.5"></meter> 50%
<br><meter optimum="0" low="0.65" high="0.85" value="0.6"></meter> 60%
<br><meter optimum="0" low="0.65" high="0.85" value="0.7"></meter> 70%
<br><meter optimum="0" low="0.65" high="0.85" value="0.8"></meter> 80%
<br><meter optimum="0" low="0.65" high="0.85" value="0.9"></meter> 90%
<br><meter optimum="0" low="0.65" high="0.85" value="1.0"></meter> 100%

5 같이 보기

• HTML progress 태그
• jQuery UI 프로그레스바
• HTML5 새 태그
• 프로그레스바

6 참고 자료

• http://www.w3schools.com/tags/tag_meter.asp