<meter>

HTML <meter> 요소는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠. 단, 다른 <meter> 요소는 사용할 수 없습니다.
태그 생략 None, both the starting and ending tag are mandatory.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLMeterElement

특성

이 요소는 전역 특성을 포함합니다.

value
현재의 값. 최소와 최댓값(minmax 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 0으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.
참고: value0 이상 1 이하가 아닌 이상, minmax를 정의해 value 값이 그 안에 들어가도록 해야 합니다.
min
측정 범위의 가능한 최솟값. 지정할 경우 최댓값(max 특성) 미만이어야 합니다. 지정하지 않은 경우 0입니다.
max
측정 범위의 가능한 최댓값. 지정할 경우 최솟값(min 특성)을 초과해야 합니다. 지정하지 않은 경우 1입니다.
low
측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(min 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 highmax 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.
high
측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(max 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 lowmin 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.
optimum
이상적인 값. minmax 특성으로 정의한 범위 내에 위치해야 합니다. lowhigh 특성을 함께 사용한 경우, optimum은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 minlow 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.
form
<meter>와 연결할 <form> 요소("양식 소유자"). 같은 문서에 존재하는 <form> 요소의 id 특성 값을 사용해야 합니다. form 특성을 지정하지 않았으나 조상 중 <form> 요소가 존재하면 해당 <form>과 연결됩니다. <input type="number">의 값 범위를 보여주는 등 <meter>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.

예제

간단한 예제

HTML

<p>Heat the oven to <meter min="200" max="500"
  value="350">350 degrees</meter>.</p>

결과

Google Chrome에서는 다음 그림처럼 보입니다.

meter1.png

높은 범위와 낮은 범위

min 특성의 기본값이 0이므로 생략한 것을 참고하세요.

HTML

<p>He got a <meter low="69" high="80" max="100"
  value="84">B</meter> on the exam.</p>

결과

Google Chrome에서는 다음 그림처럼 보입니다.

meter2.png

명세

Specification Status Comment
HTML Living Standard
The definition of '<meter>' in that specification.
Living Standard
HTML5
The definition of '<meter>' in that specification.
Recommendation Initial definition

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
meterChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
formChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
highChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
lowChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
maxChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
minChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
optimumChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0
valueChrome Full support 6Edge Full support ≤18Firefox Full support 16IE No support NoOpera Full support 11Safari Full support 6WebView Android No support NoChrome Android Full support 18Firefox Android Full support 16Opera Android Full support 11Safari iOS Full support 10.3Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support

같이 보기