<progress> 태그

<progress> 태그는 HTML5에서 도입된 태그로, 작업의 완료 상태나 진행 상태를 표현하는 데 사용해요.

• value (선택 사항): 현재의 진행 값을 나타냅니다. 이 속성이 없으면 작업의 진행 상태는 알려지지 않는 것으로 간주됩니다.
• max (선택 사항): 진행 바의 최대 값을 설정합니다. 기본값은 1입니다.

복사
<!-- 진행 상태가 70%인 경우 -->
<progress value="70" max="100"></progress>

<!-- 최대값이 1인 경우에 0.5로 진행도가 절반인 상황 -->
<progress value="0.5"></progress>

1. <progress> 태그는 순수한 정보 목적으로 사용되며, 완료된 작업의 양이나 진행 상태를 사용자에게 시각적으로 표현합니다.

2. <progress> 태그는 폼 요소가 아니므로, 폼 제출과 함께 전송되는 값이 없습니다.

3. 대부분의 현대 브라우저에서는 <progress> 태그를 기본 스타일로 제공하지만, CSS를 사용하여 스타일을 커스터마이징할 수 있습니다.

• Web Design: 웹 디자인 100%

  복사
  <progress class="progress-color-1" value="100" max="100"></progress>

• Mobile Design: 모바일 80%

  복사
  <progress class="progress-color-2" value="80" max="100"></progress>