meter element - by. UXKM

[value] 필수 <meter value="number">

현재 측정된 값을 나타내며, 숫자로 지정됩니다. 반드시 min과 max 범위 내의 값이어야 합니다.

[min] 선택 사항 <meter min="number">

최소값을 설정하며, 기본값은 0입니다.
value 속성이 min 값보다 작으면 자동으로 min 값이 value 값으로 사용됩니다.
즉, value는 항상 min 이상이 되며, min 값을 조정하여 진행 상태의 기준점을 변경할 수 있습니다.

[max] 선택 사항 <meter max="number">

최대값을 설정하며, 기본값은 1입니다.
value 속성이 max 값보다 크면 자동으로 max 값이 value 값으로 사용됩니다.
즉, value는 항상 max 이하가 되며, max 값을 조정하여 진행 상태의 기준점을 변경할 수 있습니다.

[low] 선택 사항 <meter low="number">

low값은 최소(min)~최대(max) 범위 내에서 상대적인 기준점을 결정하는 역할을 하기 때문에 min과 max 속성이 반드시 필요합니다.

낮은 값의 임계점을 지정하며, value 값이 low 값보다 작거나 같으면 시각적으로 '낮음(노란색)' 상태로 표시됩니다.
low 값은 min 이상, max 이하로 설정해야 하며, high 값을 함께 지정하면 low ~ high 범위를 '보통(초록색)'으로 구분할 수 있습니다.
하지만 high 값을 생략하면 low 초과부터 max까지가 '보통(초록색)'으로 간주됩니다.

[high] 선택 사항 <meter high="number">

high값은 최소(min)~최대(max) 범위 내에서 상대적인 기준점을 결정하는 역할을 하기 때문에 min과 max 속성이 반드시 필요합니다.

높은 값의 임계점을 지정하며, value 값이 high 값보다 크거나 같으면 시각적으로 '높음(노란색)' 상태로 표시됩니다.
high 값은 min 이상, max 이하로 설정해야 하며, low 값을 함께 지정하면 low ~ high 범위를 '보통(초록색)'으로 구분할 수 있습니다.
하지만 low 값을 생략하면 min부터 high 미만까지가 '보통(초록색)'으로 간주됩니다.

[optimum] 선택 사항 <meter optimum="number">

최적의 값을 설정하며, 이 값에 가까울수록 긍정적인 상태로 간주됩니다.
optimum 값은 사용자가 추구하는 이상적인 상태를 나타내며, 브라우저는 이 값을 기준으로 긍정적인 스타일을 적용할 수 있습니다.
만약 value 값이 optimum 값과 차이가 크면서 low 값보다 작거나 high 값보다 클 경우, 브라우저에 따라 빨간색으로 표시될 수 있습니다.
이 값은 min과 max 범위 내에 설정되어야 하며, optimum 값이 low와 high 값 사이에 위치하는 경우, 해당 범위의 중간값으로 해석될 수 있습니다.

[form] 선택 사항 <meter form="form 요소의 id">

<meter> 요소의 form 속성에 <form> 요소의 id와 같은 값을 지정하여, <meter> 요소가 <form> 요소 내부에 없더라도 <form>의 데이터로 제출되도록 설정할 수 있습니다.