happy cat image

everdevel

Web Technology, 에버디벨

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

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>

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

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

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

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

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

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

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

(로그인을 하시면 위의 코드를 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 순식간에 로그인 하세요.)

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

뭐 실제로는 서버에서 진행도의 값을 숫자로 받아와서 보여주겠죠? 저도 아직 안해봤지만 조만간 연구해서 올려볼게요. ^^


    
    

강좌로 돌아가기

댓글 0개

정렬기준