4-5. 프로그레스 바
■ 프로그레스 바(progress bar)
프로그레스 바는 사용자가 프로세스에서 얼마나 진행했는지 보여주는 데 사용됩니다.
기본 진행률 막대를 만들려면 .progress 컨테이너 요소에 클래스를 추가하고 .progress-bar 자식 요소에 클래스를 추가합니다.
그리고 CSS width 속성을 이용하여 진행률 막대의 너비를 설정합니다.
프로그레스 바(Progress Bar)
ex4-15.html
<div class="container mt-3">
<h3>경고</h3>
<div class="progress my-2">
<div class="progress-bar" style="width:10%">10%</div>
</div>
<div class="progress my-2">
<div class="progress-bar text-bg-secondary" style="width:20%">20%</div>
</div>
<div class="progress my-2">
<div class="progress-bar text-bg-danger" style="width:30%">30%</div>
</div>
<div class="progress my-2">
<div class="progress-bar text-bg-info" style="width:40%">40%</div>
</div>
</div>
ex4-15.html의 실행 결과
