<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<button class="btn-1">버튼1</button>
<button class="btn-2">버튼2</button>
<button class="btn-3">배경색 변경</button>
<button class="btn-4">배경색 회복</button>
body.active {
  background-color: red;
}

console.clear();
//방식_1
function a() {
  alert("1클릭");
}
$(".btn-1").click(a);
//방식_2_함수축약
$(".btn-2").click(function () {
  alert("2클릭");
});
//실무
$(".btn-3").click(function () {
  $("body").addClass("active");
});
$(".btn-4").click(function () {
  $("body").removeClass("active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.