HTML meter 태그

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

1 개요[ | ]

HTML <meter> Tag
HTML meter 태그

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

2 예시 1[ | ]

html

Copy

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

3 예시 2: low, high[ | ]

html

Copy

<br><meter low="0.25" high="0.75" value="-0.1"></meter> -10%
<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%
<br><meter low="0.25" high="0.75" value="1.1"></meter> 110%

4 예시 3: low, high, optimum[ | ]

html

Copy

<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 같이 보기[ | ]

6 참고[ | ]

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