meter 태그

meter 태그는 어떤 값을 멋지게 꾸며진 형태로 출력하는 데 사용됩니다.

태그의 외관은 부분적으로 또는 완전히 채워진 막대입니다. 막대는 초록색, 노란색 또는 빨간색일 수 있습니다 (막대의 색상은 속성값에 따라 달라지며, 이에 대해서는 아래에서 설명합니다):

meter 태그는 예를 들어 다음과 같은 상황에서 사용해야 합니다: 화면에 현재 온도 값을 출력하고 싶은데, 온도가 0도에서 100도까지 변할 수 있습니다. 이때 다음 속성들을 지정해야 합니다: value 속성은 현재 온도 값을 나타내야 하고, min 속성은 최소 가능한 값 (이 경우 0), max 속성은 최대 가능한 값 (이 경우 100)을 나타냅니다.

value 속성값에 따라 막대가 작거나 클 것입니다. value 값을 10으로 지정하면 막대는 작을 것입니다 (10이 최솟값인 0에 매우 가깝기 때문에). 반면에 90을 지정하면 막대는 클 것입니다 (90이 최댓값인 100에 가깝기 때문입니다). 값을 100으로 지정하면 막대가 전체 요소를 차지할 것입니다 (값이 최댓값에 도달했기 때문).

100보다 큰 값을 지정하면, 막대는 여전히 전체 요소를 차지할 것입니다. 반면에 0 이하를 지정하면 막대가 전혀 나타나지 않을 것입니다.

예제

value 속성값이 작은 경우:

:

예제

value 속성값이 큰 경우:

:

예제

value 속성값이 중간인 경우:

:

예제

value 속성값이 최댓값과 동일한 경우:

:

예제

value 속성값이 최솟값과 동일한 경우:

:

예제

value 속성값이 최댓값보다 큰 경우:

:

예제

value 속성값이 최솟값보다 작은 경우:

:

low 및 high 속성 추가

meter 태그에는 2개의 속성이 더 있습니다: low와 high.

온도 예제로 그 작동 방식을 살펴보겠습니다. 우리의 최소 온도는 0이고, 최대 온도는 100입니다. 이제 다음과 같은 범위를 만들고 싶다고 가정해 봅시다: "찬 온도"는 0에서 20까지, "보통 온도"는 20에서 80까지, "뜨거운 온도"는 80에서 100까지입니다.

찬 온도를 정의하려면, low 속성값으로 숫자 20을 지정합니다. 그러면 0 (min 속성값)부터 20 (low 속성값)까지가 낮은 값 영역이 됩니다.

뜨거운 온도를 정의하려면, high 속성값으로 숫자 80을 지정합니다. 그러면 80 (high 속성값)부터 100 (max 속성값)까지가 높은 값 영역이 됩니다.

보통 온도는 20 (low 속성값)부터 80 (high 속성값)까지가 될 것입니다. 이 영역을 보통 값 영역이라고 부르겠습니다.

이제, value 속성값이 어떤 영역에 속하는지에 따라 막대가 초록색 또는 노란색으로 채색될 것입니다. 보통 값 영역에 속하면 초록색이 되고, 낮은 값 또는 높은 값 영역에 속하면 노란색이 될 것입니다.

예제

value 속성값이 낮은 값 영역에 속하는 경우:

:

예제

value 속성값이 보통 값 영역에 속하는 경우:

:

예제

value 속성값이 높은 값 영역에 속하는 경우:

:

optimum 속성 추가

optimum 속성은 최적값을 정의합니다. 우리 예제에서는 최적 온도가 찬 온도, 보통 온도 또는 뜨거운 온도 중 하나가 될 수 있습니다. 가정해 봅시다, 최적 온도가 찬 온도라고 지정한다면. 이제, value 속성값 (즉, 현재 온도)에 따라 막대 색상이 초록색, 노란색 또는 빨간색이 됩니다.

현재 온도가 최적 온도 영역에 속하면 (우리가 최적 온도를 찬 온도로 지정했으므로), 막대 색상은 초록색이 됩니다. 현재 온도가 최적 영역의 인접한 범위에 속하면 (이 경우 보통 온도), 막대는 노란색이 됩니다. 만약 현재 온도가 최적 영역의 인접하지 않은 범위에 속하면 (이 경우 뜨거운 온도), 막대는 빨간색이 됩니다.

최적 온도를 뜨거운 온도로 지정해도 비슷하게 작동합니다. 이 경우, 현재 온도가 뜨거운 온도 영역에 속하면 막대는 초록색이 되고, 보통 온도 영역에 속하면 노란색이 되며, 찬 온도 영역에 속하면 빨간색이 됩니다.

최적 온도를 보통 온도로 지정하면, 막대는 현재 온도가 보통 영역에 속할 때만 초록색이 되고 (보통 영역에 속할 때), 노란색은 현재 온도가 보통 온도의 인접한 영역 (즉, 뜨거운 또는 찬 온도)에 속할 때만 될 수 있습니다.

어느 범위가 최적인지 지정하려면, optimum 속성값으로 해당 범위 내의 임의의 숫자를 지정하면 됩니다.

아래 예제에서 optimum 속성값은 낮은 값 영역에 속합니다 (즉, 찬 온도).

예제

value 속성값이 낮은 값 영역에 속하는 경우:

:

예제

value 속성값이 보통 값 영역에 속하는 경우:

:

예제

value 속성값이 높은 값 영역에 속하는 경우:

:

아래 예제에서 optimum 속성값은 높은 값 영역에 속합니다 (즉, 뜨거운 온도).

예제

value 속성값이 낮은 값 영역에 속하는 경우:

:

예제

value 속성값이 보통 값 영역에 속하는 경우:

:

예제

value 속성값이 높은 값 영역에 속하는 경우:

:

---

아래 예제에서 optimum 속성값은 보통 값 영역에 속합니다 (즉, 보통 온도).

예제

value 속성값이 낮은 값 영역에 속하는 경우:

:

예제

value 속성값이 보통 값 영역에 속하는 경우:

:

예제

value 속성값이 높은 값 영역에 속하는 경우:

:

구형 브라우저

구형 브라우저는 meter 태그를 멋지게 표시할 수 없으며 대신 태그 자체의 내용을 출력할 것입니다:

:

속성

속성값은 분수나 음수일 수 있습니다.

속성	설명
value	현재 값을 설정합니다. 필수 속성.
min	최소 가능한 값을 지정합니다. 기본값: 0.
max	최대 가능한 값을 지정합니다. 기본값: 1.
low	낮은 값 영역의 경계를 지정합니다. 낮은 값은 min 속성의 숫자부터 low 속성의 숫자까지입니다.
high	높은 값 영역의 경계를 지정합니다. 높은 값은 high 속성의 숫자부터 max 속성의 숫자까지입니다.
optimum	최적 값 영역을 정의합니다.

함께 보기