Bootstrap - Toasts: 초보자를 위한 친절한 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 Bootstrap Toasts의 fascinling한 세상으로 뛰어들어 볼 거예요. Toasts에 대해 들어본 적이 없으신다면 걱정 마세요 - 이 튜토리얼이 끝나면 프로처럼 Toast를 만들 수 있을 거예요! ?

Bootstrap - Toasts

Bootstrap Toasts는 무엇인가요?

들어가기 전에 Toasts가 무엇인지 이야기해 보겠습니다. 모바일 앱을 사용하다가 갑자기 화면 아래에 작은 알림이 뜨는 것을 상상해 보세요. 그게 바로 웹 개발에서 Toasts입니다! Toasts는 모바일 기기에서 볼 수 있는 푸시 알림을 흉내내는 가벼운 알림입니다.

기본 Toast

기본 Toast부터 시작해 보겠습니다. 코드는 다음과 같습니다:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11분 전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
안녕하세요, 세상! 이는 Toast 메시지입니다.
</div>
</div>

이를 해부해 보면:

외부 div에 class toast는 우리의 주요 컨테이너입니다.
내부에는 toast-header와 toast-body가 있습니다.
헤더는 일반적으로 이미지, 제목, 타임스탬프, 그리고 닫기 버튼을 포함합니다.
바디는 우리의 주요 메시지가 들어갑니다.

라이브 Toast

이제 Toast를 활성화해 보겠습니다! 이를 위해 약간의 JavaScript가 필요합니다:

<button type="button" class="btn btn-primary" id="liveToastBtn">라이브 Toast 보이기</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="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11분 전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
안녕하세요, 세상! 이는 라이브 Toast 메시지입니다.
</div>
</div>
</div>

<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>

여기서 우리는 Toast를 보여주는 버튼을 추가했습니다. 하단의 JavaScript는 클릭 이벤트를 듣고 Toast를 보여줍니다.

반투명 Toast

Toast를 약간 투명하게 만들고 싶다면 bg-light 클래스를 추가하세요:

<div class="toast bg-light" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>11분 전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
안녕하세요, 세상! 이는 반투명 Toast입니다.
</div>
</div>

Toasts 쌓기

여러 Toast를 보여주고 싶다면? 문제ありません! Bootstrap은 Toasts를 깔끔하게 쌓아줍니다:

<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." 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 class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="..." class="rounded me-2" alt="...">
<strong class="me-auto">Bootstrap</strong>
<small>2초 전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
주의하세요, Toast는 자동으로 쌓입니다.
</div>
</div>
</div>

커스텀 콘텐츠

Toasts는 텍스트에 국한되지 않습니다. 원하는 HTML 콘텐츠를 추가할 수 있습니다:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
안녕하세요, 세상! 이는 Toast 메시지입니다.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">작업 수행</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">닫기</button>
</div>
</div>
</div>

여기서 우리는 Toast 바디에 버튼을 추가했습니다. 창의적으로 만들어 보세요!

색상 스키마

Toasts는 다양한 색상으로 제공되어 사이트의 테마나 메시지 유형에 맞출 수 있습니다:

<div class="toast bg-primary text-white" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11분 전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
안녕하세요, 세상! 이는 주요 Toast입니다.
</div>
</div>

bg-primary을 bg-success, bg-danger, bg-warning 등으로 바꿀 수 있습니다.

Toasts의 위치

Toasts는 페이지 어디에나 배치할 수 있습니다. 여기서는 상단 오른쪽 모서리에 배치하는 방법을 보여드리겠습니다:

<div aria-live="polite" aria-atomic="true" class="position-relative">
<div class="toast-container position-absolute top-0 end-0 p-3">
<!-- 여기에 Toast를 넣으세요 -->
</div>
</div>

접근성

접근성은 매우 중요합니다! 항상 role="alert"과 aria-live="assertive" 속성을 포함하여 화면 독자가 Toasts를 올바르게 알림할 수 있도록 해야 합니다.

이 표는 Toast 메서드의 주요 내용을 요약합니다:

메서드	설명
show()	Toast를 보여줍니다
hide()	Toast를 숨깁니다
dispose()	Toast를 숨기고 DOM에서 제거합니다

이제 Toast 마스터가 되셨습니다. 연습이 완벽을 만드는 것을 기억하세요, 따라서 다음 프로젝트에 이를 도입해 보세요. 행복한 코딩! ?

Credits: Image by storyset