문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Bootstrap Progress Bars======
<WRAP left notice 80%>
  * description : Bootstrap Progress Bars
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-25
</WRAP>
<WRAP clear></WRAP>
\\
=====Basic Progress Bar=====
프로그레스 바(Progress Bar, 진행률 표시 막대)를 사용하여 사용자가 프로세스를 얼마나 진행하고 있는지 보여줄 수 있습니다.\\
\\
Bootstrap은 여러 유형의 프로그레스 바를 제공합니다.\\
\\
기본 프로그레스 바를 만들기 위해, ''%%<div>%%'' 요소에 ''%%.progress%%'' 클래스를 추가합니다.\\
Bootstrap의 기본 프로그레스 바는 다음과 같습니다.\\
{{:wiki:bootstrap:bootstrap_note:basic-progress-bar.png?400|}}\\
\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Basic Progress Bar</h2>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                <span class="sr-only">70% Complete</span>
            </div>
        </div>
    </div>

</body>
</HTML>
\\
**참고:**\\
Internet Explorer 9 및 이전 버전에서는 프로그레스 바가 지원되지 않습니다 (CSS3 트랜지션 및 애니메이션을 사용하여 일부 효과를 얻기 때문에).\\

**참고:**\\ 
스크린 리더를 사용하는 사람들의 접근성을 높이려면 aria- * 속성을 포함해야 합니다.\\
\\
=====Progress Bar With Label=====
프로그레스 바에서 ''%%.sr-only%%'' 클래스를 제거하여 백분율을 표시합니다:\\
\\
{{:wiki:bootstrap:bootstrap_note:progressbarwithlabel.png?400|}}\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Progress Bar With Label</h2>
        <div class="progress">
            <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70%
            </div>
        </div>
    </div>

</body>
</HTML>
\\
=====Colored Progress Bar=====
컨텍스추얼 클래스는 "색상을 통한 의미"를 제공하는 데 사용됩니다.\\
\\
프로그레스 바와 함께 사용할 수 있는 컨텍스트추얼 클래스는 다음과 같습니다.\\
  * ''%%.progress-bar-success%%''
  * ''%%.progress-bar-info%%''
  * ''%%.progress-bar-warning%%''
  * ''%%.progress-bar-danger%%''
\\
{{:wiki:bootstrap:bootstrap_note:colored-progress-bar.png?400|}}\\
다음 예제는 다양한 컨텍스추얼 클래스를 사용하여 프로그레스 바를 만드는 방법을 보여줍니다.\\
\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Colored Progress Bars</h2>
        <p>The contextual classes colors the progress bars:</p>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                40% Complete (success)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                50% Complete (info)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                60% Complete (warning)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                70% Complete (danger)
            </div>
        </div>
    </div>

</body>
</HTML>
\\
=====Striped Progress Bar=====
프로그레스 바에 스트라이프(줄무늬)를 추가하기 위해 ''%%.progress-bar-striped%%'' 클래스를 추가합니다.\\
{{:wiki:bootstrap:bootstrap_note:strioped-colored-progress-bar.png?400|}}
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Striped Colored Progress Bars</h2>
        <p>The .progress-bar-striped class adds stripes to the progress bars:</p>
        <div class="progress">
            <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                40% Complete (success)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
                50% Complete (info)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:60%">
                60% Complete (warning)
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:70%">
                70% Complete (danger)
            </div>
        </div>
    </div>

</body>
</HTML>
\\
=====Animated Progress Bar=====
프로그레스 바에 애니메이션을 적용하기 위해 ''%%.active%%'' 클래스를 추가합니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Animated Progress Bar</h2>
        <p>The .active class animates the progress bar:</p>
        <div class="progress">
            <div class="progress-bar progress-bar-striped active" role=" progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                40%
            </div>
        </div>
    </div>

</body>
</HTML>
\\
=====Stacked Progress Bars=====
프로그레스 바는 또한 누적될 수 있습니다.\\
{{:wiki:bootstrap:bootstrap_note:stacked-progress-bar.png?400|}}\\
여러 개의 프로그레스 바를 동일한 ''%%><div class="progress">%%''에 배치하여 누적 프로그레스 바를 만듭니다.\\
====예제====
<HTML>
<body>

    <div class="container">
        <h2>Stacked Progress Bars</h2>
        <p>
            Create a stacked progress bar by placing multiple bars into the same div with class .progress:
        </p>
        <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
                Free Space
            </div>
            <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
                Warning
            </div>
            <div class="progress-bar progress-bar-danger" rold="progressbar" style="width:20%">
                Danger
            </div>
        </div>
    </div>

</body>
</HTML>








{{tag>오션 Bootstrap Progress Bars}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
