<meter> 태그의 정의 및 사용법

<meter> 태그는
알려진 범위 내의 정량적인 측정값 또는 분수 값을 나타냅니다.

예를 들어, 디스크 사용량이나 시험 점수, 용량 등 최솟값과 최댓값이 설정된 범위 내의 상태를 가로막대형의 측정기(gauge)처럼 브라우저에 시각적으로 표시합니다.

기본 예제

HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage" min="0" max="100" value="40" low="20" high="80">40%</meter>
실제 적용된 모습

알아두세요!
<meter> 태그 내의 텍스트는 접근 가능한 레이블이 아니며, 이 태그를 지원하지 않는 오래된 브라우저에 대한 대안으로만 사용합니다.

<meter> 태그에 단위를 지정하는 명확한 방법은 없지만, 자유형 텍스트로 title 속성으로 단위를 지정할 수 있습니다.

HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage" min="0" max="100" value="40" low="20" high="80" title="퍼센트">40%</meter>

사용법 참고사항

<meter> 태그를 진행 상황(progress bar)을 나타내는 용도로 사용해서는 안 됩니다.
이러한 용도로는 HTML의 <progress> 태그를 사용하는 것이 적절합니다.

또한, <meter> 태그는 알려진 범위 내의 정량적인 측정값 또는 분수 값에만 사용해야 하며,
임의 범위의 값을 나타내지 않습니다. 예를 들어 알려진 최댓값이 없는 체중이나 키를 보고하는 데 사용하는 것은 잘못된 사용입니다.

관련 속성 사용하기

<meter> 태그는 모든 글로벌 속성을 사용할 수 있으며,
이 태그에 특화된 관련 속성들도 있습니다.

meta 태그의 관련 속성
속성설명
value 측정한 실제값입니다.
min 측정 범위의 하한 숫자 경계에 해당하는 최솟값입니다.
max 측정 범위의 상한 숫자 경계에 해당하는 최댓값입니다.
low 측정 범위의 하한 경계를 구분짓는 하한값입니다.
실제값(value 속성)이 이 값 이하일 경우 상태를 하한 경계 내에 있다는 의미의 ‘낮음’으로 표시하도록 설정합니다.
high 측정 범위의 상한 경계를 구분짓는 상한값입니다.
실제값(value 속성)이 이 값 이상일 경우 상태를 상한 경계 내에 있다는 의미의 ‘높음’으로 표시하도록 설정합니다.
optimum 이 속성은 게이지의 최적의 지점을 나타내는 숫자 값입니다. 범위(min 속성과 max 속성에서 정의) 내에 있어야 합니다.
low 속성과 high 속성과 함께 사용하면 범위 내에서 어느 부분이 더 바람직한지 알려줍니다. 예를 들어 실제값이 min 속성과 low 속성 사이에 있는 경우 더 낮은 범위가 더 바람직한 것으로 간주됩니다. 브라우저는 값이 최적 값보다 작거나 같은지에 따라 가로막대형의 게이지 색상을 다르게 지정할 수 있습니다.

value 속성

측정한 실제값입니다.

  • 지정된 경우 최솟값과 최댓값(min 속성 및 max 속성) 사이에 있어야 합니다.
  • 지정되지 않았거나 형식이 잘못된 경우 값은 0입니다.
  • 지정되었지만 min 속성 및 max 속성에서 지정한 범위 내에 없는 경우 값은 범위의 가장 가까운 끝과 같습니다.
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage" value="0.5">50%</meter>
<!-- min 속성을 지정하지 않으면 min="0"입니다. -->
<!-- max 속성을 지정하지 않으면 max="1"입니다. -->
실제 적용된 모습

min 속성

측정 범위의 하한 숫자 경계에 해당하는 최솟값입니다.

  • 지정된 경우 최댓값(max 속성)보다 작아야 합니다.
  • 지정되지 않은 경우 최솟값은 0입니다.
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0.5"
    value="0.6">60%</meter>
<!-- max 속성을 지정하지 않으면 max="1"입니다. -->
실제 적용된 모습

max 속성

측정 범위의 상한 숫자 경계에 해당하는 최댓값입니다.

  • 지정된 경우 최솟값(min 속성)보다 커야 합니다.
  • 지정되지 않은 경우 최댓값은 1입니다.
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    value="0.5">50%</meter>
실제 적용된 모습

low 속성

