[6월 23일]

정서이·2022년 6월 23일

1) 학습한 내용

1.CSS제어

(1)addClass / removeClass / toggleClass

•
addClass
: css class 를 설정
•
removeClass
: css class 를 제거
•
toggleClass
: 지정된 클래스가 없으면 설정하고 있으면 제거

<!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 addClass(){
		$("#a1").addClass("active");
	}
	function removeClass(){
		$("#a1").removeClass("active");
	}
	function toggleClass(){
		$("#a1").toggleClass("active");
	}
</script>
<style>
	.active{
		background-color : black;
		color : white;
	}
</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>


(2)CSS

•
css
: css 속성을 가져오거나 설정

<!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 getCss(){
		var v1 = $("#a1").css("background-color");
		var v2 = $("#a1").css("color");
		$("#result").append("backgroud-color : " + v1 + "<br/>");
		$("#result").append("color : " + v2 + "<br/>");
	}
	function setCss(){
		$("#a1").css("background-color","blue");
		$("#a1").css("color","yellow")
	}
</script>
<style>
	#a1{
		background-color : black;
		color : white;
	}
</style>
</head>
<body>
	<h1 id="a1">h1 태그</h1>
	<button onclick="getCss()">css 읽어오기</button>
	<button onclick="setCss()">css 설정하기</button>
	<div id="result"></div>
</body>
</html>

2.태그탐색

(1)부모태그 탐색

•
parent :
선택된 태그의 부모 태그를 선택
•
parents :
선택된 태그의 모든 부모 태그를 선택
•
parents(
선택자 2) : 선택된 태그의 모든 부모 태그 중 선택자 2 에 해당하는
태그들이 선택
•
parentsUntil
선택자 2) : 선택된 태그에서 선택자 2 태그까지의 모든 부모태
그들이 선택

<!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(){
		$("#a4").parent().css("border-color","red");
		$("#a4").parents().css("border-width","red");
		$("#a4").parents(".c1").css("border-style","dashed");
		$("#a4").parentsUntil(".c1").css("border-style","dotted");
	})
</script>
<style>
	div{
	border : 2px solid black;
	padding : 10px;
	}
</style>
</head>
<body>
	<div>div tag 1
		<div class="c1">div tag 2
			<div class='c2'>div tag 3
				<div id="a4">div tag 4</div>
			</div>
		</div>
	</div>
</body>
</html>

(2)자식태그 탐색

•
children :
선택된 태그의 자식 태그들을 선택
•
children(
선택자 2) : 선택된 태그의 자식 태그들 중 선택자 2 에 해
당하는 태그들이 선택
•
find(
선택자 2) : 선택된 태그의 하위 태그들 중 선택자 2 에 해당
하는 태그들이 선택

<!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").children().css("border-color","red");
		$("#a1").children(".c1").css("border-width","4px");
		$("#a1").find(".c3 ").css("border-style","dashed");
	})
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
	}
</style>
</head>
<body>
	<div id="a1">
		div
		<div class="c1">
			div 1
			<div class="c3">
				div 1-2				
			</div>
		</div>
		<div class="c2">
			div 2
			<div>
				div 2-2
			</div>
		</div>
	</div>
</body>
</html>

(3)같은 계층의 태그 선택

•
siblings :
선택된 태그와 같은 계층의 모든 태그들이 선택
•
siblings(
선택자 2) : 선택된 태그와 같은 계층의 모든 태그 중 선택자 2
에 해당하는 태그들이 선택

<!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").siblings().css("border-color", "red");
		$("#a1").siblings(".c2").css("border-style", "dotted");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
	}
</style>
</head>
<body>
	<div class="c1">div 1</div>
	<div class="c2">div 2</div>
	<div id="a1">div 3</div>
	<div class="c1">div 4</div>
	<div class="c2">div 5</div>
</body>
</html>

(4)next / prev

•
next :
선택된 태그 다음 태그가 선택
•
nextAll
: 선택된 태그의 다음 태그들이 모두 선택
•
nextUntil
선택자 2) : 선택된 태그 다음 태그들 중 선택자 2 까지의 모
든 태그들이 선택

<!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").next().css("border-color", "red");
		$("#a1").nextAll().css("border-style", "dotted");
		$("#a1").nextUntil("#a2").css("border-width", "4px");
	});
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
		margin-bottom : 10px;
	}
</style>
</head>
<body>
	<div>div 1</div>
	<div id="a1">div 2</div>
	<div>div 3</div>
	<div>div 4</div>
	<div id="a2">div 5</div>
