2011.09.26 16:00


진행률을 나타낼 때 사용하는 것이 Progress bar입니다. 주로 파일 복사등에서 흔히 볼 수 있지만 웹 상에서 특정 작업의 진행율을 보여주거나 업무 진척등을 일목요연하게 보여주는 용도로도 흔히 사용할 수 있습니다. 위와 같이 Progress를 활용하고자 할 때에는

Progress of Task A : <progress value="60" max="100">60%</progress>

와 같이 표현하면 60%의 진행률을 보여줄 수 있습니다.
아직까지 Progress는 Chrome 8 버전 이상 혹은 Opera 11 이상만 지원되고 있습니다.

Browsers Progress element support
IE 9 Beta
Firefox 4
Safari 5
Chrome 8
Opera 11

실시간으로 특정 그래프를 조정하고 싶다면 역시 방법은 Java Script를 사용하는 방법이 있습니다. Java Script에서 진행율을 표현하고 싶으면

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
    progressBar.value = newValue;
    progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>

과 같이 활용할 수 있습니다.

김영욱 iwinkey@hotmail.com

현재 한국마이크로소프트에서 Evangelist로 근무하고 있으며 국내 유수의 대기업 프로젝트에 참여했던 경험과 Microsoft MVP로 다년간 활동했습니다.
올해는 컨슈머와 관련된 앱을 만드는 다양한 업체들을 발굴하고 지원하는 일을 맡고 있습니다.

HTML5 강좌 전체 목록
  1. HTML5 DocType의 정의
  2. HTML5 Header stuff
  3. Audio
  4. Video
  5. Canvas
    Canvas: Rectangle
    Canvas: Shadow
    Canvas: Path
    Canvas: Image
    Canvas: Text
  6. Web form 2.0
    Input Attr: Placeholder
    Input Attr: Autofocus
    Input Attr: Required field
    Input Attr: DataList
    Input Type: Search
    Input Type: Email, URL, Phone
    Input Type: Range
    Input Type: Number
    Input Type: Date
    Input Type: Color
  7. Towards Semantic Web
    Semantic <mark>
    Semantic <time>
    Semantic <meter>
    Semantic <progress>
    Semantic <section>
    Semantic <header>
    Semantic <footer>
    Semantic <nav>
    Semantic <article>
    Semantic <aside>
저작자 표시 변경 금지
신고