유튜브 코딩애플 자바스크립트 2강

JAVASCRIPT

유튜브 코딩애플 자바스크립트 2강

성-민 2023. 1. 11. 14:08

숙제 닫기 버튼 만들기

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="name.css">
</head>
<body>

    <div class="alert-box" id="alert">Alert 박스</div>
    <button onclick="document.getElementById('alert').style.display='block';">열기
    </button>
    <button onclick="document.getElementById('alert').style.display='none';">닫기
    </button>


    <script>

    </script>

</body>
</html>

name.css

.alert-box{
    background: #6363ff;
    color: #161669;
    padding: 20px;
    border-radius: 5px;
    display: block;
}

name.css안의 display: block;은 alert-box를 보여주고 display:none;은 alert-box를 안 보이게 해줘서 열고 닫기 창을 만들었다.