happy cat image

everdevel

So This Is Love

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
























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

방문해 주셔서 감사합니다.

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개

정렬기준