..

Search

<meter>

HTML <meter> 태그


정의 및 특징

<meter> 태그는 분수 값이나 게이지(gauge) 내에서 특정 스칼라 값(scalar measurement)이 어느 정도인지를 표현할 때 사용합니다.

 

예를 들어, 디스크의 사용량, 특정 후보를 선택한 투표 인구의 비율 등을 시각적으로 보여주고 싶을 때 <meter> 요소를 사용할 수 있습니다.

하지만 <meter> 요소를 진행 정도를 나타내는데 사용해서는 안 되며, 진행 상황을 나타낼 때는 <progress> 요소를 사용해야 합니다.


예제

<p>디스크 사용량 : <meter min="0" max="1000" value="350">350GB</meter></p>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<meter> 6.0 지원함 지원하지 않음 16.0 6.0 11.0

HTML5에서 변경된 사항

<meter> 태그는 HTML5에서 새롭게 추가된 요소입니다.


사용할 수 있는 속성

속성명   속성값 설명

form

 

form id

<meter> 요소가 포함될 하나 이상의 <form> 요소를 명시함.

high

  숫자

높은 값(high value)으로 간주되는 범위를 명시함.

low

  숫자

낮은 값(low value)으로 간주되는 범위를 명시함.

max

  숫자

게이지(gauge)의 최댓값을 명시함.

min

  숫자

게이지(gauge)의 최솟값을 명시함.

optimum

  숫자

게이지(gauge)의 최적값(optimal value)을 명시함.

value

 

숫자

필수 속성으로, 게이지의 현재 또는 측정된 값을 명시함.


DOM 인터페이스

interface HTMLMeterElement : HTMLElement {

  attribute double value;

  attribute double min;

  attribute double max;

  attribute double low;

  attribute double high;

  attribute double optimum;

  [SameObject] readonly attribute NodeList labels;

};


연관 페이지

HTML 의미 요소 수업 ⇒


연습문제