[개발일지 36일차] CSS 선택자, Animate, Effect, Ajax

MSJ·2022년 6월 23일
0

WEB

목록 보기
36/41
post-thumbnail

2022-06-23

CSS 선택자

1) CSS 값 불러오고 설정하기

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

	function setCss(){
		$("#a1").css("background-color", "darkcyan");
		$("#a1").css("color", "orange");
	}
</script>
</body>
</html>

2) CSS 값 제거하고 토글하기

addClass : css class 설정
removeClass : css class 제거
toggleClass : 지정된 클래스 없으면 설정, 지정된 클래스 있으면 제거
css : css 속성 가져오거나 설정

<style>
	.active {
		background-color : black;
		color : orange;
	}
</style>
</head>
<body>
	<h1 id="a1">h1 태그</h1>
	<button onclick="addClass()">CSS 클래스 추가하기</button>
	<button onclick="removeClass()">CSS 클래스 제거하기</button>
	<button onclick="toggleClass()">CSS 클래스 전환하기</button>
	
	<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>

Search Node

1) 부모 태그 탐색

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

<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>
	
	<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", "4px");
		$("#a4").parents(".c1").css("border-style", "dashed");
		$("#a4").parentsUntil(".c1").css("border-style", "dotted");
	});
</script>

2) 자식 태그 탐색

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

<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>
	
	<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", "dotted");
});
</script>

3) 같은 계층의 태그 선택

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

<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>
	
	<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>

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

<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>
	
	<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>

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

<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>
	
	<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>

Effect

1) hide/show

hide : 선택된 태그를 사라지게
show : 선택된 태그를 나타나게
toggle : 사라지거나 나타나는 상태 전환
hide(), show(), toggle() : ()에 시간을 넣으면 지정된 시간만큼 애니메이션 효과 (밀리세컨즈 단위)

시간은 "slow", "fast" 문자열을 넣어 적당한 조절도 됨

<style>
	#a1{
		border : 1px solid black;
		background-color : darkcyan;
		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>
	
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function div_hide(){
		//$("#a1").hide();
		//$("#a1").hide(1000);
		$("#a1").hide("slow");
		//$("#a1").hide("fast");
	}
	
	function div_show(){
		//$("#a1").show();
		//$("#a1").show(1000);
		//$("#a1").show("slow");
		$("#a1").show("fast");
	}
	
	function div_toggle(){
		//$("#a1").toggle();
		$("#a1").toggle(1000);
		//$("#a1").toggle("slow");
		//$("#a1").toggle("fast");
	}
</script>

2) fade in/fade out

fadeIn : 페이드 효과로 나타나기
fadeOut : 페이드 효과로 사라지기
fadeToggle : 페이드 효과로 사라지거나 나타나는 상태를 전환
fadeTo : 지정된 투명도 만큼 페이드 아웃

<style>
	#a1{
		border : 1px solid black;
		background-color : darkcyan;
		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>
	
<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>

3) slide down/slide up

slideUp : 위로 슬라이드 되며 사라지기
slideDown : 아래로 슬라이드 되며 나타나기
slideToggle : 위의 두 상태 전환하기

<style>
#a1{
		border : 1px solid black;
		background-color : darkcyan;
		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>
	
	
	<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>

4) callback 함수

앞서 살펴본 효과가 종료되면 자동으로 호출되는 함수를 등록 할 수 있음

<style>
#a1{
		border : 1px solid black;
		background-color : darkcyan;
		width : 200px;
		height : 200px;
	}
</style>
</head>
<body>
	<button onclick="test_callback()">callback 함수 테스트</button>
	<div id="a1"></div>
	
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function test_callback(){
		$("#a1").hide("slow", function(){
			alert("effect end");
		});
	}
</script>

Animate

animate : 지정된 css 속성을 애니메이션 효과
animate({}) : 지정된 객체의 css 속성들을 애니메이션 효과

<style>
	#a1{
		border : 1px solid black;
		background-color : darkcyan;
		width : 200px;
		height : 200px;
		position: relative;
	}
