HTML5 Progress 태그 사용법

1. Progress 태그란?

Progress 태그는 작업의 진행 상태를 표시하는 데 사용됩니다. 파일 업로드, 다운로드, 작업 완료율 등을 시각적으로 표현할 수 있습니다.

2. 기본 구조

<progress value="70" max="100">70%</progress>

3. 자주 사용되는 속성

4. 실제 사용 예제

<!-- 기본 진행 상태 예제 -->
<div class="basic-example">
    <h3>기본 진행 상태 예제</h3>
    <progress value="70" max="100">70%</progress>
</div>

<!-- 무한 진행 상태 예제 -->
<div class="indeterminate-example">
    <h3>무한 진행 상태 예제</h3>
    <progress>진행 중...</progress>
</div>

<!-- 동적 진행 상태 예제 -->
<div class="dynamic-example">
    <h3>동적 진행 상태 예제</h3>
    <progress id="dynamicProgress" value="0" max="100">0%</progress>
    <button onclick="updateProgress()">진행률 증가</button>
</div>

<script>
    function updateProgress() {
        const progress = document.getElementById('dynamicProgress');
        const currentValue = parseInt(progress.value);
        if (currentValue < 100) {
            progress.value = currentValue + 10;
            progress.textContent = progress.value + '%';
        }
    }
</script>

<style>
    /* 기본 진행 상태 예제 스타일 */
    .basic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 무한 진행 상태 예제 스타일 */
    .indeterminate-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 동적 진행 상태 예제 스타일 */
    .dynamic-example {
        margin: 20px 0;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        .basic-example,
        .indeterminate-example,
        .dynamic-example {
            margin: 10px 0;
            padding: 10px;
        }
    }
</style>

5. 스타일링 예제

<style>
    /* 기본 진행 상태 스타일 */
    progress {
        width: 100%;
        height: 20px;
        margin: 10px 0;
    }

    /* 진행 상태 색상 스타일 */
    progress::-webkit-progress-bar {
        background: #f0f0f0;
        border-radius: 4px;
    }

    progress::-webkit-progress-value {
        background: #4CAF50;
        border-radius: 4px;
    }

    progress::-moz-progress-bar {
        background: #4CAF50;
        border-radius: 4px;
    }

    /* 반응형 스타일 */
    @media (max-width: 768px) {
        progress {
            height: 15px;
        }
    }
</style>

6. 성능 최적화 팁

• 필요한 경우에만 progress 태그를 사용합니다.
• 적절한 업데이트 주기를 설정합니다.
• 불필요한 속성을 사용하지 않습니다.
• 접근성을 고려한 마크업을 작성합니다.

7. 검증 및 테스트

progress 태그가 올바르게 사용되었는지 확인하는 방법:

• W3C 마크업 검증 서비스 사용
• 다양한 브라우저에서 테스트
• 진행 상태 렌더링 테스트
• 성능 테스트
• 접근성 검사 도구 사용