알림 배너 Alert banner
페이지 상단 등에 고정되어 중요한 상태·공지를 알리는 띠
다른 이름: 공지 배너, 경고 배너, Alert, Notice bar, Announcement bar
HTML 코드
<div class="alert info"><b>ℹ️</b><span>오늘 밤 12시~2시 서버 점검이 있습니다.</span><button>×</button></div>
<div class="alert error"><b>⛔</b><span>결제에 실패했습니다. 카드 정보를 확인해주세요.</span><button>×</button></div>
<style>
.alert{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin-bottom:10px;border:1px solid}
.alert span{flex:1}
.alert button{border:0;background:none;color:inherit;font-size:18px;cursor:pointer;opacity:.6}
.info{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.error{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 10%,var(--bg))}
</style>AI에게 이렇게 요청하세요
결제가 실패하면 폼 위에 왼쪽 경고 아이콘·오류 내용 한 줄·오른쪽 닫기 버튼이 있고 닫기 전까지 유지되는 빨간 알림 배너 보여줘
<div class="alert info"><b>ℹ️</b><span>오늘 밤 12시~2시 서버 점검이 있습니다.</span><button>×</button></div>
<div class="alert error"><b>⛔</b><span>결제에 실패했습니다. 카드 정보를 확인해주세요.</span><button>×</button></div>
<style>
.alert{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin-bottom:10px;border:1px solid}
.alert span{flex:1}
.alert button{border:0;background:none;color:inherit;font-size:18px;cursor:pointer;opacity:.6}
.info{border-color:color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--bg))}
.error{border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 10%,var(--bg))}
</style>언제 쓰나
점검 공지, 결제 실패, 계정 인증 필요처럼 사용자가 확인할 때까지 남아 있어야 하는 알림.
비슷한 것과 차이
- 토스트: 몇 초 뒤 저절로 사라지는 가벼운 알림
- 모달: 화면을 막고 반드시 응답하게 함
- 콜아웃: 문서 본문 속 팁·주의 (시스템 상태가 아님)