HTML5에서 추가된 유용한 태그 <meter>

이 포스트는 HTML5에서 추가된 <meter> … </meter> 태그에 관한 내용입니다.

이 태그는 HTML5에서 추가된 유용한 태그 <progress> 포스트에 설명한 <progress> 태그와 마찬가지로 수치 막대를 표시하기 위한 태그입니다. 다만 다른 점이 있다면, <progress> 태그는 진행 상황을 막대로 표시하기 위한 태그이고, <meter> 태그는 진행 상황이 아닌 것 중 미터로 나타내기 적합한 수치(알려진 범위 내에서의 스칼라 측정 또는 분포비율 등)에 사용하는 태그라는 점입니다.

물론 <div> … </div> 태그에 스타일시트를 입히는 방법으로도 수치 막대를 그릴 수는 있습니다. 하지만 이 태그는 내용적으로도 수치 막대를 표시하는 역할을 하며, 자바스크립트와 연동하기 쉽다는 장점이 있습니다.

다음 코드를 봅시다.

<meter value="5" min="0" max="10"> 5 / 10 </meter>

이 코드는 다음과 같이 표시될 것입니다.

보는 바와 같이 수치 막대가 만들어졌습니다.

위의 수치 막대에 사용된 속성은 value, min, max 이렇게 3가지입니다. value 속성은 현재 값을, min 속성은 최솟값을, max 속성은 최댓값을 의미합니다. 이 속성값은 여기서는 편의상 정수로 주었지만 소수로 줄 수도 있습니다. 해당 속성을 생략할 경우 기본값은 value와 min은 0, max는 1입니다. 위의 예시에서는 최솟값이 0이고 최댓값이 10이며 현재 값이 5라는 의미입니다. 값의 범위에 맞게 막대가 그려지므로 반이 채워진 모양입니다.

또 다른 속성값으로 low와 high, optimum이 있습니다. low는 낮은 값, high는 높은 값, optimum은 최적값을 의미합니다. 이는 이상적인 값을 지정하는 데 필요한 것입니다. 다음 코드를 봅시다.

<ul>
  <li><meter value="2" min="0" max="10" low="3" high="7" optimum="0"> 2 / 10 </meter></li>
  <li><meter value="5" min="0" max="10" low="3" high="7" optimum="0"> 5 / 10 </meter></li>
  <li><meter value="8" min="0" max="10" low="3" high="7" optimum="0"> 8 / 10 </meter></li>
  <li><meter value="2" min="0" max="10" low="3" high="7" optimum="5"> 2 / 10 </meter></li>
  <li><meter value="5" min="0" max="10" low="3" high="7" optimum="5"> 5 / 10 </meter></li>
  <li><meter value="8" min="0" max="10" low="3" high="7" optimum="5"> 8 / 10 </meter></li>
  <li><meter value="2" min="0" max="10" low="3" high="7" optimum="10"> 2 / 10 </meter></li>
  <li><meter value="5" min="0" max="10" low="3" high="7" optimum="10"> 5 / 10 </meter></li>
  <li><meter value="8" min="0" max="10" low="3" high="7" optimum="10"> 8 / 10 </meter></li>
</ul>

이 코드는 다음과 같이 표시될 것입니다.

위와 같이 낮은 값과 높은 값의 범위에 따라 색이 다르게 변합니다. 최적값을 어떻게 지정했느냐에 따라 색이 다르게 변할 수 있는데 그 조건은 다음과 같습니다.

• 최솟값 <= 최적값 < 낮은 값: 숫자가 작을수록 이상적인 경우
  • 현재 값 <= 낮은 값: 초록색
  • 낮은 값 < 현재 값 <= 높은 값: 노란색
  • 높은 값 < 현재 값: 빨간색
• 낮은 값 <= 최적값 <= 높은 값: 작지도 크지도 않은 중간 정도의 숫자가 이상적인 경우
  • 현재 값 < 낮은 값: 노란색
  • 낮은 값 <= 현재 값 <= 높은 값: 초록색
  • 높은 값 < 현재 값: 노란색
• 높은 값 < 최적값 <= 최댓값: 숫자가 클수록 이상적인 경우
  • 현재 값 < 낮은 값: 빨간색
  • 낮은 값 <= 현재 값 < 높은 값: 노란색
  • 높은 값 <= 현재 값: 초록색

즉 현재값이 최적값의 범위에 속하면 초록색, 최적값의 범위를 벗어나면 노란색, 최적값의 범위를 크게 벗어나면 빨간색으로 표시됩니다.

참고로 low 속성을 생략할 경우 낮은 값은 최솟값과 같고, high 속성을 생략할 경우 높은 값은 최댓값과 같습니다. optimum 속성을 생략할 경우 최적값은 최솟값과 최댓값의 합을 2로 나눈 값(쉽게 말해서 최솟값과 최댓값의 정중앙)이 됩니다.

또 다른 속성으로 form이 있습니다. 이 속성은 폼과 연계되는 속성이지만 아직 지원이 완전하지 않습니다.

또한, 자바스크립트로 value의 값을 조절할 수 있습니다. 다음 코드를 봅시다.

<meter value="5" max="10" low="3" high="7" optimum="10"
	onClick="this.value = Math.random() * 10;"></meter>

이 코드는 다음과 같이 표시될 것입니다.

위의 막대를 클릭해서 랜덤으로 변하는 막대를 확인해 보시기 바랍니다.

ID를 갖는 meter 요소의 값을 변경하려면 다음과 같이 쓸 수도 있습니다.

document.getElementById("met").value = 5;

이 코드는 ‘met’라는 ID를 갖는 요소의 값을 5로 바꾸는 예입니다. 만약 이 요소가 수치 막대라면 막대의 길이가 5가 됩니다.

이와 같이 HTML5에서는 자체적인 기능으로 수치 막대를 구현할 수 있습니다.