</body>
</html>

•
prev
: 선택된 태그 이전 태그가 선택
•
prevAll
: 선택된 태그 이전의 모든 태그가 선택
•
prevUntil
선택자 2) : 선택된 태그의 이전 태그들 중 선택자 2 까
지의 모든 태그들이 선택

<!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").prev().css("border-color", "red");
		$("#a1").prevAll().css("border-style", "dotted");
		$("#a1").prevUntil("#a2").css("border-width", "4px");
	});	
</script>
<style>
	div{
		border : 2px solid black;
		padding : 10px;
		margin-bottom : 10px;
	}
</style>
</head>
<body>
	<div id="a2">div 1</div>
	<div>div 2</div>
	<div>div 3</div>
	<div id="a1">div 4</div>
	<div>div 5</div>
</body>
</html>

3.Event

(1)hide / show / toggle

•
hide :
선택된 태그를 사라지게 함
•
show :
선택된 태그를 나타나게 함
•
toggle :
사라지거나 나타나는 상태를 전환

<!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 div_hide(){
		$("#a1").hide();
	}
	function div_show(){
		$("#a1").show();
	}
	function div_toggle(){
		$("#a1").toggle();
	}
</script>
<style>
	#a1{
		border: 1px solid black;
		background-color : yellow;
		width: 200px;
		height: 200px;
	}
</style>
</head>
<body>
	<button onclick = "div_hide()">hide</button>
	<button onclick = "div_show()">show</button>
	<button onclick = "div_toggle()">toggle</button>
	<div id="a1"></div>
</body>
</html>


(2)fade

•
fadeIn
: 페이드 효과를 통해 나타나게 한다
•
fadeout :
페이드 효과를 통해 사라지게 한다
•
fadeToggle
: 페이드 효과를 통해 사라지거나 나타나는 상태를 전환
한다
•
fadeTo
: 지정된 투명도 만큼 페이드 아웃한다

<!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 div_fadeout(){
		$("#a1").fadeOut("slow");
	}
	function div_fadein(){
		$("#a1").fadeIn("slow");
		}
	function div_fadetoggle(){
		$("#a1").fadeToggle("slow");
	}
	function div_fadeto(){
		$("#a1").fadeTo("slow",0.3);
	}
</script>
<style>
	#a1{
		border: 1px solid black;
		background-color : yellow;
		width: 200px;
		height: 200px;
	}
</style>
</head>
<body>
	<button onclick="div_fadeout()">fade out</button>
	<button onclick="div_fadein()">fade in</button>
	<button onclick="div_fadetoggle()">fade toggle</button>
	<button onclick="div_fadeto()">fade to</button>
	<div id="a1"></div>
</body>
</html>


(3)Slide

•
slideUp
: 위로 슬라이드 되면서 사라진다
•
slideDown
: 아래로 슬라이드 되면서 나타난다
•
slideToggle
: 슬라이드 효과를 통해 사라지거나 나타나는 상태
를 전환한다

<!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 div_slideup(){
		$("#a1").slideUp("slow");
	}
	function div_slidedown(){
		$("#a1").slideDown("slow");
	}
	function div_slidetoggle(){
		$("#a1").slideToggle("slow");
	}
</script>
<style>
	#a1{
		border: 1px solid black;
		background-color : yellow;
		width: 200px;
		height: 200px;
	}
</style>
</head>
<body>
	<button onclick="div_slideup()">slide up</button>
	<button onclick="div_slidedown()">slide down</button>
	<button onclick="div_slidetoggle()">slide toggle</button>
	<div id="a1"></div>
</body>
</html>

4.애니메이션

•
Animate :
지정된 css 속성을 애니메이션 효과와 함께 지정
•
Animate({}) :
지정된 객체의 css 속성들을 애니메이션 효과와 함께 지정

2) 학습내용 중 어려웠던 점

부모,자식,형제 태그를 선택하는 부분에서 기준태그를 포함한다고 잘못 이해했다.

3) 해결방법

기준태그를 포함하는게 아니라 기준태그를 제외하고 부모,자식,형제 태그를 선택한다고 설명해주셔서 이해하였다.

4) 학습소감

이제 조금씩 이클립스 사용법에 익숙해지고 함수를 사용하는 방법을 알 것 같다

profile
정서이
이전 포스트

[6월 22일]

다음 포스트

[6월 24일]

0개의 댓글