<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
.parent { width: 100%; height: 1000px; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; }
.child { width: 300px; height: 200px; background: #fff; }
</style>
</head>
<body>
<div class="parent">
<div class="child">
<button class="close">close</button>
</div>
</div>
</body>
<script>
const p = document.querySelector('.parent');
const c = document.querySelector('.child');
const btn = document.querySelector('.close');
p.addEventListener('click', onParentClick);
c.addEventListener('click', onChildClick);
btn.addEventListener('click', onButtonClick);
function onParentClick(e) {
e.stopPropagation();
p.style.display = 'none';
}
function onChildClick(e) {
e.stopPropagation();
}
function onButtonClick() {
p.style.display = 'none';
}
</script>
</html>
의문은 '삶의 수준'을 결정하고, 질문은 '삶 자체'를 바꾼다.