<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<script src="/jqpro/js/jquery-3.6.0.min.js"></script>
<script>
function proc1(vh){
$(vh).hide();
}
$(document).ready(function(){
$('#result2 h2').on('click', function(){
//this.style.display = "none";/*돔객체 (스크립트 방식)*/
$(this).hide();/*제이쿼리 객체*/
})
})
</script>
</head>
<body>
<div class = "box">
h2요소를 클릭하면 화면에서 사라진다<br>
<h2>
<br>
<div id = "result1">
<h2 onclick="proc1(this)">클릭하면 사라집니다1.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다2.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다3.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다4.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다5.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다6.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다7.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다8.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다9.</h2>
<h2 onclick="proc1(this)">클릭하면 사라집니다10.</h2>
</div>
</div>
<div class = "box">
h2요소를 클릭하면 화면에서 사라진다<br>
스크립트에서 h2요소에 클릭이벤트 설정<br>
$('#result2 h2').on('click', function(){ })
<br>
<div id = "result2">
<h2>클릭하면 사라집니다1.</h2>
<h2>클릭하면 사라집니다2.</h2>
<h2>클릭하면 사라집니다3.</h2>
<h2>클릭하면 사라집니다4.</h2>
<h2>클릭하면 사라집니다5.</h2>
<h2>클릭하면 사라집니다6.</h2>
<h2>클릭하면 사라집니다7.</h2>
<h2>클릭하면 사라집니다8.</h2>
<h2>클릭하면 사라집니다9.</h2>
<h2>클릭하면 사라집니다10.</h2>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!