HTML - progress 태그

progress 태그 : 진행 상황을 이미지로 출력하기 위한 태그

예시
	<p>남은 시간 : 10초 <progress value="50" max="60"></progress></p>
	<p>진행률 : 30% <progress value="30" max="100"></progress></p>

진행상황을 보여주기 위해서는 Javascript활용

	<!-- button 태그 : 버튼을 출력하기 위한 태그 -->
	<!-- type 속성 : button(일반버튼), submit(제출버튼 - 기본), reset(초기화버튼) 중 하나를 속성값으로 설정 -->
	<!-- onclick 속성 : 클릭 이벤트 발생시 실행될 이벤트 처리 명령(JavaScript)을 속성값으로 설정 -->
	<!-- => onXXX 속성 : 태그의 이벤트 속성으로 이벤트가 발생될 때 실행될 명령을 속성값으로 설정 -->
	<button type="button" onclick="download();">다운로드</button>
	<progress id="bar" value="0" max="100" style="width: 200px;"></progress>
	<span id="message"></span>
	
	<!-- script 태그 : 스크립트 프로그램을 작성하는 영역을 제공하는 태그 -->
	<!-- type 속성 : 스크립크 프로그램 작성을 위한 파일형식(MimeType)를 속성값으로 설정 -->
	<script type="text/javascript">
	function download() {
		var bar=document.getElementById("bar");
		var message=document.getElementById("message");
		
		var loaded=0;
		var load=function() {
			loaded+=5;
			bar.value=loaded;
			message.innerHTML="진행률 = "+loaded+"%";
			if(loaded==100) {
				clearInterval(dummyLoad);
			}
		}
		
		var dummyLoad=setInterval(function() {
			load();
		},500);
	}
	</script>