알림 배너
Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 24번째.
알림 배너는 성공 메시지, 경고 또는 오류와 같은 중요한 정보를 사용자에게 알립니다. 일반적으로 페이지의 상단이나 하단에 표시됩니다. 다음과 같은 용도로 사용되는 것을 본 적이 있을 것입니다.
- 성공 메시지, 예: “프로필이 성공적으로 업데이트되었습니다.”
- 오류 메시지, 예: “문제가 발생했습니다. 다시 시도해 주세요.”
- 정보 알림, 예: “개인정보 처리방침이 업데이트되었습니다.”
간단한 알림 배너를 만들어 봅시다. 기본 컨테이너부터 시작하세요:
<div class="notification">
This is a notification message!
</div>눈에 띄도록 스타일을 추가하세요:
.notification {
background-color: #4CAF50;
color: white;
padding: 15px;
margin-bottom: 15px;
border-radius: 4px;
}흰색 텍스트가 있는 초록색 알림 배너를 만듭니다.
챌린지
쉬움알림 배너의 HTML이 제공됩니다. 실제 성공 메시지처럼 보이도록 스타일을 적용하세요.
할 일:
display: flex와align-items: center를 사용해 아이콘과 텍스트를 나란히 배치하세요.- 배너 안쪽에 패딩을 추가해 가독성을 높이세요.
- 성공 알림이므로 배너에 초록색 배경(
#4CAF50)을 적용하고 텍스트를 흰색으로 만드세요. - 모서리를 둥글게 만드세요.
- 배너에 입체감을 주도록 박스 그림자를 추가하세요.
margin-right를 사용해 아이콘과 텍스트 사이에 간격을 추가하세요.font-size: 18px를 사용해 아이콘을 조금 더 크게 만드세요.
목표: 왼쪽에는 체크 표시 아이콘, 오른쪽에는 텍스트가 있는 깔끔한 성공 메시지처럼 배너를 만드세요.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Notification Banners</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.notification {
}
.notification_icon {
}
</style>
</head>
<body>
<div class="notification notification--success">
<span class="notification_icon">✓</span>
<div class="notification_message">Your changes have been saved successfully!</div>
</div>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
실전 프론트엔드의 모든 레슨
직접 연습해 보세요: Web 플레이그라운드