알림 배너

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를 사용하여 아이콘을 약간 더 크게 만드세요.

목표: 배너는 왼쪽에 체크 표시 아이콘이 있고 오른쪽에 텍스트가 있는 깔끔한 성공 메시지처럼 보여야 합니다.

치트 시트

알림 배너는 성공 메시지, 경고 또는 오류와 같은 중요한 정보를 사용자에게 알립니다. 일반적으로 페이지의 상단이나 하단에 나타납니다.

기본 알림 배너를 만듭니다:

<div class="notification">
  This is a notification message!
</div>

알림 배너의 스타일을 지정합니다:

.notification {
  background-color: #4CAF50;
  color: white;
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 4px;
}

아이콘이 있는 배너의 경우, flexbox를 사용하여 콘텐츠를 정렬합니다:

.notification {
  display: flex;
  align-items: center;
}

박스 그림자(box shadow)와 요소 간의 간격을 추가하여 깊이감을 줍니다:

.notification {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.notification .icon {
  margin-right: 10px;
  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>