0Pricing
HTML Academy · 강의

progress 및 meter 요소

기본 제공 HTML로 완료도와 측정값 표시하기

progress 및 meter 요소은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

progress 요소

<progress> 요소는 작업 완료를 나타냅니다:

<label for="upload">File upload progress:</label>
<progress id="upload" max="100" value="72">72%</progress>
<!-- max: total amount of work (default: 1) -->
<!-- value: amount of work done -->
<!-- Content between tags: fallback for old browsers -->

확정되지 않은 진행률

value가 없으면 진행률에 확정되지 않은 애니메이션이 표시됩니다:

<!-- Indeterminate: value not set -->
<progress id="loading">Loading...</progress>
<!-- Browser shows a cycling animation (no value known) -->

<!-- Set value when progress is known: -->
<script>
document.getElementById('loading').value = 45;
// Now shows 45% complete (with max=1: 0.45 = 45%)
</script>

JavaScript로 진행률 애니메이션 만들기

진행률을 동적으로 업데이트합니다:

<progress id="task" max="100" value="0"></progress>
<span id="pct">0%</span>

<script>
let progress = 0;
const bar = document.getElementById('task');
const pct = document.getElementById('pct');

const interval = setInterval(() => {
  progress += 10;
  bar.value = progress;
  pct.textContent = progress + '%';
  if (progress >= 100) clearInterval(interval);
}, 500);
</script>

meter 요소

<meter> 요소는 알려진 범위 내의 scalar measurement를 표시합니다:

<meter min="0" max="100" value="72">72 out of 100</meter>
<!-- Unlike progress (task completion), meter shows a static measurement:
  - Disk usage
  - Password strength
  - Score or rating
  - Fuel level
-->

meter 속성

미터에는 최적 범위와 경고 범위를 정의하는 여러 속성이 있습니다:

<meter
  min="0"      <!-- minimum possible value -->
  max="100"   <!-- maximum possible value -->
  low="30"    <!-- threshold: below this = low -->
  high="70"   <!-- threshold: above this = high -->
  optimum="50" <!-- where the optimal value lies -->
  value="85"
>85/100</meter>

meter 색상 상태

브라우저는 낮음/높음/최적 값에 따라 미터에 색상을 자동으로 지정합니다:

<!-- optimum is in the low range: low values are good (e.g., error count) -->
<meter min="0" max="100" low="30" high="70" optimum="0" value="10">
  10 errors  <!-- green: value is in the good zone -->
</meter>

<!-- optimum is in the high range: high values are good (e.g., score) -->
<meter min="0" max="100" low="40" high="80" optimum="100" value="55">
  55 points  <!-- yellow: between low and high -->
</meter>

meter를 사용한 디스크 사용량

미터의 대표적인 사용 사례는 디스크 또는 메모리 사용량입니다:

<label for="disk">Disk usage:</label>
<meter
  id="disk"
  min="0"
  max="500"
  low="400"
  high="450"
  optimum="0"
  value="420"
>420 GB of 500 GB used</meter>
<p>420 GB of 500 GB used (84%)</p>

meter를 사용한 비밀번호 strength

미터를 사용해 비밀번호 strength를 표시합니다:

<label for="pwd">Password</label>
<input type="password" id="pwd">
<label for="strength">Strength:</label>
<meter id="strength" min="0" max="4" low="1" high="3" optimum="4" value="0"></meter>

<script>
document.getElementById('pwd').addEventListener('input', function() {
  const strength = calculateStrength(this.value); // 0-4
  document.getElementById('strength').value = strength;
});
</script>

progress와 meter 스타일 지정

progress와 meter의 사용자 지정 스타일:

/* Basic progress styling */
progress {
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: #e2e8f0;
  border: none;
}

progress::-webkit-progress-bar { background: #e2e8f0; }
progress::-webkit-progress-value { background: #0070f3; }
progress::-moz-progress-bar { background: #0070f3; }

progress의 접근성

화면 낭독기를 더 잘 지원하도록 ARIA 속성을 추가합니다:

<label for="upload">Upload progress</label>
<progress
  id="upload"
  max="100"
  value="65"
  aria-valuenow="65"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload: 65% complete"
>65%</progress>

progress와 meter 요약

핵심적인 차이:

  • <progress> — 시간에 따른 작업 완료; value가 max를 향해 증가하며 확정되지 않은 상태로 표시할 수도 있습니다
  • <meter> — 정적인 scalar measurement; value가 이미 알려져 있고 낮음/높음/최적 영역이 있습니다

각 요소를 사용하는 경우

사용 사례 안내:

  • 진행률 — 파일 업로드, 양식 작성 단계 안내, 로딩 bar
  • 미터 — 디스크 사용량, 연료 게이지, 신용 점수, 배터리 잔량, 검색 결과의 관련성

빠른 확인

하드 드라이브가 얼마나 가득 찼는지 표시할 때 적절한 요소는 무엇입니까?

복습: progress와 meter

progress와 meter의 핵심:

  • <progress max value> — 작업 완료; value가 없으면 확정되지 않은 상태
  • <meter min max low high optimum value> — 정적인 measurement
  • 브라우저는 최적 위치에 따라 미터의 색상을 자동으로 지정합니다
  • 화면 낭독기를 지원하도록 aria-valuenow/min/max를 추가합니다

자주 묻는 질문

“progress 및 meter 요소” 강의는 무료인가요?

네 — “progress 및 meter 요소” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“progress 및 meter 요소”에서 뭘 배우나요?

기본 제공 HTML로 완료도와 측정값 표시하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“progress 및 meter 요소” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. aside 보조 콘텐츠
  2. figure와 figcaption 다시 보기
  3. details와 summary 공개 위젯
  4. progress 및 meter 요소
← HTML Academy(으)로 돌아가기