happy cat image

everdevel

Be Magical

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.
























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>

결과는 바로 아래에서 확인하겠습니다.

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

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

<!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초마다 쭉쭉 올라가죠? 스크립트 언어도 배워야겠다 생각이 들죠?

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


봐주셔서 감사합니다. 문의 또는 잘못된 설명은 아래의 댓글에 부탁드립니다.
당신의 작은 누름이 저에게는 큰 희망이 됩니다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준