HTML에서 알려진 범위 내의 스칼라 측정값(게이지)을 정의하려면 <meter> 태그를 사용합니다. 이 태그는 디스크 사용량, 배터리 잔량, 투표 결과 비율 등 특정 범위 안에서 측정된 값을 시각적으로 표현할 때 유용합니다.
기본 사용법
<meter> 태그는 value, min, max 속성을 함께 사용하여 현재 값과 측정 범위를 지정합니다. 태그 사이에 넣은 텍스트는 브라우저가 <meter>를 지원하지 않을 경우 대신 표시되는 대체 텍스트 역할을 합니다.
주요 속성
- value: 현재 측정값으로, 반드시 min과 max 사이의 값이어야 합니다.
- min: 측정 가능한 최솟값입니다.
- max: 측정 가능한 최댓값입니다.
예제
다음 코드를 실행하면 0부터 10까지의 범위에서 값 6을 나타내는 게이지가 화면에 표시됩니다.
<!DOCTYPE html> <html> <head> <title>HTML meter 태그</title> </head> <body> <meter value = "6" min = "0" max = "10">10점 만점에 6점</meter> <br /> <p>여기서 게이지 값을 확인할 수 있습니다</p> </body> </html>
참고 사항
<meter> 태그와 비슷한 <progress> 태그도 있지만, 두 태그의 용도는 다릅니다. <progress>는 작업 완료 진행률을 나타낼 때 사용하고, <meter>는 고정된 범위 내의 측정값을 나타낼 때 사용합니다. 또한 <meter>에는 low, high, optimum 속성을 추가하여 값이 낮음·높음·최적 구간 중 어디에 해당하는지 브라우저가 색상으로 구분해 표시하도록 설정할 수 있습니다.