HTML에서 진행률 표시줄(progress bar)을 만들려면 <progress> 태그를 사용합니다. HTML의 <progress> 태그는 특정 작업의 완료 진행 상태를 나타내며, 브라우저 화면에는 진행률 표시줄 형태로 출력됩니다. 또한 JavaScript와 함께 사용하면 진행률 값을 동적으로 조작할 수 있어 파일 업로드, 로딩 상태 등을 직관적으로 보여줄 수 있습니다.
<progress> 태그의 주요 속성
| 속성 | 값 | 설명 |
|---|---|---|
| max | max | 작업의 전체 분량을 나타냅니다. 반드시 0보다 큰 유효한 부동 소수점 숫자여야 합니다. |
| value | value | 현재까지 완료된 작업량을 지정합니다. max 속성이 설정된 경우 0부터 max 사이의 값, max가 생략된 경우 0부터 1 사이의 부동 소수점 숫자를 사용해야 합니다. |
예제
다음 코드를 실행하면 웹 페이지에서 진행률 표시줄이 어떻게 동작하는지 직접 확인할 수 있습니다. 아래 예제는 전체 100 중 65만큼 작업이 진행된 상태를 나타냅니다.
<!DOCTYPE html> <html> <head> <title>HTML Progress Tag</title> </head> <body> <h1>Loading</h1> <progress value = "65" max = "100"/> </body> </html>
참고 사항
<progress> 태그는 모든 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 기본적으로 지원됩니다. value 속성을 생략하면 진행 상태가 확정되지 않은(indeterminate) 상태로 표시되어, 로딩 중임을 알리는 애니메이션 효과처럼 활용할 수 있습니다. 필요에 따라 CSS를 이용해 표시줄의 색상과 크기를 자유롭게 꾸밀 수도 있습니다.