끄적이는 공간

퍼블리셔 Note/HTML

[HTML] 특정 요소의 범위를 표현할 때 쓰는 'meter'

Joroki 2022. 3. 28. 17:27

'<meter>' 는 게이지 내에서 특정 값이 어느정도인지 표현 할 때 사용한다.

ex) 컴퓨터 디스크 사용량, 전체인구중 코로나 바이러스 확진자 비율 등

 

'<meter>'는 위와 같이 최대 값 안에서 비율이 어느정도인지 표현할때 사용해야하며,

어떠한 진행률을 나타낼때는 '<meter>'가 아닌 반드시 '<progress>' 를 사용해야한다.

 

 

[ 진행률을 나타내는 '<progress>' ]

 

[HTML5]작업의 진행률 표시줄을 나타내는 태그 <progress>

' ' 태그는 작업의 진행률 표시줄을 제공해주는 태그다. 태그,태그,가상요소, css의 포지셔닝등 복잡한 구조를 쓰지 않고 ' ' 태그 한줄이면 ui/ux적으로도 꽤나 훌륭한 표시줄을 만들어준다. 는 작

joroki.tistory.com

 

[사용속성]

속성명 속성값 설명
form form id <meter> 요소가 포함될 하나 이상의 <form>요소를 명시
high number 높은 값(high value)으로 간주되는 범위를 명시
low number 낮은 값(low value)으로 간주되는 범위를 명시
max number 게이지의 최대값을 명시
min number 게이지의 최소값을 명시
optimum number 게이지의 최적값을 명시
value number 반드시 기입해야하는 속성으로 게이지의 측정된 값을 명시

 

<p>디스크 사용량 : <meter min="0" max="1000" value="350">350GB</meter></p>
위 마크업으로 생성된 '<meter>'

 

반응형