어떻게 만들까요: Snackbar / Toast

CSS와 JavaScript를 사용하여 Snackbar/Toast를 만드는 방법을 배웁니다.

Snackbar 생성

第一步 - HTML 추가:

<!-- Snackbar 열기 버튼 사용 -->
<button onclick="myFunction()">Show Snackbar</button>
<!-- 실제 snackbar -->
<div id="snackbar">Some text some message..</div>

第二步 - CSS 추가:

snackbar의 스타일을 설정하고 애니메이션을 추가하십시오:

/* snackbar - 화면 하단 중앙에 위치 */
#snackbar {
  visibility: hidden; /* 기본 숨기기, 클릭 시 보이게 */
  min-width: 250px; /* 기본 최소 너비 설정 */
  margin-left: -125px; /* min-width 값의 반으로 나누기 */
  background-color: #333; /* 검은색 배경 색상 */
  color: #fff; /* 흰색 텍스트 색상 */
  text-align: center; /* 텍스트 정중앙 배치 */
  border-radius: 2px; /* 원角 경계 */
  padding: 16px; /* 내쪽 여백 */
  position: fixed; /* 화면 상단에 고정됩니다 */
  z-index: 1; /* 필요하다면 z-index 추가 */
  left: 50%; /* snackbar를 가운데에 위치시킵니다 */
  bottom: 30px; /* 하단 30px 떨어져 있습니다 */
}
/* 버튼 클릭 시 snackbar를 표시합니다 (JavaScript로 추가된 클래스를 사용합니다) */
#snackbar.show {
  visibility: visible; /* snackbar를 표시합니다 */
  /* 애니메이션 추가: snackbar를 0.5초 동안 진입 및 퇴장시킵니다. 그러나 퇴장 과정을 2.5초로 지연합니다. */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* snackbar의 애니메이션을 애니메이션으로 만듭니다 */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

제3단계 - JavaScript 추가:

JavaScript를 통해 버튼 클릭으로 snackbar 컨테이너에 "show" 클래스를 추가합니다:

function myFunction() {
  // snackbar DIV를 가져옵니다
  var x = document.getElementById("snackbar");
  // DIV에 "show" 클래스를 추가합니다
  x.className = "show";
  // 3초 후, DIV에서 "show" 클래스를 제거합니다
  setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}

직접 시험해보세요