HTML <meter> 요소의 max 속성은 게이지(계기)가 나타낼 수 있는 값의 상한선(최대값)을 지정하는 데 사용됩니다. <meter> 요소는 수질 오염도나 디스크 사용량처럼 정해진 범위 안에서 측정되는 데이터를 시각적으로 표현할 때 활용되며, 이때 min 속성과 함께 max 속성을 사용해 전체 측정 범위를 설정합니다.
문법(Syntax)
max 속성의 기본 문법은 다음과 같습니다.
<meter max="num">
여기서 num은 부동소수점(floating-point) 숫자로, <meter> 요소의 최대값을 결정합니다.
예제(Example)
이제 <meter> 요소의 max 속성을 실제로 구현하는 예제를 살펴보겠습니다.
<!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> 요소를 사용해 물의 상태(수위)를 나타내는 두 개의 게이지를 화면에 표시했습니다. 각 게이지의 최대값은 max 속성으로 지정했으며, 관련 코드는 아래와 같습니다.
TDS Level <meter min="0" low="20" high="80" max="100" value="60"></meter>
여기서 min="0"과 max="100"이 전체 측정 범위를 0~100으로 정의하고, low, high 속성이 낮음/높음 구간 기준점을, value 속성이 현재 측정값을 나타냅니다. 이처럼 max 속성을 활용하면 게이지의 스케일을 자유롭게 조절할 수 있어 다양한 데이터 시각화에 유용하게 사용됩니다.