HTML 코드
<div class="toast"><span class="dot"></span>저장되었습니다<button aria-label="닫기">×</button></div>
<style>
.toast{position:fixed;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;background:var(--fg);color:var(--bg);border-radius:10px;box-shadow:var(--shadow);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.toast button{border:0;background:none;color:inherit;opacity:.6;font-size:18px;cursor:pointer}
</style>AI에게 이렇게 요청하세요
저장 성공 시 우측 하단에 3초간 토스트 메시지 띄워줘
<div class="toast"><span class="dot"></span>저장되었습니다<button aria-label="닫기">×</button></div>
<style>
.toast{position:fixed;right:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;background:var(--fg);color:var(--bg);border-radius:10px;box-shadow:var(--shadow);font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.toast button{border:0;background:none;color:inherit;opacity:.6;font-size:18px;cursor:pointer}
</style>언제 쓰나
저장·복사·전송처럼 작업 결과를 가볍게 알려줄 때. 사용자가 하던 일을 멈추지 않아도 되고, 몇 초 뒤 저절로 사라집니다.
비슷한 것과 차이
- 알림 배너: 화면 상단에 고정되어 사용자가 닫을 때까지 남음 → 중요한 공지용
- 모달: 화면을 막고 응답을 요구함 → 확인·선택이 꼭 필요할 때