<METER>는 이름 그대로 특정한 수치를 나타낼 때 사용하는 태그 입니다. 점수, 백분률, 무게 등 다양한 형태의 수치를 모두 표현할 수 있으며 해당 되는 수치가 어떤 범위에서 어떠한 기대치를 원래 가지고 있었는지를 표현할 수 있습니다.
이렇게 이야기 하면 다소 어려운 느낌이 들 수도 있습니다만 실제로 사용하는 방법은 아주 간단합니다.
아래와 같이 표현하면 최소값이 0이고 최대값이 100 사이에서 95를 가진 값을 표현 할 수 있습니다.
Science : <meter min="0" max="100" value="95">95 of 100</meter>
제가 글을 쓰고 있는 현재 <METER> 태그는 Chrome과 Opera만 지원되고 있습니다.
| Browsers | Render meter element as gauge |
|---|---|
| IE 9 Beta | |
| Firefox 4 | |
| Safari 5 | |
| Chrome 8 | ✓ |
| Opera 11 | ✓ |
<METER> 태그와 함께 사용할 수 있는 속성은 아래와 같습니다.
| Attributes | Descriptions |
|---|---|
| value | You need to specify a value in number in order to use "meter" element. This is an mandatory attribute, No excuse! The number can be integer or floating point number. |
| min | Minimum value of meter element. If unspecified, it will be Zero (0). |
| max | Maximum value of meter element. If unspecified, it will be One (1). |
| low | This is optional unless you wish to indicate the low value of the range. |
| high | This is optional unless you wish to define high value of the range. |
| optimum | This is completely optional. This attribute is for specifying an optimum point of a range. |
위의 속성중에서 optimum 속성은 원래 기대했던 기대치를 표현 할 때 사용할 수 있습니다.
 |
현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다. |
HTML5 강좌 전체 목록
- HTML5 DocType의 정의
- HTML5 Header stuff
- Audio
- Video
- Canvas
Canvas: Rectangle
Canvas: Shadow
Canvas: Path
Canvas: Image
Canvas: Text - Web form 2.0
Input Attr: Placeholder
Input Attr: Autofocus
Input Attr: Required field
Input Attr: DataList
Input Type: Search
Input Type: Email, URL, Phone
Input Type: Range
Input Type: Number
Input Type: Date
Input Type: Color - Towards Semantic Web
Semantic <mark>
Semantic <time>
Semantic <meter>
Semantic <progress>
Semantic <section>
Semantic <header>
Semantic <footer>
Semantic <nav>
Semantic <article>
Semantic <aside>
