1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: <meter>
slug: Web/HTML/Element/meter
tags:
- Element
- HTML
- HTML forms
- Reference
- Web
translation_of: Web/HTML/Element/meter
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><meter></code> 요소</strong>는 특정 범위 내에서의 스칼라 값, 또는 백분율 값을 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/meter.html", "tabbed-shorter")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code><meter></code> 요소는 사용할 수 없습니다.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLMeterElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>현재의 값. 최소와 최댓값(<code>min</code>과 <code>max</code> 특성)을 지정한 경우, 그 사이여야 합니다. 지정하지 않았거나 잘못된 값인 경우 <code>0</code>으로 간주합니다. 지정했으나 범위 바깥인 경우, 범위에 맞춰 나머지 값을 버립니다.
<div class="note"><strong>참고: </strong><code>value</code>가 <code>0</code> 이상 <code>1</code> 이하가 아닌 이상, <code>min</code>과 <code>max</code>를 정의해 <code>value</code> 값이 그 안에 들어가도록 해야 합니다.</div>
</dd>
<dt>{{htmlattrdef("min")}}</dt>
<dd>측정 범위의 가능한 최솟값. 지정할 경우 최댓값(<code>max</code> 특성) 미만이어야 합니다. 지정하지 않은 경우 <code>0</code>입니다.</dd>
<dt>{{htmlattrdef("max")}}</dt>
<dd>측정 범위의 가능한 최댓값. 지정할 경우 최솟값(<code>min</code> 특성)을 초과해야 합니다. 지정하지 않은 경우 <code>1</code>입니다.</dd>
<dt>{{htmlattrdef("low")}}</dt>
<dd>측정 범위 중 낮은 범위의 최댓값. 지정할 경우 전체 범위 최솟값(<code>min</code> 특성)을 초과해야 하며, 높은 범위 최댓값과 전체 범위 최댓값(각각 <code>high</code>와 <code>max</code> 특성) 미만이어야 합니다. 지정하지 않았거나 전체 범위 최솟값 미만인 경우, 전체 범위 최솟값과 같아집니다.</dd>
<dt>{{htmlattrdef("high")}}</dt>
<dd>측정 범위 중 높은 범위의 최솟값. 지정할 경우 전체 범위 최댓값(<code>max</code> 특성) 미만이어야 하며, 낮은 범위의 최댓값과 전체 범위 최솟값(각각 <code>low</code>와 <code>min</code> 특성)을 초과해야 합니다. 지정하지 않았거나 전체 범위 최댓값을 초과할 경우 전체 범위 최댓값과 같아집니다.</dd>
<dt>{{htmlattrdef("optimum")}}</dt>
<dd>이상적인 값. <code>min</code>과 <code>max</code> 특성으로 정의한 범위 내에 위치해야 합니다. <code>low</code>와 <code>high</code> 특성을 함께 사용한 경우, <code>optimum</code>은 어느 범위가 이상적인지 나타냅니다. 예를 들어, 값이 <code>min</code>과 <code>low</code> 사이에 위치한 경우, 측정 범위 중 낮은 범위가 이상적인 범위입니다.</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd><code><meter></code>와 연결할 {{htmlelement("form")}} 요소("양식 소유자"). 같은 문서에 존재하는 <code><form></code> 요소의 {{htmlattrxref("id")}} 특성 값을 사용해야 합니다. <code>form</code> 특성을 지정하지 않았으나 조상 중 <code><form></code> 요소가 존재하면 해당 <code><form></code>과 연결됩니다. <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number"><code><input type="number"></code></a>의 값 범위를 보여주는 등 <code><meter></code>를 양식 관련 콘텐츠로서 사용할 때만 지정하세요.</dd>
</dl>
<h2 id="예제">예제</h2>
<h3 id="간단한_예제">간단한 예제</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
</pre>
<h4 id="결과">결과</h4>
<p>{{EmbedLiveSample("간단한_예제", 300, 60)}}</p>
<p>Google Chrome에서는 다음 그림처럼 보입니다.</p>
<p><img alt="meter1.png" class="default internal" src="/@api/deki/files/4940/=meter1.png"></p>
<h3 id="높은_범위와_낮은_범위">높은 범위와 낮은 범위</h3>
<p>{{htmlattrxref("min", "meter")}} 특성의 기본값이 0이므로 생략한 것을 참고하세요.</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><p>He got a <meter low="69" high="80" max="100"
value="84">B</meter> on the exam.</p>
</pre>
<h4 id="결과_2">결과</h4>
<p>{{EmbedLiveSample("높은_범위와_낮은_범위", 300, 60)}}</p>
<p>Google Chrome에서는 다음 그림처럼 보입니다.</p>
<p><img alt="meter2.png" class="default internal" src="/@api/deki/files/4941/=meter2.png"></p>
<h2 id="명세">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'sec-forms.html#the-meter-element', '<meter>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.meter")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{HTMLElement("progress")}}</li>
</ul>
|
