STUDY/진짜 웹 개발로 배우는 실용 JS

1-2강 : Alert 만들어서 유저 위협하기

myejinni 2022. 5. 8. 17:11

UI 만드는 법

1. 미리 디자인해놓고 숨김

2. 버튼 누르거나 하면 보여줌

 

* 핵심코드

    <div class="alert-box" id="alert">Alert 박스</div>
    <button onclick="document.getElementById('alert').style.display='block';">버튼</button>
    <!-- 버튼 클릭 시 안에 있는 자바스크립트 실행해주기 -->
 
display=none 이었던 alert box의 css를 display block으로 바꿔주는 js
 
 
Document
Alert 박스
 
.alert-box{
    background: rgb(182, 182, 220);
    color: #9f9fc6;
    padding: 20px;
    border-radius: 5px;
    display: none; 
    /* ui 숨기기 */
}

 

 
 
-오늘의 숙제-
: alert box의 닫기 버튼 기능 개발하기
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="document.getElementById('alert').style.display='none';">닫기</button>
    </div>
    <button onclick="document.getElementById('alert').style.display='block';">버튼</button>
    <!-- 이 버튼 클릭 시 안에 있는 자바스크립트 실행해주기 -->

    <script>

    </script>
</body>
</html>
 
*css는 전과 동일

 

버튼을 누르면 alert box가 열렸다가 닫기 버튼 클릭 시 사라진다.