📌 간단한 알럿창 만들기

jjyu_my·2025년 2월 3일

JAVASCRIPT

목록 보기

6/15

👩🏻‍💻 예전에 끊어놓고 시간이 없어서 미뤄둔 강의를 복습 차원에서 빠르게 듣는 중이다~!
아주아주 쉬운 알럿창 만들기!!!
쉽지만 파라미터 이해는 중요한 개념이다!! 이거 이해 못하면 JS 어려움! 😆

📌 간단한 알럿 창 만들기

버튼을 클릭하면 알럿 창이 보이고, 닫기 버튼(❎)을 누르면 닫히기

💎 HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/02_AlertBox.css">
</head>
<body>
<!-- 알럿박스 -->
<div class="alert-box" id="alert">Hello~Javascript Alert box!!
  <button class="closebutton" onclick="alertButton('none')">❎</button>
</div>

<!-- 알럿 열기 버튼 -->
<button class="clickbutton" onclick="alertButton('block')">Click</button>

<script>
  // displayState를 파라미터(인자)로 받아서 alertBox를 보여주거나 숨겨주는 함수
  function alertButton(displayState){ 
    document.getElementById('alert').style.display=displayState;
  }
</script>

</body>
</html>

🎨 CSS

.alert-box {
  background-color: rgb(255, 255, 137);
  padding: 20px;
  color: rgb(49, 152, 35);
  border-radius: 5px;
  display: none;
  font-weight: bold;
  margin-bottom: 5px;
}

.clickbutton{
  cursor: pointer;
  background: rgb(172, 237, 163);
  border: none;
  padding: 5px;
  font-size: 20px;
  border-radius: 10px;
}

.closebutton{
  float: right;
  font-size: 20px;
  background: none;
  border: none;
  cursor: pointer;
}

🔹 정리

Click 버튼 → 알럿 창 보이기
❎ 버튼 → 알럿 창 닫기
alertButton(displayState) 함수를 활용해 display 속성을 변경
css 는 취향껏 코드짜기~~~😎

📌 간단한 알럿창 만들기

JAVASCRIPT

📌 간단한 알럿 창 만들기

💎 HTML

🎨 CSS

🔹 정리

✅ 결과

자바스크립트 내장 함수 및 메소드

모달창 제어하기_add(), remove(), toggle()의 차이

0개의 댓글