meter 태그 사용방법

안녕하세요.

이번 시간에는 HTML5의 meter 태그를 사용하는 방법에 대해서 알아보겠습니다.

meter 태그를 사용하면 어떤 수치가 백분율에서 얼마나 되는지 상대적으로 표현할 수 있습니다.

.

.

.

소스코드를 확인해 보겠습니다.

.

<h2>Value: 80</h2>
<meter min="0" max="100" low="33" high="66"
  optimum="80" value="80"
  title="Gas"
  style="width: 300px; height: 50px"
></meter>

<h2>Value: 50</h2>
<meter min="0" max="100" low="33" high="66"
  optimum="80" value="50" 
  title="Gas"
  style="width: 300px; height: 50px"
></meter>

<h2>Value: 20</h2>
<meter min="0" max="100" low="33" high="66"
  optimum="80" value="20"
  title="Gas"
  style="width: 300px; height: 50px"
></meter>

.

min과 max는 수치의 최소값과 최대값을 의미하며 상대적으로 작은 구간의 한계값을 나타내는 low, 그리고 상대적으로 높은 구간의 한계 값을 나타내는 high 속성(attribute)값이 있습니다.

.

optimum 값이 high 수치보다 크면, low 구간은 빨간색으로 표시되며, 중간 구간은 노란색으로, 그리고 high 구간은 녹색으로 표시됩니다.

반대로 optimum 값이 high 수치보다 작으면, low 구간은 녹색, 중간구간은 노란색, 그리고 high 구간이 빨간색으로 표시됩니다.

.

.

이렇게 HTML5의 meter 태그를 사용해서 상대적으로 값을 사용자가 보기쉽게 표현하는 방법을 알아봤습니다.

감사합니다. 🙂