HTML DOM의 Meter max 속성은 <meter> 요소의 max 속성에 해당하는 숫자 값을 반환하거나 설정하는 기능입니다. 게이지의 최댓값을 동적으로 제어할 수 있어서, 값의 범위를 유연하게 변경해야 하는 상황에서 특히 유용합니다.
더 정확하고 의미 있는 게이지 표현을 위해서는 high, min, low 속성과 함께 사용하는 것이 좋습니다. 이 네 가지 속성을 조합하면 측정값이 어느 구간에 속하는지 시각적으로 명확하게 판단할 수 있습니다.
문법(Syntax)
Meter max 속성의 기본 문법은 다음과 같습니다.
1. max 속성 값 반환하기
meterElementObject.max
2. max 속성 값 설정하기
meterElementObject.max = number
값을 반환할 때는 해당 <meter> 요소에 지정된 최댓값이 숫자 형태로 돌아오며, 값을 설정할 때는 새로운 숫자를 할당하여 게이지의 상한선을 변경할 수 있습니다.
예제(Example)
아래 예제는 Meter max 속성을 활용해 게이지의 최댓값을 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Meter max</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Meter-max</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="60" value="70"></meter>
<input type="button" onclick="lifeSource()" value="Medi Kit">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
divDisplay.textContent = 'Life Source at '+paulaLifeSource.value+'/'+paulaLifeSource.max;
function lifeSource(){
var paulaLifeSource = document.getElementById("paulaLifeSource");
var Immunity = paulaLifeSource.max;
paulaLifeSource.max = 80;
divDisplay.textContent = 'Life Decreased to '+paulaLifeSource.max+' from '+Immunity;
}
</script>
</body>
</html>코드 설명
- 초기 상태에서 <meter> 요소는
max=100,min=0,high=80,low=60,value=70으로 설정되어 있습니다. - 페이지가 로드되면 현재 값인 70/100이 화면에 표시됩니다.
- 'Medi Kit' 버튼을 클릭하면
lifeSource()함수가 실행되어 max 값이 100에서 80으로 변경됩니다. - 변경 전후의 max 값을 비교하여 결과가 div 영역에 출력됩니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
'Medi Kit' 버튼 클릭 전
게이지의 max 값이 100인 초기 상태로, 현재 값 70이 전체 범위에서 차지하는 비율이 표시됩니다.
'Medi Kit' 버튼 클릭 후
버튼 클릭 후에는 max 값이 80으로 줄어들면서 게이지의 상한선이 변경된 것을 확인할 수 있습니다.
마무리
Meter max 속성을 활용하면 <meter> 요소의 최댓값을 자바스크립트로 자유롭게 제어할 수 있습니다. min, low, high 속성과 함께 사용하면 건강 상태, 디스크 사용량, 설문 점수 등 다양한 수치 데이터를 직관적인 게이지 형태로 표현할 수 있습니다.