<meter>

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 특성)을 초과해야 합니다. 지정하지 않은 경우 1입니다.

• low

  • : 측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(min 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 high와 max 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.

• high

  • : 측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(max 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 low와 min 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.

• optimum

  • : 이상적인 값. min과 max 특성으로 정의한 범위 내에 위치해야 합니다. low와 high 특성을 함께 사용한 경우, optimum은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 min과 low 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.

• 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에서는 다음 그림처럼 보입니다.

높은 범위와 낮은 범위

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

HTML

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

결과

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

같이 보기

• <progress>