Guidelines
Practice
<progress>
태그
<progress>
태그는 HTML5에서 도입된 태그로, 작업의 완료 상태나 진행 상태를 표현하는 데 사용해요.
속성
- value (선택 사항): 현재의 진행 값을 나타냅니다. 이 속성이 없으면 작업의 진행 상태는 알려지지 않는 것으로 간주됩니다.
- max (선택 사항): 진행 바의 최대 값을 설정합니다. 기본값은 1입니다.
사용 예
<!-- 진행 상태가 70%인 경우 --> <progress value="70" max="100"></progress> <!-- 최대값이 1인 경우에 0.5로 진행도가 절반인 상황 --> <progress value="0.5"></progress>
특징
-
<progress>
태그는 순수한 정보 목적으로 사용되며, 완료된 작업의 양이나 진행 상태를 사용자에게 시각적으로 표현합니다. -
<progress>
태그는 폼 요소가 아니므로, 폼 제출과 함께 전송되는 값이 없습니다. -
대부분의 현대 브라우저에서는
<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>
Guidelines
AI Tutor
Publish
Design
Upload
Notes
Favorites
Help