progress 태그
작업의 진행도를 나타내려면 progress태그를 사용합니다.
다음과 같이요.
progress 태그는 value속성에 값을 max속성에 최대치의 값을 입력합니다.
예를 들어 현재 100%가 최대치이고 현재 30% 정도 업무를 진행했다면 value속성에 30 max속성에 100을 입력합니다.
다음과 같이요.
progress 태그 사용 방법
<progress value='40' max='100'></progress>
예제를 통해 확인하겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>progress 태그</title>
</head>
<body>
<progress value='40' max='100'></progress>
</body>
</html>
위의 코드에 대한 결과 입니다.
위의 이미지는 너무 썰렁합니다. 뭔가 옆에 숫자라도 넣어 주어야 할 듯 하네요.
다음 처럼요
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>progress 태그</title>
</head>
<body>
<progress value='40' max='100'></progress><b> 40%</b>
</body>
</html>
위의 코드에 대한 결과 입니다.
위의 이미지는 너무 썰렁합니다.
뭔가 역동적으로 보이게끔 0.1초마다 1%씩 오르게끔 자바스크립트를 코드를 넣어볼게요.
자바스크립트는 나중에 학습하기때문에 그냥 재미로 보기만 하세요.
아 이렇게도 할 수 있구나 이런 느낌으로요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>progress 태그</title>
<script>
cnt = 0;
stopCheck = false;
setInterval(function(){
if(stopCheck == false) {
document.getElementsByTagName('progress')[0].value = cnt;
document.getElementsByTagName('b')[0].innerText = cnt + '%';
cnt++;
if (cnt > 100) {
stopCheck = true;
document.getElementsByTagName('p')[0].innerText = '업무를 모두 끝냈군요. 축하해요. ^-^*';
}
}
},100);
</script>
</head>
<body>
<progress value='0' max='100'></progress> <b></b>
<p></p>
</body>
</html>
위의 코드에 대한 결과 입니다. 1초마다 쭉쭉 올라가죠? 스크립트 언어도 배워야겠다 생각이 들죠?
뭐 실제로는 서버에서 진행도의 값을 숫자로 받아와서 보여주겠죠? 저도 아직 안해봤지만 조만간 연구해서 올려볼게요. ^^