progress element - by. UXKM

2025-05-16

요약 설명
<progress> 요소는 작업의 진행 상황을 시각적으로 표시하기 위한 시맨틱 태그로, 현재 완료된 양과 전체 작업량을 기반으로 진행률을 표현합니다.
value 속성과 max 속성을 사용해 0부터 최대값까지의 비율로 진행 상태를 정의하며, 브라우저는 이를 막대 그래프로 렌더링합니다.
value 속성을 생략하면 불확정 상태(indeterminate)로 인식되어 반복 애니메이션이 나타나며, 이는 로딩 중이나 진행률을 알 수 없는 작업에 사용됩니다. 주로 파일 업로드, 설문 진행, 데이터 처리 등 사용자 피드백이 필요한 상황에 활용됩니다.

주요 역할 및 특징

진행 상태를 시각적으로 표현 (진행률 바) 브라우저에서 자동으로 스타일이 적용된 진행 막대가 표시됩니다.
value와 max로 진행 정도 설정
예: value="30"과 max="100"이면 30% 진행률도 표시됩니다.
스크립트 없이도 기본 표시 가능
속성만으로도 단순한 진행률 표시가 가능합니다.
JavaScript와 함께 동적으로 조작 가능
JavaScript를 사용하여 value 속성을 동적으로 변경하면, 진행 상태가 실시간으로 업데이트됩니다.
CSS로 디자인 변경 가능하지만 제한적
- 기본적인 색상과 크기 조정은 가능하지만, 브라우저마다 다르게 스타일링됩니다.
- 특정 브라우저에서는 커스텀 스타일링이 제한될 수 있습니다.
max 속성이 없으면 기본값은 1로 설정됨
- value 속성의 기본 단위는 0 ~ 1 범위로 설정됩니다.
- max 값을 설정하면 value 값이 해당 범위 내에서 조정됩니다.

CSS 기본 값

<progress> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							progress {
								display: inline-block;
								appearance: auto;  /* 브라우저 기본 스타일 적용 */
								box-sizing: border-box;
							}

기본 문법

							<progress value="50" max="100"></progress>

속성

[value] 선택 사항 <progress value="number">

현재 진행 상태를 시각적으로 나타내는 값으로, 숫자로 지정됩니다. 기본값은 0이며, max 속성에 설정된 값 범위 내에서 변경할 수 있습니다.
값을 지정하지 않으면 불특정 진행 상태(indeterminate)로 간주됩니다.

								<progress value="30" max="100"></progress>

[max] 선택 사항 <progress max="number">

max 속성은 진행률의 최댓값을 설정하며, value 속성과 함께 사용하여 현재 진행 상태를 백분율(%)로 계산할 수 있습니다.
기본값은 1이며, 최대값을 1로 설정할 경우 속성을 생략해도 동일하게 동작합니다.

								<!--
									max값을 생략한 예
									max를 생략했기 때문에 max=1로 자동 설정되어 60%로 해석됩니다.
								-->
								<progress value="0.6"></progress>

								<!-- 일반적인 예(max값 지정) -->
								<progress value="7" max="10"></progress>

예제

기본 진행 바

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

JavaScript로 진행률 업데이트

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

파일 업로드 진행률 시뮬레이션

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

다른 요소로 <progress> 표현

이번 예제는 <progress> 요소 대신 <div> 요소로 진행 상태 표시(progress bar)를 구현한 예제입니다.
디자인을 커스터마이즈하기 위해 실제로 많이 사용되는 방식입니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

주의사항

<progress> 요소의 value 속성을 설정하지 않으면 "알 수 없는 진행 상태"로 표시됩니다.
일부 브라우저에서는 애니메이션이 있는 진행 표시줄로 표시됩니다.
기본 스타일을 변경할 수 있지만, 브라우저별 지원이 다릅니다.
::-webkit-progress-bar, ::-webkit-progress-value 같은 벤더 프리픽스를 사용해야 할 수도 있습니다.
<progress>는 단순히 시각적 요소일 뿐, 사용자의 입력은 받지 않습니다.
폼 전송에 포함되지 않으며, 필요 시 별도 숨겨진 <input> 사용이 필요합니다.
브라우저마다 기본 스타일이 다릅니다. 완전히 커스텀하고 싶다면 <div>로 구현하거나 appearance: none + 배경 설정이 필요합니다.
시각장애인을 위한 스크린 리더 지원이 부족할 수 있으므로, aria-valuenow, aria-valuemax 속성을 추가하면 접근성이 향상됩니다.