728x90
안녕하세요.
이번 시간에는 Bootstrap에 있는 토스트(Toast) 기능을 사용해보겠습니다.
1. 토스트(Toast) 기능이란?
토스트(Toast) 기능은 사용자에게 메시지나 알림을 간단하게 표시하는 기능입니다.
일반적으로 페이지의 상단이나 하단에서 작은 팝업 창으로 나타나며, 일시적인 정보나 알림을 표시하는 데 사용됩니다.
2. Bootstrap 불러오기
이 예제에서는 CDN으로 Bootstrap을 불러오겠습니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
3. 전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body style="padding: 20px; text-align: center;">
<button type="button" class="btn btn-primary" id="liveToastBtn">토스트 보여주기</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="image/logo_tstory.png" style="width: 15px;" class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>시간 정보</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
안녕하세요. 토스트 메시지.
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
const toastTrigger = document.getElementById('liveToastBtn');
const toastLiveExample = document.getElementById('liveToast');
if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
toastTrigger.addEventListener('click', () => {
toastBootstrap.show();
})
}
</script>
</body>
</html>
4. 실행 결과
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] @keyframes 활용 마우스 클릭 이벤트 (0) | 2024.04.20 |
|---|---|
| [HTML/CSS] Tailwind로 유효성 검사 기능이 들어한 회원가입 만들기 (0) | 2024.04.15 |
| [HTML/CSS] 레이아웃 만들기 (1) | 2024.03.16 |
| [HTML/CSS] Bootstrap으로 아코디언 만들기 (0) | 2024.03.12 |
| [HTML/CSS] CTA 만들기 (0) | 2024.03.07 |
