[basic] BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색

목차

1. Text Color (글자색) - 일반 글자색
2. Text Color (글자색) - 링크 글자색
3. Text Color (글자색) - 투명도 반영 글자색
4. Background Color (배경색)

Text Color (글자색)

Text Color (글자색) - 일반 글자색

 

<div class="container">

  <p class="text-muted">연회색 (묵음・음소거 의미)</p>

  <p class="text-primary">연파랑 (중요 의미)</p>

  <p class="text-success">연녹색 (성공 의미)</p>

  <p class="text-info">연연파랑 (정보 의미)</p>

  <p class="text-warning">연주황 (경고 의미)</p>

  <p class="text-danger">연빨강 (위험 의미)</p>

  <p class="text-secondary">연회색 (덜 중요 의미)</p>

  <p class="text-dark">진회색</p>

  <p class="text-body">연검정 (기본 body 글자색)</p>

  <p class="text-light">연연회색 (흰색배경일 때).</p>

  <p class="text-white">흰색 (흰색배경일 때).</p>

</div>

 

결과보기

---

Text Color (글자색) - 링크 글자색

 

<div class="container">

  <a href="#" class="text-muted">Muted link.</a>

  <a href="#" class="text-primary">Primary link.</a>

  <a href="#" class="text-success">Success link.</a>

  <a href="#" class="text-info">Info link.</a>

  <a href="#" class="text-warning">Warning link.</a>

  <a href="#" class="text-danger">Danger link.</a>

  <a href="#" class="text-secondary">Secondary link.</a>

  <a href="#" class="text-dark">Dark grey link.</a>

  <a href="#" class="text-body">Body/black link.</a>

  <a href="#" class="text-light">Light grey link.</a>

</div>

 

결과보기

---

Text Color (글자색) - 투명도 반영 글자색

 

<div class="container">

  <p class="text-black-50">50% 투명도 가진 검은색 글씨 (흰색배경일 때)</p>

  <p class="text-white-50 bg-dark">50% 투명도 가진 흰색 글씨 (흰색배경일 때)</p>

</div>

 

Background Color (배경색)

 

<div class="container">

  <p class="bg-primary text-white">파란색 (중요)</p>

  <p class="bg-success text-white">녹색 (성공)</p>

  <p class="bg-info text-white">파랑 (정보)</p>

  <p class="bg-warning text-white">주황 (경고)</p>

  <p class="bg-danger text-white">빨강 (위험)</p>

  <p class="bg-secondary text-white">회색 (덜 중요)</p>

  <p class="bg-dark text-white">진회색</p>

  <p class="bg-light text-dark">연회색</p>

</div> 

 

결과보기