<meter>

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

시도해보기

콘텐츠 카테고리 플로우 콘텐츠, 구문 콘텐츠, 레이블 가능, 뚜렷한 콘텐츠.
가능한 콘텐츠 구문 콘텐츠. 단, 다른 <meter> 요소는 사용할 수 없습니다.
태그 생략 불가능, 시작과 끝에 태그를 추가하는것은 필수입니다.
가능한 부모 요소 구문 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 없음
DOM 인터페이스 HTMLMeterElement (en-US)

특성

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

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"> (en-US)의 값 범위를 보여주는 등 <meter>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.

예제

간단한 예제

HTML

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

결과

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

current look of 'meter' in Google Chrome

높은 범위와 낮은 범위

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

HTML

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

결과

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

red meter in Google Chrome

명세

Specification
HTML Standard
# the-meter-element

브라우저 호환성

BCD tables only load in the browser

같이 보기