2011.09.26 12:30

 

<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 속성은 원래 기대했던 기대치를 표현 할 때 사용할 수 있습니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.


HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. 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
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고


티스토리 툴바