PinkCoding

CLASS web

HTML

progress 태그 (동적)

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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위의 코드에 대한 결과 입니다.

위의 이미지는 너무 썰렁합니다. 뭔가 옆에 숫자라도 넣어 주어야 할 듯 하네요.
다음 처럼요

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>progress 태그</title>
</head>
<body>
    <progress value='40' max='100'></progress><b> 40%</b>
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위의 코드에 대한 결과 입니다.

위의 이미지는 너무 썰렁합니다.
뭔가 역동적으로 보이게끔 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>

결과는 바로 아래에서 확인할 수 있습니다.

PLAY

위의 코드에 대한 결과 입니다. 1초마다 쭉쭉 올라가죠? 스크립트 언어도 배워야겠다 생각이 들죠?