HTML <progress> 태그는 작업의 진행 상황을 나타내는 데 사용됩니다. 일반적으로 HTML 웹 페이지 내에서 작업의 진행률 표시줄을 표시하는 데 사용됩니다. 이 랩에서는 HTML <progress> 태그를 사용하여 기본적인 진행률 표시줄을 만드는 방법을 배웁니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
먼저, index.html 파일에 다음 코드를 사용하여 진행률 표시줄의 기본 HTML 구조를 생성합니다.
<!doctype html>
<html>
<head>
<title>HTML Progress Tag Example</title>
</head>
<body>
<h1>HTML Progress Tag</h1>
<label for="progress-bar">Task Progress:</label>
<progress id="progress-bar" max="100"></progress>
</body>
</html>이 코드에서는 HTML 페이지를 생성하는 데 필요한 태그, 페이지 제목을 위한 heading 태그, 진행률 표시줄을 설명하는 label 태그, 그리고 "progress-bar"의 id 속성과 100 의 max 속성을 가진 <progress> 태그를 포함했습니다.
진행률 표시줄의 값을 설정하려면, 0 에서 100 사이의 값을 가진 value 속성을 progress 태그에 추가합니다. 예를 들어, 진행률 표시줄을 50% 로 설정하려면 <progress> 태그 뒤에 다음 코드를 추가합니다.
<progress id="progress-bar" max="100" value="50"></progress>진행률 표시줄을 동적으로 업데이트하기 위해, progress 태그의 value 속성을 변경하는 JavaScript 코드를 추가합니다.
다음 JavaScript 코드를 HTML 파일에 추가합니다.
<script>
let progressBar = document.getElementById("progress-bar");
let percent = 0;
function updateProgress() {
if (percent == 100) {
clearInterval(intervalId);
return;
}
progressBar.value = percent;
percent++;
}
let intervalId = setInterval(updateProgress, 100);
</script>이 코드에서는 100 밀리초마다 진행률 표시줄의 값을 업데이트하는 updateProgress()라는 함수를 생성했습니다. 이 함수는 진행률 표시줄이 100% 에 도달했는지 확인하고, 도달한 경우 interval 을 중지합니다.
마지막으로, updateProgress() 함수와 100 밀리초의 시간 간격으로 setInterval()을 호출하여 interval 을 설정합니다.
index.html 파일을 저장하고 웹 브라우저에서 엽니다. 이제 시간이 지남에 따라 값이 증가하여 100% 에 도달하는 진행률 표시줄을 볼 수 있습니다.
위 단계를 따르면 HTML 에서 <progress> 태그를 사용하여 기본적인 진행률 표시줄을 만드는 방법을 배웠습니다. 또한 JavaScript 를 사용하여 진행률 표시줄을 동적으로 업데이트하는 방법도 배웠습니다. 이 기술은 장시간 실행되는 작업의 진행 상황을 표시하거나 파일 업로드의 진행 상황을 나타내는 데 유용할 수 있습니다.
