본문 바로가기
코딩

HTML + CSS + JS 알림 창 만들기

by KUROMI98 2025. 7. 28.

버튼을 누르면 알림 창이 튀어나오게끔 해봤다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="alert" class="alert-box">알림창임</div>
    <button onclick="document.getElementById('alert').style.display = 'block';">
      버튼
    </button>
    <script></script>
  </body>
</html>

 

.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: navy;
  border-radius: 5px;
  opacity: 0.5;
  display: none;
}

 

 이렇게 하면 버튼 눌러 열고 닫을 수도 있다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="alert" class="alert-box">
      알림창임
      <button
        onclick="document.getElementById('alert').style.display = 'none';"
      >
        닫기
      </button>
    </div>
    <button onclick="document.getElementById('alert').style.display = 'block';">
      열기
    </button>
    <script></script>
  </body>
</html>
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: navy;
  border-radius: 5px;
  opacity: 0.5;
  display: block;
}

<link rel="stylesheet" href="style.css" /> 이게 next.js의 import 같은 구문이라는 걸 배우게 됐다.

왜 css 안뜨나 했네.

그리고 onclick에 js 구문 넣어서 display none block 바꿀 수 있다는 것도 배우게 됐다.

function을 외부로 빼는 방식:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="alert" class="alert-box">
      알림창임
      <button onclick="closeHandler()">닫기</button>
    </div>
    <button onclick="openHandler()">열기</button>
    <script>
      const openHandler = () => {
        document.getElementById("alert").style.display = "block";
      };
      const closeHandler = () => {
        document.getElementById("alert").style.display = "none";
      };
    </script>
  </body>
</html>
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: navy;
  border-radius: 5px;
  opacity: 0.5;
  display: block;
}

아니면 이런 방식도 가능하다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="alert" class="alert-box">
      알림창임
      <button onclick="alertToggler('none')">닫기</button>
    </div>
    <button onclick="alertToggler('block')">열기</button>
    <script>
      const alertToggler = (displayValue) => {
        document.getElementById("alert").style.display = displayValue;
      };
    </script>
  </body>
</html>

또한 이런 방식도 가능함

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="alert" class="alert-box">
      알림창임
      <button onclick="alertToggler('CLOSE')">닫기</button>
    </div>
    <button onclick="alertToggler('OPEN')">열기</button>
    <script>
      const alertToggler = (action) => {
        const alertBox = document.getElementById("alert");
        alertBox.style.display = action === "OPEN" ? "block" : "none";
      };
    </script>
  </body>
</html>

'코딩' 카테고리의 다른 글

Zustand 공부 시작  (0) 2025.08.04
HTML + JS + CSS 간단한 토글 Navigation Bar 만들기  (0) 2025.07.29
움직이는 Skeleton UI 구현  (0) 2025.07.27
화면 너비에 따라 변하고 클릭 시 열리고 닫히는 메뉴 만들기  (0) 2025.07.26
Adobe 웹사이트 클론 코딩 - 이미지와 텍스트  (0) 2025.07.25

관련글

댓글

티스토리툴바