'<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>'
반응형
'퍼블리셔 Note > HTML' 카테고리의 다른 글
| [HTML] 유튜브 썸네일 이미지 가져오기 (0) | 2022.05.26 |
|---|---|
| [meta] 모바일 크롬 기반 브라우저에서 url창 영역 색상 바꿔주는 <mete> (0) | 2022.04.11 |
| [HTML5]작업의 진행률 표시줄을 나타내는 태그 'progress' (0) | 2022.03.18 |
| [HTML5] 스크립트 없이 동적으로 클릭시 세부 사항을 보여주는 태그 'details' (0) | 2022.03.18 |
| [HTML] IOS기기에서 'video' 태그 전체 화면으로 전환되는 이슈개선 (0) | 2022.02.07 |