HTML에서 게이지(측정기)의 최적 값을 설정하려면 <meter> 요소의 optimum 속성을 사용합니다. 이 속성은 측정 범위 내에서 가장 이상적인 값이 어디인지 브라우저에 알려주는 역할을 합니다.
<meter> 태그는 디스크 사용량, 투표 결과, 설문 점수 등 특정 범위 안에서의 수치를 시각적으로 표현할 때 유용합니다. optimum 속성과 함께 value(현재 값), low(낮음 기준), high(높음 기준), min, max 속성을 조합하면 현재 값이 최적 값에 얼마나 가까운지에 따라 게이지 색상도 자동으로 달라집니다.
예제 코드
아래 코드를 실행하여 optimum 속성이 적용된 게이지를 직접 확인해 보세요.
<!DOCTYPE html> <html> <body> <h3>게이지 예제</h3> <p><meter value = "0.7" high = "0.9" low = "0.1" optimum = "0.5"></meter></p> </body> </html>
코드 설명
- value="0.7": 게이지의 현재 값입니다.
- low="0.1": '낮음'으로 간주되는 하한 기준값입니다.
- high="0.9": '높음'으로 간주되는 상한 기준값입니다.
- optimum="0.5": 해당 범위에서 가장 바람직한 최적 값입니다.
브라우저는 현재 값(value)이 최적 값(optimum) 근처에 있으면 초록색으로, 멀어지면 노란색 또는 빨간색으로 게이지를 표시하여 상태를 한눈에 파악할 수 있도록 도와줍니다.