HTML <meter> 태그의 min 속성이란?
HTML의 <meter> 요소에서 min 속성은 측정 범위의 하한값(최솟값)을 지정하는 데 사용됩니다. <meter> 요소는 수질 오염도나 디스크 사용량처럼 일정한 범위 안에서 측정되는 데이터를 시각적으로 표현할 때 활용되며, 이때 측정 범위는 min 속성과 max 속성을 함께 사용해 정의합니다.
문법(Syntax)
당연한 이야기지만 min 값은 반드시 max 값보다 작아야 합니다. min 속성을 별도로 지정하지 않으면 기본값은 0으로 설정됩니다. 기본 문법은 다음과 같습니다.
<meter min="num">
여기서 num은 부동소수점(floating-point) 숫자로, <meter> 요소의 최솟값을 결정합니다.
예제(Example)
이제 실제 코드를 통해 <meter> 요소의 min 속성을 어떻게 적용하는지 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h2>Water Levels</h2>
<p>Impurity Level <meter min="0" low="50" high="95" max="100" value="85"></meter></p>
<p>TDS Level <meter min="0" low="20" high="80" max="100" value="60"></meter></p>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 다음과 같은 결과가 화면에 출력됩니다.
위 예제에서는 <meter> 요소를 사용해 물의 상태(불순물 농도, TDS 수치)를 게이지 형태로 표시했습니다. 각 미터의 최솟값은 다음과 같이 min 속성으로 지정했습니다.
<meter min="0" low="50" high="95" max="100" value="85"></meter>
이처럼 min 속성을 활용하면 측정 데이터가 시작되는 기준점을 명확하게 설정할 수 있으며, low·high·max·value 속성과 조합하면 더욱 직관적인 측정 게이지를 만들 수 있습니다.