알림 배너

Coddy HTML 여정의 실전 프론트엔드 섹션에 포함된 레슨. 35개 중 24번째.

Notification 배너는 success 메시지, 경고 또는 오류와 같은 중요한 정보를 사용자에게 알립니다. 일반적으로 페이지의 top 또는 bottom에 나타납니다. 다음과 같은 용도로 사용되는 것을 본 적이 있을 것입니다:

성공 메시지 (예: “프로필이 successfully 업데이트되었습니다.”)
오류 메시지 (예: “문제가 발생했습니다. 다시 시도해 주세요.”)
정보 알림 (예: “개인정보 보호정책을 업데이트했습니다.”)

간단한 알림 배너를 만들어 보겠습니다. 기본 컨테이너부터 시작하세요:

<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을 추가하세요.
배너에 green background(#4CAF50)를 적용하고, 성공 알림이므로 text white로 만드세요.
모서리를 둥글게 만드세요.
배너에 입체감을 더할 수 있도록 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>