"> 02-05_class-add-remove "> 02-05_class-add-remove "> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02-05_class-add-remove</title>
<script src="<https://code.jquery.com/jquery-3.7.1.js>"></script>
<script type="text/javascript">
	/*
		# addClass() : class 속성을 추가.
		
		# removeClass() : class 속성을 삭제.
		
	*/
	$(document).ready(function(){
		$('#c1 > div').addClass("box");
		
		$("#c2 > div").addClass(function(index){
			return "circle" + index;
		});
		
		$("#r1 > div").removeClass("contents");
		
		$("#r2 > div").removeClass(function(){
			return "bg";
		});
		
	});
</script>
<style type="text/css">
* { margin: 0; padding: 0;}
#c2 {
	text-align: center;
}
.contents, .bg{
	border: 1px solid red;
	width: 100px;
	height: 100px;
}
.box {
	width: 100px;
	border-bottom: 2px solid silver;
	text-align: center;
	padding: 20px;
	margin-bottom: 10px;
}

.circle0, .circle1, .circle2 {
	border: 2px solid gold;
	width: 200px;
	height: 60px;
	font-size: 24px;
	border-radius: 30px;
	line-height: 50px;
	display: inline-block;
}
</style>
</head>
<body>
   <h1>class add, remove</h1>
   <div id="c1">
      <div>jQuery</div>
   </div>
   <div id="c2">
      <div>HTML</div>
      <div>CSS</div>
      <div>JavaScript</div>
   </div>
   <div id="c3"></div>
   <hr/>
   <div id="r1">
      <div class="contents">jQuery</div>
   </div>
   <div id="r2">
      <div class="d1 bg">HTML</div>
      <div class="d2 bg">CSS</div>
      <div class="d3 bg">JavaScript</div>
   </div>
</body>
</html>