HTML <meter> tag 정리, 한글 설명

HTML <meter> element

mdn, W3C 정리 & 한국어 설명

 

자료 수집 : 2022년 3월

 

meter 태그란?

특정 범위(gauge) 내에서의 스칼라 값(scalar measurement), 또는 백분율 값(fractional value)이 어느 정도인지를 시각적으로 나타낸다.

 

 

meter 태그를 어디에서 사용할까?

• 사용할 수 있는 디스크 용량 (disk usage)
• 배터리 충전 량(the level. of battery charge)
• 특정 후보를 선택한 투표 인구의 비율

 

 

meter 태그의 속성들

value="n" : 현재값. required.

잘못된 값이거나 지정하지 않으면 0으로 간주. 범위에서 벗어나는 경우, 범위에 맞춰 나머지 값을 버린다.

min="n" : 측정 범위(gauge)의 최솟값

지정하지 않으면 0

max="n" : 측정 범위(gauge)의 최대값.

지정하지 않으면 1

low="n" : 낮은 값으로 간주되는 범위를 명시.

지정할 경우, 전체 범위 min 초과 ~ max 미만이어야 한다.

지정하지 않을 경우, 전체 범위 최소값 미만일 때, 전체 범위 최소값과 같아진다.

high="n" : 높은 값으로 간주되는 범위를 명시.

지정할 경우, 전체 범위 max 미만이어야 하며, low와 high 속성을 초과해야 한다.

지정하지 않거나, 전체 범위 최대값 초과할 때, 전체 범위 최대값과 같아진다.

optimum="n" : 측정 범위(gauge)의 최적, 이상적인 값을 명시.

min , max 속성으로 정의한 범위 내에 위치해야 한다.

low, high 속성을 함께 사용한 경우, Optimum은 어느 범위가 이상적인지 나타낸다.

optimum의 값이 min과 low 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위이다.

optimum의 값에 따라 기본 색깔이 있다.
빨강 : min <= optimum < low
노랑 : low <= optimum <= high
초록 : high < optimum <= max

form="form_ID"

meter 태그와 같은 문서에 존재하는 form 요소를 연결한다.

단, meter 태그가 form 요소 내에 있으면 form 속성을 줄 필요가 없다.

input type="number"의 값 범위를 보여주는 것 등 meter를 form 관련 콘텐츠로 사용할 때만 지정하자.

 

 

주의사항

• meter 태그는 시각적인 요소이다. meter 태그로 프로그래스바와 같이 진행된 값을 나타내면 안 된다 (대신 progress 태그를)

 

 

태그의 사용 예제

<p>디스크 사용량 : <meter min="0" max="1000" value="350">350GB</meter></p>

디스크 사용량 :

350GB

<meter id="fuel" min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
       at 50/100
</meter>

at 50/100

높은 범위와 낮은 범위의 사용 예 (low, high)

<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>

He got a

B

on the exam.

 

 

기타사항

• meter 태그는 HTML5의 새로운 요소이다.
• 가능한 ARIA role : 없음
• 항상 label 태그를 주어 접근성 향상을 위해 힘쓰자.
• meter 태그의 기본 스타일 : background-color, box-shadow, width, height

 

 

출처

W3schools, W3docs, MDN, TCPschool