토스트 메시지

Coddy HTML 여정의 JavaScript 실전 섹션에 포함된 레슨. 27개 중 8번째.

toast message는 사용자에게 피드백을 제공하기 위해 화면에 잠시 나타나는 작은 알림입니다. 일반적으로 몇 초 후에 서서히 사라집니다.

기본 HTML 구조를 만드세요:

<div class="container">
    <button id="showToast">Show Toast</button>
    <div id="toast" class="hidden">This is a toast message!</div>
</div>

toast를 스타일링하기 위해 CSS를 추가합니다. 두 개의 클래스를 사용합니다. .hidden은 toast를 보이지 않게 유지하고, .show는 toast가 나타나게 합니다.

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    background-color: #333;
    color: white;
    padding: 15px 25px;
}
.show {
    opacity: 1;
}
.hidden {
    display: none;
}

이제 토스트를 표시하고 숨기도록 JavaScript를 추가하세요:

const showToastBtn = document.getElementById('showToast');
const toast = document.getElementById('toast');

showToastBtn.addEventListener('click', function() {
    toast.classList.remove('hidden');
    toast.classList.add('show');

    setTimeout(function() {
        toast.classList.remove('show');
        toast.classList.add('hidden');
    }, 3000);
});

이 코드는 button을 클릭하면 toast를 표시하고, 3초 후 자동으로 숨깁니다.

챌린지

쉬움

토스트가 보기 좋고 나타나고 사라질 준비가 되도록 만드는 것이 목표입니다.

position: fixed와 bottom 및 left를 사용하여 페이지의 center at the bottom에 토스트 메시지를 배치하세요.
background color를 지정하고 읽기 쉽도록 text color를 변경하세요.
메시지가 답답해 보이지 않도록 padding을 추가하세요.
모서리가 부드럽게 보이도록 만드세요.
기본적으로 숨겨지도록 opacity to 0으로 설정하세요(JavaScript가 표시하기 전).

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Toast Notification Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Profile Settings</h1>
  </header>

  <main>
    <p>Update your profile and save changes. A toast message will confirm your action.</p>
    <button id="showToast">Save Changes</button>
  </main>

  <!-- 토스트 -->
  <div id="toast" class="toast hidden">✅Your changes have been saved!</div>

  <script src="script.js"></script>
</body>
</html>