알림 배너

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 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를 사용하여 아이콘과 텍스트를 나란히 배치하세요.
가독성을 높이기 위해 배너 내부에 padding을 추가하세요.
성공 알림이므로 배너에 녹색 배경(#4CAF50)을 지정하고 텍스트를 흰색으로 만드세요.
모서리를 둥글게 만드세요.
배너에 깊이감을 주기 위해 box shadow를 추가하세요.
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>