DOM의 Progress 객체는 HTML 문서 내 <progress> 요소를 나타내는 객체입니다. <progress> 요소는 파일 다운로드나 설치 과정처럼 작업이 얼마나 완료되었는지 진행률을 시각적으로 보여줄 때 사용됩니다.
Progress 객체 생성 방법
JavaScript의 createElement() 메서드를 사용하면 새로운 progress 객체를 동적으로 만들 수 있습니다. 기본 문법은 다음과 같습니다.
document.createElement("PROGRESS");
Progress 객체의 주요 속성
progress 객체에서 자주 사용되는 속성은 아래와 같습니다.
| 속성 | 설명 |
|---|---|
| max | HTML 문서 내 progress 요소의 max 속성 값을 반환하거나 변경합니다. |
| position | progress 요소의 현재 진행 위치(0~1 사이의 비율 값)를 반환합니다. |
| labels | 해당 progress 막대에 연결된 label 요소들의 목록을 반환합니다. |
| value | progress 요소의 value 속성 값을 반환하거나 변경합니다. |
예제 코드
버튼을 클릭하면 progress 객체가 화면에 동적으로 생성되는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
background-color:#fff;
color:#0197F6;
}
h1{
color:#23CE6B;
}
.btn{
background-color:#fff;
border:1.5px dashed #0197F6;
height:2rem;
border-radius:2px;
width:60%;
margin:2rem auto;
display:block;
color:#0197F6;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM progress 객체 데모</h1>
<button onclick="createProgress()" class="btn">progress 객체 생성하기</button>
<script>
function createProgress() {
var progressElement = document.createElement("PROGRESS");
progressElement.setAttribute("value","60");
progressElement.setAttribute("max","100");
document.body.appendChild(progressElement);
}
</script>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
“progress 객체 생성하기” 버튼을 클릭하면 value 60, max 100으로 설정된 진행 표시줄이 문서에 추가되어 화면에 나타납니다.
