CSS와 JavaScript를 활용하면 별도의 라이브러리 없이도 화면 하단에 잠시 나타났다가 자동으로 사라지는 스낵바(Snackbar) 또는 토스트(Toast) 알림 메시지를 손쉽게 구현할 수 있습니다. 아래 예제 코드를 통해 그 과정을 단계별로 살펴보겠습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.snackText {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: rgb(110, 26, 106);
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
.snackBtn {
border: none;
padding: 10px;
font-size: 18px;
background-color: rgb(92, 0, 128);
color: white;
}
.snackText.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@keyframes fadein {
from {
bottom: 0;
opacity: 0;
}
to {
bottom: 30px;
opacity: 1;
}
}
@keyframes fadeout {
from {
bottom: 30px;
opacity: 1;
}
to {
bottom: 0;
opacity: 0;
}
}
</style>
</head>
<body>
<h1>Snackbar / Toast Example</h1>
<button class="snackBtn">Show Snackbar</button>
<h2>Click on the above button to see snackbar message</h2>
<div class="snackText">Some text some message..</div>
<script>
document.querySelector(".snackBtn").addEventListener("click", showSnackBar);
function showSnackBar() {
var x = document.querySelector(".snackText");
x.className += " show";
setTimeout(function() {
x.className = x.className.replace("show", "");
}, 3000);
}
</script>
</body>
</html>코드 동작 원리
CSS 스타일링
- .snackText : 기본값이
visibility: hidden으로 설정되어 있어 평소에는 화면에 보이지 않습니다.position: fixed와left: 50%,margin-left: -125px의 조합으로 스낵바가 항상 화면 하단 중앙에 위치하게 됩니다. - .snackText.show : 'show' 클래스가 추가되면
visibility: visible로 바뀌면서 스낵바가 화면에 나타나고,fadein(0.5초)과fadeout(2.5초 지연 후 0.5초간 실행) 두 가지 키프레임 애니메이션이 차례로 적용됩니다. - @keyframes :
fadein은 불투명도 0에서 1로 전환되며 아래에서 위로 떠오르는 등장 효과를,fadeout은 반대로 위에서 아래로 내려가며 서서히 사라지는 종료 효과를 담당합니다.
JavaScript 로직
버튼이 클릭되면 showSnackBar() 함수가 호출됩니다. 이 함수는 스낵바 요소에 'show' 클래스를 추가해 알림을 화면에 띄운 뒤, setTimeout()을 사용해 3초 후에 해당 클래스를 제거함으로써 스낵바가 자동으로 사라지도록 처리합니다.
실행 결과
위 코드를 실행하면 다음과 같은 초기 화면이 출력됩니다.
'Show Snackbar' 버튼을 클릭하면 아래 이미지처럼 화면 하단 중앙에 스낵바 메시지가 나타났다가, 잠시 후 자동으로 사라지는 것을 확인할 수 있습니다.