</style>
</head>
<body>
	<button onclick="setSize()">size 설정</button>
	<button onclick="setOpacity()">투명도 조절</button>
	<button onclick="setPosition()">위치 이동</button>
	<button onclick="setBackgroundColor()">배경색 설정</button>
	<button onclick="setTotal()">종합 설정</button>
	<button onclick="setSequence()">순차 설정</button>
	<div id="a1"></div>
	
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function setSize(){
		$("#a1").animate({
			width : 400,
			height : 400
		},"slow");
	}
	
	function setOpacity(){
		$("#a1").animate({
			opacity : 0
		},"slow");
	}
	
	function setPosition(){
		$("#a1").animate({
			left : 100,
			top : 100
		},"slow");
	}
	
	function setBackgroundColor(){
		$("#a1").animate({
			backgroundColor : "red"
		},"slow");
	}
	
	function setTotal(){
		$("#a1").animate({
			width : 400,
			height : 400,
			opacity : 0.5,
			left : 100,
			top : 100
		},"slow");
	}
	
	function setSequence(){
		$("#a1").animate({
			width : 500,
			height : 400,
		},"slow").delay(1000).animate({
			left : 300,
			top : 300
		},"slow").delay(1000).animate({
			opacity : 0.2
		},"slow");
	}

</script>

표준 웹 통신

  • 브라우저가 서버로부터 응답을 받으면 스스로 처리하려고 한다

  • 브라우저가 처리 가능한 데이터면 스스로 처리하지만 그렇지 못하면 다운로드가 된다

  • 응답 결과가 html 코드일 경우 html코드를 통해 화면을 변경한다

  • 응답 결과가 이미지/사운드/동영상 등 미디어 데이터일 경우 미디어 데이터를 처리할 수 있는 화면으로 변경 된다

  • 즉 웹 브라우저는 처리할 수 있는 데이터를 받게되면 전체 화면이 변경된다는 단점이 있다


Ajax 통신

  • Ajax 통신은 서버로 부터 받은 응답 결과를 웹 브라우저에 반영않고, JavaScript로 처리할 수 있도록 고안된 통신 방식이다

  • 서버와의 통신이 정상적으로 유지되고, 화면은 변경되지 않아 일부 화면만 변경하는 작업이 가능하다

  • 오늘날 웹 애플리케이션 개발에 많이 사용하는 통신 기술이다

  • Ajax 통신은 같은 도메인의 파일만 요청 가능하다

jQuery Ajax 통신

브라우저 종류나 버전에 따라 작성하는 코드가 다른데, jQuery는 개발자가 손쉽게 Ajax 통신을 할 수 있도록 함수를 만들어 제공한다.

load : 지정된 파일을 요청하고 받은 응답 결과를 태그 내부에 삽입
get : get 방식으로 ajax통신
post : post 방식으로 ajax통신
ajax : ajax 통신을 위한 종합적인 모든 기능을 제공하는 함수다

<body>
	<button onclick="getText()">문자열 데이터</button>
	<button onclick="getHtml()">HTML 데이터</button>
	<button onclick="getXml()">XML 데이터</button>
	<button onclick="getJson()">JSON 데이터</button>
	<div id="result"></div>
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
	function getText(){
		$.ajax({
			url : "data.txt",
			type : "post",
			dataType : "text",
			success : function(rec_data){ //리시브 데이타가 있다면
				$("#result").text(rec_data);
			}
		});
	}
	
	function getHtml(){
		$.ajax({
			url : "data2.html",
			type : "post",
			dataType : "html",
			success : function(rec_data){ 
				$("#result").html(rec_data);
			}
		});
	}
	
	function getXml(){
		$.ajax({
			url : "data3.xml",
			type : "post",
			dataType : "xml",
			success : function(rec_data){
				var data = $(rec_data).find("data");
				
				$(data).each(function(idx, obj){
					var str1 = $(obj).find("str1");
					var str2 = $(obj).find("str2");
					
					var str11 = $(str11).text();
					var str22 = $(str22).text();
					
					$("#result").append("str1 : " + str11 + "<br/>");
					$("#result").append("str2 : " + str22 + "<br/>");
				});
				
			}
		});
	}
	
	function getJson(){
		$.ajax({
			url : "data4.json",
			type : "post",
			dataType : "json",
			success : function(rec_data){
				$("#result").append("data1 : " + rec_data.data1 + "<br/>");
				$("#result").append("data2 : " + rec_data.data2 + "<br/>");
				$("#result").append("data3 : " + rec_data.data3 + "<br/>");
			}
		});
		
	}
</script>

어려운 점

  1. ajax 함수는 기존에 썼던 형태와 조금 달라서 어려웠던 것 같다

  2. search node의 부모와 자식 계층 파악하는게 조금 헷갈릴 듯

해결 방법

  1. 브라우저 종류나 버전따라 작성법이 다르다고 하니, 잘 참고해서 작성하는 수 밖에 없겠다

  2. 찬찬히 코드를 살피면서 입으로 읊으면서 구조를 찾으니 낫다

소감

음.... 뭔가 너무너무너무 많다..^^

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글