[basic] BS4 - Badge (BS배지)

목차

1. Badge 소개
2. Badge Color (색깔)
3. Badge pill (알약배지 = 모서리가 둥근 배지)
4. badge 예제 - 연회색 배지

 

Badge 소개

 

모든 콘텐츠에 추가 정보 추가하는 데 사용.

(예) 새글표시, 새글개수표시

 

---

1. 요소 안 span 태그에 (.badge) 클래스 적용해 생성.

 

.badge { 

    display: inline-block;

    padding: .25em .4em;

    font-size: 75%;

    font-weight: 700;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    vertical-align: baseline;

    border-radius: .25rem;

    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

 

---

2. 부모요소 크기에 따라 크기가 자동조절됨.

 

<div class="container">

  <h1>Homzzang.com <span class="badge badge-secondary">New</span></h1>

  <h2>Homzzang.com <span class="badge badge-secondary">New</span></h2>

  <h3>Homzzang.com <span class="badge badge-secondary">New</span></h3>

  <h4>Homzzang.com <span class="badge badge-secondary">New</span></h4>

  <h5>Homzzang.com <span class="badge badge-secondary">New</span></h5>

  <h6>Homzzang.com <span class="badge badge-secondary">New</span></h6>

</div>

 

결과보기 

 

Badge Color (색깔)

 

<span class="badge badge-primary">Primary (파란색)</span>

<span class="badge badge-secondary">Secondary (진회색)</span>

<span class="badge badge-success">Success (녹색)</span>

<span class="badge badge-danger">Danger (빨간색)</span>

<span class="badge badge-warning">Warning (진노랑색)</span>

<span class="badge badge-info">Info (청록색)</span>

<span class="badge badge-light">Light (연회색)</span>

<span class="badge badge-dark">Dark (검정색)</span>

 

결과보기

 

Badge pill (알약배지 = 모서리가 둥근 배지)

<span class="badge badge-pill badge-primary">Primary</span>

<span class="badge badge-pill badge-secondary">Secondary</span>

<span class="badge badge-pill badge-success">Success</span>

<span class="badge badge-pill badge-danger">Danger</span>

<span class="badge badge-pill badge-warning">Warning</span>

<span class="badge badge-pill badge-info">Info</span>

<span class="badge badge-pill badge-light">Light</span>

<span class="badge badge-pill badge-dark">Dark</span>

 

결과보기

---

 

.badge-pill {

    padding-right: .6em;

    padding-left: .6em;

    border-radius: 10rem;

}

 

 

badge 예제 - 연회색 배지

 

<button type="button" class="btn btn-primary">

  쪽지 <span class="badge badge-light">4</span>

</button>

 

결과보기