<meter>

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2017년 3월.

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

시도해 보기

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

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

value: 현재의 값. 최소와 최댓값(min과 max 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 0으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.

참고 : value가 0 이상 1 이하가 아닌 이상, min과 max를 정의해 value 값이 그 안에 들어가도록 해야 합니다.
min: 측정 범위의 가능한 최솟값. 지정할 경우 최댓값(max 특성) 미만이어야 합니다. 지정하지 않은 경우 0입니다.
max: 측정 범위의 가능한 최댓값. 지정할 경우 최솟값(min 특성)을 초과해야 합니다. 지정하지 않은 경우