마우스 이벤트
키보드 이벤트
폼 이벤트
문서 로딩 이벤트
이벤트 예제 - click
<style>
.container {
<!-- 사진 안에 버튼 올림 -->
position: relative;
width: 200px;
height: 300px;
}
.btn {
position: absolute;
bottom: 10px;
left: 10px;
background-colot: rgba(255, 255, 255, 0.5);
border: none;
padding: 10px;
color: #000;
font-size: 16px;
}
</style>
<body>
<div class="container">
<img src="https://picsum.photos/id/237/200/300" alt="">
<button onclick="showDetail()" class="btn">상세보기 열기</button>
<br>
<div id="desc" style="display: none;">
<h1>멍멍</h1>
<div>왈왈</div>
<button onclick="hideDetail()">상세보기 닫기</button>
</div>
</div>
<script>
// 함수 1 상세보기 열기
function showDetail() {
document.querySelector("#desc").style.display = "block";
document.querySelector(".btn").style.display = "none";
}
// 함수 2 상세보기 닫기
function hideDetail() {
document.querySelector("#desc").style.display = "none";
document.querySelector(".btn").style.display = "block";
}
</script>
</body>
