닫을 수 있는 배너

Coddy HTML 여정의 JavaScript 실전 섹션에 포함된 레슨. 27개 중 9번째.

닫을 수 있는 banner는 페이지의 top(또는 bottom)에 나타나며 사용자가 닫을 수 있는 알림 또는 메시지 표시줄입니다. 이러한 표시줄은 쿠키 정책, 공지 또는 경고와 같은 important 정보를 표시하는 데 자주 사용됩니다. 핵심 기능은 사용자가 페이지를 새로 고치지 않고도 banner를 숨길 수 있게 해 주는 닫기 (×) button입니다.

먼저 HTML 구조를 추가해 보겠습니다:

<div class="banner" id="banner">
  <p>This is an important announcement!</p>
  <button id="closeBanner">X</button>
</div>

다음으로, banner의 스타일을 지정하기 위해 기본 CSS를 추가해 보겠습니다:

.banner {
  background-color: #1e90ff;
  color: white;
  padding: 15px 20px;
  text-align: center;
  position: relative;

}

.banner button {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;

  cursor: pointer;
}

마지막으로 배너를 닫을 수 있도록 JavaScript를 추가하세요:

const banner = document.getElementById('banner');
const closeBtn = document.getElementById('closeBanner');

closeBtn.addEventListener('click', function() {
  banner.style.display = 'none';
});

닫기 버튼을 클릭하면 배너가 사라집니다.

챌린지

쉬움

사용자가 닫기 버튼을 클릭하면 배너가 사라지도록 합니다.

닫기 버튼을 클릭했을 때 함수가 실행되도록 이벤트 리스너를 추가합니다.
이 함수 안에서 배너 요소의 display 속성을 none으로 설정하여 숨깁니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Dismissible Banner Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- 배너 -->
  <div class="banner" id="banner">
    <p>Big News! Our new course is live. Enroll today and get 30% off!</p>
    <button id="closeBanner">&times;</button>
  </div>

  <!-- 페이지 콘텐츠 -->
  <header class="hero">
    <h1>Welcome to CodeLearn</h1>
    <p>Practical lessons to sharpen your web development skills 🚀</p>
  </header>

  <main class="content">
    <section>
      <h2>Learn by Doing</h2>
      <p>Each lesson comes with tasks and challenges so you can practice immediately.</p>
    </section>

    <section>
      <h2>Topics We Cover</h2>
      <ul>
        <li>HTML & CSS basics</li>
        <li>JavaScript essentials</li>
        <li>Frontend projects</li>
        <li>Interactive UI components</li>
      </ul>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 CodeLearn. All rights reserved.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>