HTML optimum 속성이란?
HTML의 optimum 속성은 게이지(gauge) 값이 '최적값'으로 간주되는 범위를 정의하는 속성입니다. 쉽게 말해, 측정된 값이 어느 구간에 있을 때 가장 이상적인 상태로 판단할지를 브라우저에 알려주는 역할을 합니다.
이 속성은 오직 <meter> 요소에만 적용할 수 있으며, 다른 HTML 요소에서는 사용할 수 없습니다.
문법(Syntax)
optimum 속성의 기본 문법은 다음과 같습니다.
<meter optimum="number"></meter>
속성값에는 숫자가 들어가며, 일반적으로 min, max, low, high 속성과 함께 사용되어 게이지의 상태를 더욱 정교하게 표현합니다.
예제 코드
아래 예제를 통해 optimum 속성이 실제로 어떻게 동작하는지 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
</style>
<body>
<h1>HTML optimum Attribute Demo</h1>
<p>Download:</p>
<meter min="0" max="100" low="10" high="90" value="50" optimum="30"></meter>
</body>
</html>코드 설명
- min="0", max="100": 게이지가 표현할 수 있는 전체 범위를 지정합니다.
- low="10", high="90": 낮음·높음 구간의 경계값을 설정합니다.
- value="50": 현재 측정된 값입니다.
- optimum="30": 최적값으로 간주되는 지점을 30으로 지정합니다.
실행 결과
위 코드를 브라우저에서 실행하면 현재 값(50)과 최적값(30)의 위치 관계에 따라 게이지 색상이 시각적으로 구분되어 표시됩니다. 이를 통해 사용자는 값이 이상적인 범위에 있는지 한눈에 파악할 수 있습니다.
정리
HTML optimum 속성은 <meter> 요소와 함께 사용하여 게이지의 최적값 기준을 정의하는 강력한 도구입니다. 디스크 사용량, 배터리 잔량, 설치 진행률 등 수치를 시각화해야 하는 UI에서 유용하게 활용할 수 있습니다.