-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<title>구슬픔</title>
</head>
<body>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<button class="btn btn-danger" id="close">닫기</button>
</div>
</div><!-- one-way UI -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<button id="login">로그인</button>
</nav><ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<!-- <p class="hello">안녕</p>
<p class="hello">안녕</p>
<p class="hello">안녕</p>
<button id="test-btn">버튼</button>
<h1 id="hello">안녕하세요</h1>
<h1 id="hi">JS 고수에요</h1> -->
<!-- <div onclick="alert_toggle ('none')" class="alert-box"><p>내용</p></div>
<button onclick="alert_toggle ('block','아이디를 입력해주세요')" id="btn_id">버튼1</button>
<button onclick="alert_toggle ('block','비밀번호를 입력해주세요')" id="btn_password ">버튼2</button> -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="./main.js"></script>
</body>
</html>.alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display:none;
cursor:pointer;
border:2px solid cornflowerblue;
}.list-group {
display: none;
}
.none {
display: none;
}
.show {
display: block;
}
.show2 {
display: block;
}
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 30px;visibility: hidden;
opacity: 0;
transition: all 1s;
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
.show-modal {
visibility: visible;
opacity: 1;
}document.querySelectorAll('.navbar-toggler')[0].addEventListener('click',function(){
document.querySelectorAll('.list-group')[0].classList.toggle('show');
});// $('#test-btn').on('click',function(){
// $('.hello').slideUp();
// });document.querySelector('#close').addEventListener('click',function(){
document.querySelector('.black-bg').classList.toggle('none');
});document.querySelector('#login').addEventListener('click',function(){
document.querySelector('.black-bg').classList.toggle('show-modal');
});
// $('#login').on('click',function(){
// $('.black-bg').fadeIn();
// });
// $('#login').on('click',function(){
// $('.black-bg').addClass('show2');
// });
// $('#test-btn').on('click',function(){
// $('.hello').hide();
// })
// $('#test-btn').on('click',function(){
// $('.hello').fadeOut();
// })
// $('#close').on('click',function(){
// $('.black-bg').classList.add('list-group');
// });
// $('#login').on('click',function(){
// $('.black-bg').classList.add('show-modal');
// });
// $('#login').on('click',function(){
// $('.black-bg').classList.add('show-modal');
// });// $('.hello').html('바보');
// document.querySelectorAll('.navbar-toggler')[0].addEventListener('click',function(){
// document.querySelectorAll('.list-group')[0].classList.toggle('show');
// })
// document.querySelectorAll('.hello')[0].innerHTML = '바보';
// $('.hello').html('바보');
// $('.hello').css('color','red');
// $('.hello').toggleClass('.hello');
// $('.hello').removeClass('.hello');
// $('.hello').addClass('.hello');// document.querySelectorAll('.navbar-toggler')[0].addEventListener('click',function(){
// document.querySelectorAll('.list-group')[0].classList.toggle('show');
// })// document.getElementsByClassName('navbar-toggler')[0].addEventListener('click',function(){
// document.getElementsByClassName('list-group')[0].classList.toggle('show');
// })// function alert_toggle (onoff,idpas){
// document.getElementsByClassName('alert-box')[0].style.display = onoff;
// document.getElementsByClassName('alert-box')[0].innerHTML = idpas;
// }// document.querySelector('#btn_id').addEventListener('click',function(){
// document.getElementsByClassName('alert-box')[0].innerHTML = "아이디를 입력해주세요.";
// })
// document.querySelector('#btn_password').addEventListener('click',function(){
// document.getElementsByClassName('alert-box')[0].innerHTML = "비밀번호를 입력해주세요.";
// })// function plus(x) {
// 1 + x
// }// function alert_open (){
// document.getElementsByClassName('alert-box')[0].style.display = 'block';
// }
// document.querySelector('#btn').addEventListener('click',function(){
// document.getElementsByClassName('alert-box')[0].style.display = 'block';
// })
// function alert_close (){
// document.getElementsByClassName('alert-box')[0].style.display = 'none';
// }
// document.querySelector('.alert-box').addEventListener('click',function(){
// document.getElementsByClassName('alert-box')[0].style.display = 'none';
// })// document.getElementById('hello').innerHTML = '기모띠';
// document.getElementById('???').src = 'profile.jpg';
// document.getElementById('hello').style.color = 'red';
// document.getElementById('hi').innerHTML = 'JS 고수에요';
// document.getElementById('hi').style.fontSize = '36px';
// document.querySelector('#hi').addEventListener('click',function(){
// document.getElementById('hi').innerHTML = 'JS 개고수에요';
// });상단메뉴바 버튼은 눌렀다똇다 하면 내려왔다 올라갔다 잘 하는데
제가 만든 로그인 버튼이나 닫기 버튼은 한번씩은 작동하는데
두번쨰 클릭부턴 반응이 없습니당..
- 답변은 로그인 후 가능합니다.