HTML 태그 progress

HTML  태그 progress

안녕하세요. crome입니다.

오늘은 html 태그 중 <progress> 태그에 대해 알아보겠습니다.

progress 설명

작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 나타냅니다.

progress 예시

<progress id=p value="70" max="100">70 %</progress>

 실행 화면

progrss 주요 속성

max

<progress> 요소가 나타내는 최대 수치를 나타냅니다.  0보다 크고 유효한 부동소수점 숫자여야 합니다. 기본값은 1입니다.

value

<progress> 요소가 나타내는 작업을 완료한 정도를 나타냅니다. 유효한 부동소수점 숫자여야 하고, max 특성을 지정한 경우 0 이상 max 보다 작아야 합니다. 

progress 활용

javascript: updateProgress() 을 통해 progress 진행사항을 변경

<section>
 <h2>Task Progress</h2>
 <p>Progress: <progress id=p max=100><span>0</span>%</progress></p>
 <script>
  var progressBar = document.getElementById('p');
  function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
  }
 </script>
</section>

참조: HTML Standard (whatwg.org)

오늘은 HTML 태그 중 progress 태그에 대해 알아보았습니다.

도움이 되셨다면 공감 및 댓글 남겨주세요.

감사합니다.