1)학습한 내용
*html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<div id="a1">
<p>p 태그</p>
</div>
<button onclick="after1()">HTML 코드를 뒤에 추가</button>
<button onclick="after2()">HTML 객체를 뒤에 추가</button>
<button onclick="before1()">HTML 코드를 앞에 추가</button>
<button onclick="before2()">HTML 객체를 앞에 추가</button>
</body>
</html>*결과:
*html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<h1 id="a1">h1 태그</h1>
<button onclick="addClass()">CSS 클래스 추가하기</button>
<button onclick="removeClass()">CSS 클래스 제거하기</button>
<button onclick="toggleClass()">CSS 클래스 전환하기</button>
</body>
</html>*결과:
*html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color", "white");
});
$("#a2").dblclick(function(){
$("#a2").css("background-color", "black");
$("#a2").css("color", "white");
});
$("#a3").mouseenter(function(){
$("#a3").css("background-color", "black");
$("#a3").css("color", "white");
});
$("#a3").mouseleave(function(){
$("#a3").css("background-color", "white");
$("#a3").css("color", "black");
});
$("#a4").mousedown(function(){
$("#a4").css("background-color", "black");
$("#a4").css("color", "white");
});
$("#a4").mouseup(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color", "black");
});
$("#a5").hover(function(){
$("#a5").css("background-color", "black");
$("#a5").css("color", "white");
}, function(){
$("#a5").css("background-color", "white");
$("#a5").css("color", "black");
});
});
</script>
</head>
<body>
<h3 id="a1">click</h3>
<h3 id="a2">double click</h3>
<h3 id="a3">mouse enter/leave</h3>
<h3 id="a4">mouse down/up</h3>
<h3 id="a5">mouse hover</h3>
<input id="a6" type="text"/>
</body>
</html>*결과:
2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
오늘 어려운점은 없었다
안녕하세요