meter

<meter>: 범위 내의 값 표시

• 사용 목적: 정량적인 값이 주어진 범위 내에서 어디에 해당하는지 표시.

• 의미: 특정 상태나 범위를 나타냅니다.

• 주요 속성:
• min: 최소값 (기본값: 0)
• max: 최대값 (기본값: 1)
• value: 현재 값
• low, high: 경고 또는 주의 영역의 경계값
• optimum: 이상적인 값

값의 범주에 따른 표기:

<label for="disk-usage">Disk usage:</label>
<meter id="disk-usage" 
	min="0" max="100" 
	low="60" high="90" 
	optimum="50" 
	value="85">
  85%
</meter>

• 디스크 사용량을 나타내며,
• 정상 : 사용량이 60% 이하,
• 경고 : 60~90%
• 위험 : 90% 이상

• 의미: 상태를 직관적으로 알리는 데 유리.

기본 색상

• 정상 상태 (optimum): 일반적으로 초록색.

• 주의 상태 (low ~ high): 일반적으로 노란색.

• 위험 상태 (값이 high 이상): 일반적으로 빨간색.

커스터마이징

// 기본 막대 스타일 조정
meter::-webkit-meter-bar {
  background: lightgray;
  border-radius: 5px;
}

// optimum 상태 스타일 지정
meter::-webkit-meter-optimum-value {
  background: green;
}

// low~high (주의상태) 스타일 지정
meter::-webkit-meter-suboptimum-value {
  background: orange;
}

// high 이상 (위험상태) 스타일 지정
meter::-webkit-meter-even-less-good-value {
  background: red;
}