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
Documentation and examples for badges, our small count and labeling component.
getbootstrap.com
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
Group a series of buttons together on a single line or stack them in a vertical column.
getbootstrap.com
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">×</span></button></div>
aira-hidden은 항상 등장할 필요가 없다는 의미이다. 스크린 리더는 × 뭔지 모른다. 그래서 <span>태그는 숨길 수 있다. 그 대신 aria-label요소를 버튼에 추가할 수 있다. 그러면 아마 스크린 리더는 aira-label="Close"를 읽을 수 있다. aira는 접근성이나 스크린 리더와 관련있다. <span aria-hidden="true">×</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">×</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">×</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">×</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
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
'📦 CSS > CSS Framework' 카테고리의 다른 글
| [CSS Framework] Grid Utilities (0) | 2022.12.23 |
|---|---|
| [CSS Framework] Bootstrap | Grid System (0) | 2022.12.12 |
| [CSS Framework] Bootstrap | Typography | Utilities (0) | 2022.12.10 |
| [CSS Framework] Bootstrap | Button (0) | 2022.12.10 |
| [CSS Framework] Bootstrap | Container (1) | 2022.12.08 |
