<!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(){
//전체 배경색을 변경
$('*').css('background', 'yellow');
//h1요소의 글자색을 파랑
document.getElementsByTagName('h1')[0].style.color = 'blue'/* 스크립트 방식*/
$('h1').css('color', 'blue');/*제이쿼리 방식*/
//var vh = $('h1');
//vh.css('color','blue');
//id가 para인 요소의 글자색은 녹색
document.getElementById('para').style.color = 'green';/* 스크립트 방식*/
$('#para').css('color', 'green');/*제이쿼리 방식*/
//class가 sample요소의 글자색은 빨강
document.getElementClassName('sample')[0].style.color = 'red';
$('.sample').css('color', 'red');
}
</script>
</head>
<body>
<div class = "box">
<br>
<button type = "button" onclick="proc1()">확인</button>
<div id = "result1">
<h1> 제목입니다 </h1>
<h2 id="para"> 작은 제목입니다 </h2>
<h2 class="sample"> 샘플입니다 </h2>
</div>
</div>
</body>
</html>
신입 개발자 입니다!!!