HTML high 속성이란?
HTML의 high 속성은 <meter> 요소(게이지)에서 '높은 값(high)' 구간의 기준점을 지정하는 데 사용됩니다. 이 속성은 단독으로 쓰기보다 max, min, low 속성과 함께 조합할 때 훨씬 더 정확하고 의미 있는 시각화 결과를 얻을 수 있습니다.
<meter> 요소는 어떤 값이 전체 허용 범위 안에서 어느 위치에 있는지 보여주는 게이지 역할을 합니다. 브라우저는 high 속성값을 기준으로 해당 구간을 다른 색상으로 표시해 주기 때문에, 사용자가 값의 상태를 한눈에 직관적으로 파악할 수 있습니다.
예를 들어 건강 지표나 디스크 사용량처럼 '특정 수치 이상이면 위험 구간'임을 나타내야 할 때 high 속성이 유용하게 활용됩니다.
예제 코드
아래 예제는 meter 요소의 high 속성을 설정하고, 버튼 클릭 시 자바스크립트로 high 값을 동적으로 변경하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<title>Meter high</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-high</legend>
<label for="paulaLifeSource">Paula's Health Risk: </label>
<meter id="paulaLifeSource" max="100" min="0" high="80" low="70" value="85"></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;
function lifeSource(effect){
var paulaLifeSource = document.getElementById("paulaLifeSource");
var Immunity = paulaLifeSource.high;
paulaLifeSource.high = 90;
divDisplay.textContent = 'Immunity increased to '+paulaLifeSource.high+' from '+Immunity;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면을 확인할 수 있습니다.
1) 'Medi Kit' 버튼을 클릭하기 전 — high 값이 80으로 설정된 초기 상태입니다.
2) 'Medi Kit' 버튼을 클릭한 후 — 자바스크립트에 의해 high 값이 80에서 90으로 변경되고, 변경 전후 값이 화면에 표시됩니다.
핵심 포인트 정리
- high: 게이지에서 '높은 값' 구간의 시작 기준을 지정합니다.
- low: '낮은 값' 구간의 끝 기준을 지정합니다.
- min / max: 게이지가 표현할 수 있는 최솟값과 최댓값을 정의합니다.
- 자바스크립트에서는
element.high형태로 high 속성값을 읽거나 수정할 수 있어, 상황에 따라 게이지 기준을 동적으로 바꿀 수 있습니다.