«   2025/04   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30
Notice
Recent Posts
Recent Comments
Link
Tags more
Archives
Today
Total
관리 메뉴

여름 언덕에서 배운 것

알림창 (alert box) , onclick 본문

가랑비에 옷 젖는 줄 모른다 💻/자바스크립트(JS)

알림창 (alert box) , onclick

잔뜩 2023. 8. 2. 11:47

https://codingapple.com/course-status/

 

기본적인 UI 만드는 법칙

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김

2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드짬

 

alert box

<div class="alert-box" id=alert >알림창임</div>
.alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}

숙제

- 버튼을 클릭하면 알림창이보이게 하는 자바스크립트 짜오기

<button onclick="document.getElementById('alert').style.display = 'block';"> 버튼 </button>

display : none 혹은 visibility : hidden 은 안보이게 하는거

display :block은 visibility : visible은 보이게 !

 

- 닫기 버튼을 누르면 안보이게

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>

<body>
    <div class="alert-box" id="alert">알림창임
        <button onclick="document.getElementById('alert').style.display='none'">닫기</button>

    </div>
    <button onclick="document.getElementById('alert').style.display='block';">버튼</button>
</body>

</html>
728x90

'가랑비에 옷 젖는 줄 모른다 💻 > 자바스크립트(JS)' 카테고리의 다른 글

자바스크립트란  (0) 2023.08.02
'가랑비에 옷 젖는 줄 모른다 💻/자바스크립트(JS)' Related Articles more