HTML에서 <progress> 태그의 max 속성은 진행률 표시줄(progress bar)이 가질 수 있는 최대값을 설정하는 데 사용됩니다. 작업 전체가 얼마나 많은 노력을 필요로 하는지를 나타내는 기준점 역할을 합니다.
max 속성 문법
max 속성의 기본 문법은 다음과 같습니다.
<progress max="num">
여기서 num은 부동 소수점(floating-point) 숫자를 의미하며, 해당 작업을 완료하기 위해 필요한 총 작업량을 나타냅니다.
예제 코드
다음은 <progress> 요소에 max 속성을 적용한 실제 예제입니다.
<!DOCTYPE html> <html> <body> <h2>Windows Build 10.58.89.1</h2> Downloading and Installing: <progress value="75" max="100"></progress> </body> </html>
실행 결과
위 코드를 실행하면 진행 중인 다운로드 및 설치 작업의 진행 상황이 진행률 표시줄로 화면에 출력됩니다.
코드 설명
위 예제에서는 <progress> 태그를 사용해 현재 진행 중인 작업의 상태를 표시했습니다.
<progress value="75" max="100"> </progress>
- value="75": 현재까지 완료된 작업량을 나타냅니다.
- max="100": max 속성으로 진행률 표시줄의 최대값을 100으로 설정했습니다.
즉, 이 진행률 표시줄은 전체 작업량 100 중 75만큼 완료되었음을 의미하며, 브라우저에는 약 75%의 진행 상태가 시각적으로 표시됩니다.