7-1. 토스트
■ 토스트
토스트(toast) 요소는 어떤 이벤트가 발생했을 때 화면에 표시되는 알림 상자와 같은 것을 말합니다.
토스트를 만들려면 클래스 .toast를 사용하고, 해당 요소 내부에 클래스 .toast-header와 .toast-body를 추가합니다.
<div class="container mt-3">
<h3>토스트(Toast)</h3>
<button type="button" class="btn btn-primary" id="toastbtn">토스트 보기</button>
<div class="toast">
<div class="toast-header">
<strong class="me-auto">토스트 글 제목</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>
<div class="toast-body">
<p>토스트 내용입니다.</p>
</div>
</div>
</div>
<script>
document.getElementById("toastbtn").onclick = function() {
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function(toastEl) {
return new bootstrap.Toast(toastEl)
})
toastList.forEach(toast => toast.show())
}
</script>
ex7-1.html의 실행 결과
