HTML5에서 작업의 완료 진행률을 시각적으로 표시하려면 <progress> 태그를 사용하면 됩니다. 이 태그를 활용하면 파일 업로드 상태나 다운로드 진행 상황 등을 직관적으로 보여주는 진행률 바(progress bar)를 손쉽게 만들 수 있습니다.
<progress> 태그의 주요 속성
HTML의 <progress> 태그는 다음과 같은 속성을 지원합니다.
| 속성 | 값 | 설명 |
|---|---|---|
| max | max | 작업 전체량을 나타내는 값입니다. 반드시 0보다 큰 유효한 부동 소수점 숫자여야 합니다. |
| value | value | 현재까지 완료된 작업의 양을 지정합니다. max 속성이 설정된 경우 0부터 max 사이의 부동 소수점 숫자를 사용하고, max가 생략된 경우에는 0부터 1 사이의 값을 사용해야 합니다. |
사용 예제
아래 코드를 실행하면 간단한 진행률 바를 확인할 수 있습니다. 이 예제에서는 최대값 100 중 60만큼 진행된 상태를 물의 높이(water level)로 표현했습니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML Progress Tag</title>
</head>
<body>
<h2>Water Level</h2>
<progress value = "60" max = "100"></progress>
</body>
</html>위 예제처럼 value와 max 속성의 조합으로 진행률을 조절할 수 있으며, JavaScript와 함께 사용하면 실시간으로 변하는 진행 상황도 동적으로 표현할 수 있습니다.