HTML progress 태그: 진행률 표시와 미정 상태 전환 방법
HTML의 <progress>는 작업의 완료 정도를 표시합니다. value와 max로 진행률을 정하고, 전체 작업량을 알 수 없으면 value 속성을 생략해 미정 상태를 나타냅니다. 실제 업로드나 다운로드의 진행 상황을 자동으로 측정하는 요소는 아닙니다.
value와 max로 진행률 계산하기
value는 완료한 작업량이고 max는 전체 작업량입니다. value가 20이고 max가 100이면 20%, max가 200이면 10%입니다. max를 생략하면 기본값은 1이므로 20%는 value="0.2"처럼 나타냅니다. max는 0보다 큰 유효한 수여야 하고 value는 0부터 max 사이로 설정합니다.
최솟값은 항상 0이며 progress에는 min 속성을 사용하지 않습니다. 저장 용량·점수처럼 일정 범위 안의 측정값은 meter의 용도를 검토하고, 진행 중인 작업의 완료 정도는 progress로 구분합니다.
전체 예제: 진행률 변경과 미정 상태
다음 코드를 progress-demo.html로 저장해 브라우저에서 엽니다. 버튼은 표시 값만 바꾸는 실습이며 실제 파일 전송은 수행하지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>진행률과 미정 상태</title>
<style>
body { max-width: 36rem; padding: 0 1rem; margin: 1rem auto; }
progress { display: block; width: 100%; height: 1.5rem; }
button { margin: 0.25rem; font: inherit; }
</style>
</head>
<body>
<h1>진행 상태 실습</h1>
<label for="work">예제 작업 진행률</label>
<progress id="work" value="20" max="100">20%</progress>
<p id="status" aria-live="polite">20% 완료</p>
<button type="button" id="advance">80%로 변경</button>
<button type="button" id="unknown">작업량 미정</button>
<button type="button" id="reset">초기화</button>
<script>
const bar = document.getElementById('work');
const status = document.getElementById('status');
function show(value) {
if (value === null) {
bar.removeAttribute('value');
bar.textContent = '진행 중';
status.textContent = '진행 중: 전체 작업량을 알 수 없습니다.';
} else {
bar.value = value;
bar.textContent = value + '%';
status.textContent = value + '% 완료';
}
}
document.getElementById('advance').addEventListener('click', () => show(80));
document.getElementById('unknown').addEventListener('click', () => show(null));
document.getElementById('reset').addEventListener('click', () => show(20));
</script>
</body>
</html>- 처음에는 20% 완료 상태입니다. “80%로 변경”을 누르면 막대와 설명이 80%로 바뀝니다.
- “작업량 미정”을 누르면 value 속성이 제거됩니다. 브라우저의 미정 진행 표시와 함께 전체량을 모른다는 문장이 나타납니다.
- “초기화”를 누르면 value가 다시 생기고 20%로 돌아옵니다.
value="0"은 진행량이 0인 확정 상태이지 미정 상태가 아닙니다. 기존 값을 가진 progress를 미정 상태로 바꾸려면 예제처럼 속성을 제거합니다. 미정 표시의 움직임·모양은 브라우저와 운영체제, 사용자 설정에 따라 다를 수 있습니다.
작업 이름과 상태 문장을 함께 제공하기
progress 안에 적은 “20%”는 오래된 브라우저 등을 위한 대체 텍스트이며 작업 이름을 대신하지 않습니다. label의 for·id를 연결하거나 적절한 ARIA 이름을 제공해 어떤 작업의 진행인지 알려줍니다. 색과 막대 길이만으로 전달하지 않고 현재 상태를 문장으로 함께 보여주세요.
실제 작업에서는 서버나 전송 이벤트 등에서 확인한 값으로 갱신합니다. 단순 타이머로 막대를 채웠다고 작업이 완료되었다고 표시해서는 안 됩니다. 오류·취소·완료 상태도 별도 메시지와 동작으로 설계하고, 상태 안내가 너무 자주 반복되지 않도록 갱신 빈도를 조절합니다. 구문과 접근성 조건은 MDN progress 문서에서 확인할 수 있습니다.
