HTML5에서 추가된 유용한 태그 <progress>

이 포스트는 HTML5에서 추가된 <progress> … </progress> 태그에 관한 내용입니다.

이 태그는 네이티브 앱에서 흔히 볼 수 있는 진행 상황 표시 막대를 표시하기 위한 태그입니다. 설치 프로그램 등을 보면 설치 진행 상황이 막대로 표시되는 것을 볼 수 있을 것입니다. 이러한 진행 상황 막대를 웹 페이지에서 구현하는 역할을 합니다.

물론 <div> … </div> 태그에 스타일시트를 입히는 방법으로도 진행 상황 막대를 그릴 수는 있습니다. 하지만 이 태그는 내용적으로도 진행 상황을 표시하는 역할을 하며, 자바스크립트와 연동하기 쉽다는 장점이 있습니다.

다음 코드를 봅시다.

Downloading progress:
<progress value="22" max="100"> 22% / 100% </progress>

이 코드는 다음과 같이 표시될 것입니다.

보는 바와 같이 진행 상황 막대가 만들어졌습니다.

이 태그에는 두 가지 속성값이 있습니다. 바로 value와 max입니다. value는 현재 진행 값을 의미하고 max는 최대 값을 의미합니다. 이 예제와 같은 경우는 22% 진행된 막대가 표시됩니다.

참고로 value 값을 생략할 경우 다음과 같이 계속 진행하는 애니메이션이 나오게 됩니다.

또한, 자바스크립트로 value의 값을 조절할 수 있습니다. 다음 코드를 봅시다.

Progress:
<progress value="0" max="100"
	onClick="this.value = Math.random() * 100;"></progress>

이 코드는 다음과 같이 표시될 것입니다.

위의 막대를 클릭해서 랜덤으로 변하는 막대를 확인해 보시기 바랍니다.

ID를 갖는 progress 요소의 값을 변경하려면 다음과 같이 쓸 수도 있습니다.

document.getElementById("prog").value = 50;

이 코드는 ‘prog’라는 ID를 갖는 요소의 값을 50으로 바꾸는 예입니다. 만약 이 요소가 진행 상황 막대라면 막대의 길이가 50이 됩니다.

이와 같이 HTML5에서는 자체적인 기능으로 진행 상황 막대를 구현할 수 있습니다.

※ 이와 비슷한 태그로 <meter> … </meter> 태그가 있습니다. 이 태그는 알려진 범위 내에서의 스칼라 측정 또는 분포비율을 나타낼 때 사용합니다. 막대 그래프를 그린다는 점은 이 태그와 같지만 의미는 다르다는 점에 주의하여 사용할 필요가 있습니다.