2-3. 색상
■ 글자 색상
부트스트랩에서 사용되는 텍스트 색상 클래스는 다음과 같습니다.
.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-light
<div class="container mt-3">
<h3>글자 색상</h3>
<div class="row bg-dark p-3">
<p class="col text-primary">안녕하세요.</p>
<p class="col text-secondary">안녕하세요.</p>
<p class="col text-success">안녕하세요.</p>
<p class="col text-info">안녕하세요.</p>
<p class="col text-warning">안녕하세요.</p>
<p class="col text-danger">안녕하세요.</p>
<p class="col text-white">안녕하세요.</p>
<p class="col text-light">안녕하세요.</p>
</div>
<div class="row bg-light p-3">
<p class="col text-dark">안녕하세요.</p>
<p class="col text-muted">안녕하세요.</p>
</div>
</div>
ex2-5.html의 실행 결과
■ 배경 색상
부트스트랩에서 사용되는 배경 색상 클래스는 다음과 같습니다.
.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, .bg-light.
<div class="container mt-3">
<h3>글자 색상</h3>
<div class="row bg-dark p-3">
<p class="col text-primary">안녕하세요.</p>
<p class="col text-secondary">안녕하세요.</p>
<p class="col text-success">안녕하세요.</p>
<p class="col text-info">안녕하세요.</p>
<p class="col text-warning">안녕하세요.</p>
<p class="col text-danger">안녕하세요.</p>
<p class="col text-white">안녕하세요.</p>
<p class="col text-light">안녕하세요.</p>
</div>
<div class="row bg-light p-3">
<p class="col text-dark">안녕하세요.</p>
<p class="col text-muted">안녕하세요.</p>
</div>
</div>
ex2-6.html의 실행 결과
■ 글자 배경과 색상 설정
글자 색상에 맞는 글자 배경을 자동으로 설정해주는 클래스는 다음과 같습니다.
.text-bg-primary, .text-bg-success, .text-bg-info, .text-bg-warning, .text-bg-danger, .text-bg-secondary, .text-bg-dark, .text-bg-light.
<div class="container mt-3">
<h3>글자 배경과 색상 설정</h3>
<div class="p-3 border">
<p class="text-bg-primary">안녕하세요.</p>
<p class="text-bg-secondary">안녕하세요.</p>
<p class="text-bg-success">안녕하세요.</p>
<p class="text-bg-info">안녕하세요.</p>
<p class="text-bg-warning">안녕하세요.</p>
<p class="text-bg-danger">안녕하세요.</p>
<p class="text-bg-dark">안녕하세요.</p>
<p class="text-bg-white">안녕하세요.</p>
<p class="text-bg-light">안녕하세요.</p>
<p class="text-bg-muted">안녕하세요.</p>
</div>
</div>
ex2-7.html의 실행 결과
