<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body * {
border: 1px solid red;
display: block;
margin: 10px;
padding: 10px;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
//$('h2').siblings().css('border-color', 'blue')
//$('h2').siblings('h3').css('border-color', 'blue')
//$('h2').next().css('border-color', 'blue') // h2 태그의 형제들 중 바로 다음 태그
//$('h2').prev().css('border-color', 'blue') // h2 태그의 형제들 중 바로 이전 태그
//$('h2').nextUntil().css('border-color', 'blue')
//$('h2').nextUntil('p').css('border-color', 'blue')
//$('h2').prevAll().css('border-color', 'blue')
//$('h2').prevAll('span').css('border-color', 'blue') // 이전 모든 것 중에 span
//$('h2').prevUntil('p').css('border-color', 'blue') // p태그 전까지
//$('h3').siblings().css('border-color', 'blue')
$('h3').siblings().eq(1).css('border-color', 'blue')
})
</script>
</head>
<body>
<div>div1
<p>p1-1</p>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3
<p>p1-2-1</p>
</h3>
<p>p1-3</p>
</div>
<div>div2
<h2>h2</h2>
<h3>h3</h3>
<p>p2-1</p>
</div>
</body>
</html>