측정 범위의 하한 경계를 구분짓는 하한값입니다.
실제값(value 속성)이 이 값 이하일 경우 상태를 하한 경계 내에 있다는 의미의 '낮음'으로 표시하도록 설정합니다.

  • 지정된 경우 최솟값(min 속성)보다 커야 합니다.
  • 지정된 경우 상한값과 최댓값(각각 high 속성과 max 속성)보다 작아야 합니다.
  • 지정되지 않거나 최솟값보다 작은 경우 하한값은 최솟값과 같습니다.
value가 low 이하일 경우
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    value="0.25">25%</meter>

실제값(value 속성)이 이 값 이하일 경우 상태를 하한 경계 내에 있다는 의미의 '낮음'을 나타내는 가로막대형의 게이지 색상이 표시됩니다. (브라우저마다 이 색상은 차이가 있을 수 있습니다.)

실제 적용된 모습
value가 low보다 클 경우
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    value="0.5">50%</meter>
실제 적용된 모습

high 속성

측정 범위의 상한 경계를 구분짓는 상한값입니다
실제값(value 속성)이 이 값 이상일 경우 상태를 상한 경계 내에 있다는 의미의 '높음'으로 표시하도록 설정합니다.

  • 지정된 경우 최댓값(max 속성)보다 작아야 합니다.
  • 지정된 경우 하한값과 최솟값(각각 low 속성과 min)보다 커야 합니다.
  • 지정되지 않거나 최댓값보다 큰 경우 상한값은 최댓값과 같습니다.
value가 high 이상일 경우
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.6"
    high="0.7"
    value="0.8">80%</meter>

실제값(value 속성)이 이 값 이상일 경우 상태를 하한 경계 내에 있다는 의미의 '높음'을 나타내는 가로막대형의 게이지 색상이 표시됩니다. (브라우저마다 이 색상은 차이가 있을 수 있습니다.)

실제 적용된 모습
value가 high보다 작을 경우
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    high="0.7"
    value="0.65">65%</meter>
실제 적용된 모습

optimum 속성

이 속성은 게이지의 최적의 지점을 나타내는 숫자 값입니다. 범위(min 속성과 max 속성에서 정의) 내에 있어야 합니다.
low 속성과 high 속성과 함께 사용하면 범위 내에서 어느 부분이 더 바람직한지 알려줍니다.

예를 들어 실제값이 min 속성과 low 속성 사이에 있는 경우 상대적으로 더 낮은 범위가 더 바람직한 것으로 간주됩니다. 브라우저는 값이 최적 값보다 작거나 같은지에 따라 게이지 색상을 다르게 지정할 수 있습니다. 다음의 세 가지 예로 살펴보겠습니다.

부연설명
<meter> 태그의 게이지 색상은 브라우저에 따라 기본적으로 지정되며, 브라우저가 각 속성에 따라 상태를 다르게 표시하도록 디자인되어 있습니다. 예를 들어, 일부 브라우저는 최적 상태(optimum)에서는 초록색, 낮은 상태(low)에서는 빨간색, 높은 상태(high)에서는 노란색 등의 색상 변화를 제공합니다. 그러나 이런 색상은 브라우저마다 다르며, 표준화된 색상 규칙이 있는 것은 아닙니다.

예: 최적 상태
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    optimum="0.2"
    high="0.7"
    value="0.2">20%</meter>
실제 적용된 모습
예: 낮은 상태
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    optimum="0.2"
    high="0.7"
    value="0.4">40%</meter>
실제 적용된 모습
예: 높은 상태
HTML 
<label for="disk-usage">디스크 사용량</label>
<meter id="disk-usage"
    min="0"
    max="1"
    low="0.3"
    optimum="0.2"
    high="0.7"
    value="0.8">80%</meter>
실제 적용된 모습

기술적인 문법 요약

meta 태그의 기술적인 구문 요약
허용되는 콘텐츠 구문과 관련된 콘텐츠
단, <meter> 태그는 허용하지 않습니다.
암시적인 role 속성 값 meter
허용된 role 속성 값 없음

접근성 고려사항

<meter> 태그를 사용할 때에는 스크린 리더 등 보조기기와의 호환성을 높이려면, <label>을 함께 사용하는 것이 좋습니다.

브라우저 호환성

meter 태그의 브라우저 호환성
태그
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
<meter> 6 12 16 6

명세서

meter 태그의 명세서 사양
명세서 사양
<meter> HTML Standard
#the-meter-element

참고문헌

같이 보기