HTML <meter>: 계량 요소

ALATTA

HTML <meter>: 계량 요소

HTML <meter> 요소는 정해진 범위 내에서의 스칼라 값 또는 0 이상 1 이하의 소수 값을 나타냅니다.

<label for="fuel">연료:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  현재 50/100
</meter>

불러오는 중...

특성

전역 특성을 포함합니다.

value

현재 값입니다. 최소와 최대 값(min과 max 특성)을 지정한 경우 그 사이 값을 사용해야 합니다. 지정하지 않았거나 잘못된 숫자일 경우의 기본 값은 0입니다. 지정했으나 최소 또는 최대 범위 밖으로 나가는 경우 각각 최소와 최대 값을 지정한 것으로 취급합니다.

max

측정 범위의 최대 한계입니다. 지정할 경우 최소 값(min 특성)보다 커야 합니다. 기본 값은 1입니다.

min

측정 범위의 최소 한계입니다. 지정할 경우 최대 값(max 특성)보다 작아야 합니다. 기본 값은 0입니다.

high

value가 이 값 이상이면 높은 값으로 취급합니다. 지정할 경우 최대 값(max 특성)보다는 작고, 낮은 값 및 최소 값(low와 min 특성)보다는 커야 합니다. 지정하지 않거나 최대 값보다 큰 값을 지정할 경우 최대 값과 동일하게 지정한 것으로 취급합니다.

low

value가 이 값 이하면 낮은 값으로 취급합니다. 지정할 경우 최소 값(min 특성)보다는 크고, 높은 값 및 최대 값(high와 max 특성)보다는 작아야 합니다. 지정하지 않거나 최소 값보다 작은 값을 지정할 경우 최소 값과 동일하게 지정한 것으로 취급합니다.

optimum

계량한 값이 최적의 상태인 경우를 지정합니다. min과 max 범위 내에 포함돼야 합니다. low와 high 특성을 함께 사용한 경우 어떤 범위가 최적의 범위인지 나타낼 수 있습니다. 예를 들어 optimum 특성 값이 min과 low 값의 사이라면 낮은 값 범위를 최적의 범위로 취급합니다. value가 최적 범위 내인지 바깥인지에 따라 브라우저가 <meter>의 색을 다르게 표현할 수 있습니다.

form

이 <meter>를 양식 소유자(<form> 요소)와 연결합니다. 같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 <meter>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다.

form 특성은 <input type="number">의 값처럼, <meter>가 양식에 관련된 값을 보여줄 때만 사용합니다.

예제

간단한 예제

<p>
  에어프라이어 온도:
  <meter min="100" max="200" value="180">180도</meter>
</p>

불러오는 중...

낮은 범위, 높은 범위

<input type="range">의 값을 조절하면서 세 <meter>의 모습이 어떻게 달라지는지 확인하세요.

<p>
  <label for="control">온도 조절:</label>
  <input id="control" type="range" list="temperatures" min="100" max="240" value="180" />
</p>
<datalist id="temperatures">
  <option value="160"></option>
  <option value="200"></option>
</datalist>

<p>
  <label for="low-temp">낮은 온도:</label>
  <meter id="low-temp" min="100" max="240" low="160" high="200" optimum="140" value="180">180도</meter>
</p>
<p>
  <label for="mid-temp">중간 온도:</label>
  <meter id="mid-temp" min="100" max="240" low="160" high="200" optimum="180" value="180">180도</meter>
</p>
<p>
  <label for="high-temp">높은 온도:</label>
  <meter id="high-temp" min="100" max="240" low="160" high="200" optimum="220" value="180">180도</meter>
</p>

function updateMeter(meter, value) {
  meter.value = value
  meter.innerText = `${value}도`
}

const meters = document.querySelectorAll('meter')

document.querySelector('#control').addEventListener('change', (event) => {
  meters.forEach((meter) => {
    updateMeter(meter, event.target.value)
  })
})

불러오는 중...

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
meter
high
low
max
min
optimum
value

같이 보기