E1 ~E2 E1의 다음에 나오는 형제요소 중 모든 E2요소
E1 + E2 E1의 바로 다음에 오는 형제요소 중 E2요소
<!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="../js/jquery-3.6.0.min.js"></script>
<script>
function proc1(){
//h3 다음의 모든 형제들 중 p의 배경색을 변경, 길이지정, 가운데정렬
/* $('h3 ~ P').css('background', 'yellow')
.css('width', '50%')
.css('text-align', 'center'); */
$('h3 ~ P').css({'background': 'yellow',
'width':'50%',
'text-align':'center'})
//h3 다음의 중 첫번째 p의 글자를 굵게, 크게 : font-weight
$('h3 + p').css({'font-weight' : 'bold', 'font-size' : '2.0em'});
}
</script>
</head>
<body>
<div class = "box">
h3 다음의 모든 형제의 배경색을 변경, 길이지정, 가운데정렬<br>
h3 다음의 첫번째 형제의 글자를 굵게, 크게 : font-weight <br>
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1">
<p>형제 선택자 에 대하여</p>
<h3> 꼬마버스 타요 가족을 소개 합니다</h3>
<p> 타요</p>
<p> 로기</p>
<p> 라니 </p>
<p> 가니 </p>
<span>다음</span>
<div>w3schools</div>
<p>타요</p>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!