[CSS Framework] Bootstrap | Badges | Button Group | Alert

Badges

카운트나 일종의 레이블을 보여주기 위해 사용된다. 그 용도가 전부라서 헤딩이나 버튼을 넣어 조합해 사용할 수 있다. <span>과 class=badge 그리고 색상으로 구성된다. 

 

badge 클래스는 구문에 들어가 있는 요소에 따라 크기가  달라진다. 

    <h2 class="display-4">Buttons<span class="badge badge-success">7</span></h2>

 

 

badge의 장점은 내비게이션 바에 사용할 수 있다. 경고가 필요하거나 보여줘야 할 버튼이 있는 경우에 편리하다. 알림이나 변경 사항의 수를 알려줄때도 마찬가지이다. 

    <button class="btn btn-primary">Updates<span class="badge badge-light">7</span></button>

badge-pill

테두리 모깎는 기능

    <h2 class="display-4">Buttons<span class="badge badge-success badge badge-pill">7</span></h2>

 

 

https://getbootstrap.com/docs/5.2/components/badge/

Badges

---

Button Group

비교적 단순한 버튼 그룹 구성요소이다. 여러 개의 버튼을 하나의 그룹으로 묶는 기능이다. 흔하게 사용되기도 한다. 또한 더 보기 좋은 선택지를 만들 때 쓸 수 있다. 

1개 이상의 버튼이 있을 경우 버튼을 그룹으로 묶어서 컨테이너나 상위 요소에 btn-group을 부여하면 상당히 많은 것을 바꿀 수 있다.

    <div class="btn-group">
        <button class="btn btn-warning">One</button>
        <button class="btn btn-warning">Two</button>
        <button class="btn btn-warning">Three</button>
    </div>

접근성과 관련해서 꼭 알아햐 할 중요한게 있다. 만약 버튼 그룹을 단순하게 3개 대신 예쁜 라디오 버튼을 만들기 위해 사용할 생각이면 서로 연관된 버튼 중 하나만 선택하거나 이 3개의 버튼이 서로 다른 선택지일 경우 상위 요소에 role="group"을 부여해야 한다. 그래야 스크린 리더에게 이게 버튼 그룹이라는 걸 보여주기 때문이다. \

 

btn-lg, btn-sm을 이용해 크기 변경도 가능하다. 

 

https://getbootstrap.com/docs/5.2/components/button-group/

Button group

---

Alerts (경고)

경고는 사용자에게 일종의 피드백을 준다. 어떤 행위를 하거나 페이지가 로드될 때 저장되었다거나 아니면 저장에 실패했다거나 권한이 없다거나 다시 돌아와서 환영한다거나 로그아웃되었다는 내용등을 다양하게 나타낼 수 있다. 중요한건 경고를 주는 것이 주요 목표이긴 하다. 만드는 방법은 버튼과 흡사하다. 

 

<div> 태그에 기본 클래스가 되는 class=alert 그리고 색상 종류가 들어가는데 종류는 </div>이다. 

 

<h3>Alert</h3>
    <div class="alert alert-danger">Danger! You are about to end the world as we know it!</div>

이것 또한 색상 변경 가능하다! 

 <h3>Alert</h3>
    <div class="alert alert-danger"> <h4 class="alert">Oh No!</h4>Danger! You are about to end the world as we know it!</div>

heading역시 추가할 수 있다. 

 

Dismissing

X버튼을 경고 창에 넣을 수 있다. 눌러서 경고창을 없앨 수 있다. 다만, 보통은 X를 사용하는데 이 X는 문자가 아니라 닫기 아이콘의 X를 말한다. 대부분은 엔티티 코드를 사용한다. 

<div class="alert alert-danger"> <h4 class="alert">Oh No!</h4>Danger! You are about to end the world as we know it!
    <button aria-hidden="Close"><span aria-hidden="true">&times;</span></button></div>

 

aira-hidden은 항상 등장할 필요가 없다는 의미이다. 스크린 리더는 &times; 뭔지 모른다. 그래서 <span>태그는 숨길 수 있다. 그 대신  aria-label요소를 버튼에 추가할 수 있다. 그러면 아마 스크린 리더는 aira-label="Close"를 읽을 수 있다.  aira는 접근성이나 스크린 리더와 관련있다. <span aria-hidden="true">&times;</span>은 스크린 리더에게 숨기고 이 close 레이블을 쓰라는 의미이다. 

    <h3>Alert</h3>
    <div class="alert alert-danger"> <h4 class="alert">Oh No!</h4>Danger! You are about to end the world as we know it!
    <button aria-hidden="Close" class="close">
        <span aria-hidden="true">&times;</span></button>
    </div>

X버튼의 모양과 이동이 바뀌었다. 그러나 X버튼을 누르면 아직은 닫히지 않는다. 작동하게하기 위해서 data-dismiss 속성을 추가하여 alert에 설정해야한다. 

 

    <h3>Alert</h3>
    <div class="alert alert-danger"> <h4 class="alert">Oh No!</h4>Danger! You are about to end the world as we know it!
    <button aria-hidden="Close" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span></button>
    </div>

X버튼을 누르면 경고창은 사라진다.F5를 누르면 다시 생긴다. 

alert-dismissible fade show

alert-dismissible fade show클래스를 사용하면 X가 우측 상단 구석으로 옮겨진다. 그리고 X버튼을 누르면 바로 사라지지 않고 서서히 사라진다. 

<h3>Alert</h3>
    <div class="alert alert-danger alert-dismissible fade show"> <h4 class="alert">Oh No!</h4>Danger! You are about to end the world as we know it!
    <button aria-hidden="Close" class="close" data-dismiss="alert">
        <span aria-hidden="true">&times;</span></button>
    </div>

위의 동영상은 alert클래스가 부여된 <div>안의 <button>에 중첩된 경고창이 사라지는 것이다.

 

role=alert

role=alert는 접근성에 중요하다. 스크린 리더에게 이건 중요한 정보라는 걸 표시해준다. 보통은 경고창에 페이지 로딩이 끝나고 페이지에 등장한다. 무언가를 하면 경고창이 나타난다는 거다. 그러니까 화면에 새로운 뭔가가 떴다는 것을 육안으로 식별하기 쉽다. 그러나 대부분의 스크린 리더는 변하거나 방금 뜬 콘텐츠를 읽지 않는다. 위의 코드처럼 role="alert"추가하지 않으면 말이다. 

경고창이나 기타 작동 방식이 헷갈리면 data-dismiss="alert"를 기억하면된다. 

 

※ JS가 없을 경우 부트스트랩의 JS는 아예 작동하지 않는다. 

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

부트스트랩 JS파일과 두 종속 파일 덕분에 작동하는 거다. 

 

∴ 스크립트를 포함하지 않은 상태로는 닫을 수 있는 경고창을 만들 수 없다. 

 

 

 

 

 

 

 

 

https://getbootstrap.com/docs/5.2/components/alerts/

Alerts