Salted Caramel

[수업 44일차] 21.10.13 / 06_JQuery(3)- end 본문

coding/[2021.08.02~2022.01.24] 수업복습

[수업 44일차] 21.10.13 / 06_JQuery(3)- end

꽃무늬라떼 2021. 10. 13. 17:46

https://www.websiteplanet.com/ko/webtools/lorem-ipsum/

 

무료 로렘 입숨 생성기 – 더미 & 필터 텍스트 생성기

해당 무료 온라인 도구를 사용하여 단어, 문장, 단락을 로렘 입섬 텍스트로 빠르게 생성하세요. 디자인, 모형, 웹 사이트 더미 텍스트가 생성됩니다.

www.websiteplanet.com

06_JQuery

Event_01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		// 이벤트 형식 : $("요소선택").on("이벤트이름", 이벤트리스너)
		// - 이벤트리스너는 보통 무명클래스를 이용하여 처리를 함.
		$(".btn").on("click", function(){
			alert("이벤트에 오신 걸 환영합니다.");
		});
	});




</script>
</head>
<body>

	<!-- 
		이벤트 종류
		1. 마우스 이벤트 : 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트
		2. 키보드 이벤트 : 사용자가 키보드를 눌렀을 때 발생하는 이벤트.
			이 때 눌린 키에 대한 정보가 이벤트에 담김.
		3. 태그 요소 고유 이벤트 : 요소마다 발생하는 고유의 이벤트.
		4. 사용자 정의 이벤트 : 개발자가 직접 만들어 사용하는 이벤트.
	
	
	
	 -->


	<button class="btn">확인</button>


</body>
</html>

 

 

 

06_JQuery

Event_02

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function(){
		$(".menu li").on("click",function(){
			alert($(this).html());
			
		});
	});

</script>
</head>
<body>

	<!-- 
		이벤트 목록
		blur,change,load,unload,resize,scroll,select,
		submit,click,dblclick, mousedown, mouseup, mousemove,
		mouseover, mouseout, mouseenter, mouseleave, focus,
		keydown, keypress, keyup,.......
	
	
	 -->
	<ul class="menu">
		<li>menu1</li>
		<li>menu2</li>
		<li>menu3</li>
		<li>menu4</li>
		<li>menu5</li>
	</ul>

</body>
</html>

 

 

06_JQuery

Event_03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		
		$(".btn1").on("click",function( ) {
			$("p").css("background-color","yellow");
		});
		
		$(".btn2").on("dblclick",function(){
			$("p").css("border","3px solid red");
		});
		
	});

</script>
</head>
<body>
	<button class="btn1">click</button>
	<button class="btn2">dblclick</button>
	<br> <br> <br>
	
	<p>내용</p>
	
</body>
</html>

 

06_JQuery

Event_04

 

마우스 이벤트
- mouseout() : 마우스가 해당 버튼 영역을 벗어났을 때
                         형식) $("요소선택").on("mouseout", function() {....});
                $("요소선택").mouseout(function() {....});
- mouseover() : 마우스가 해당 버튼 영역에 올라갔을 때
       형식) $("요소선택").on("mouseover", function() {....});
                $("요소선택").mouseover(function() {....});
- hover() : 
형식) $("요소선택").hover(
function() {.....}), ==> 마우스가 올라갔을 때 실행
function() {.....}), ==> 마우스가 벗어났을 때 실행

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").on("mouseover",function() {
			$("p").css("background-color","pink");
		});
		
		$(".btn1").on("mouseout",function() {
			$("p").css("background-color","lightgray");
		});	
	
		$(".btn2").hover(
				function() {  //마우스가 올라갔을 때 이벤트 처리 코드
					$("p").css("border","3px solid red");
				},
				function() { // 마우스가 벗어났을 때 이벤트 처리 코드
					$("p").css("background-color","yellow");
				});
				

	});

</script>
</head>
<body>

	<!-- 
		마우스 이벤트
		- mouseout() : 마우스가 해당 버튼 영역을 벗어났을 때
			                         형식) $("요소선택").on("mouseout", function() {....});
			                $("요소선택").mouseout(function() {....});
		- mouseover() : 마우스가 해당 버튼 영역에 올라갔을 때
					       형식) $("요소선택").on("mouseover", function() {....});
			                $("요소선택").mouseover(function() {....});
		- hover() : 
			형식) $("요소선택").hover(
						function() {.....}), ==> 마우스가 올라갔을 때 실행
						function() {.....}), ==> 마우스가 벗어났을 때 실행
	
	 -->	



	<button class="btn1">mouseover/out</button>
	<button class="btn2">hover</button>

	<br> <br> <br>
	
	<p>내용</p>

</body>
</html>

 

 

06_JQuery

Event_05

- mouseenter() : 선택한 요소의 경계 범위 내에 마우스가 올라갔을 때 이벤트 발생.
 형식) $("요소선택").mouseenter(function() {....});
- mouseleave() : 선택한 요소의 경계 범위 내에 마우스가 떠나갔을 때 이벤트 발생.
형식) $("요소선택").mouseleave(function() {....});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".wrap").on("mouseenter",function() {
			$("p").css("background-color","blue");
		});
		
		$(".wrap").on("mouseleave",function() {
			$("p").css("background-color","yellow");
		});
	});	

</script>
<style type="text/css">

	*{
		margin:0px;			/* 여백을 없애는 */
		padding:0px;		/* 안쪽 여백 없애는 */
	}
	
	body {
		margin: 20px;
	}
	
	.wrap {
		background-color:#ccc;
		padding:10px;				/* 안쪽영역으로 여백을 줘서 떨어지게 */
	}
	
	p {
		background-color: #999;
	}
	
	

</style>
</head>
<body>
	
	<!-- 
		- mouseenter() : 선택한 요소의 경계 범위 내에 마우스가 올라갔을 때 이벤트 발생.
						 형식) $("요소선택").mouseenter(function() {....});	
		- mouseleave() : 선택한 요소의 경계 범위 내에 마우스가 떠나갔을 때 이벤트 발생.
						형식) $("요소선택").mouseleave(function() {....});
	 -->
	
	<div class="wrap">
		
		<p>내용</p>
	
	</div>
		
		
</body>
</html>

 

06_JQuery

Event_06

 

mousemove() : 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트 발생.
형식) $("요소선택").mouseomove(function(매개변수) {.....});

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(document).on("mousemove",function(e) {
	    //$(document).mousemove(function(e) {
			let x = e.pageX; 	// 마우스의 x 좌표값을 구함.
			let y = e.pageY;	// 마우스의 y 좌표값을 구함.
			
			$("h2").text("x 좌표 : "+ x +", y 좌표 : " +y);
		});
	});

</script>
</head>
<body>

	<!-- 
		mousemove() : 선택한 요소의 영역에서 마우스를 움직일 때마다 이벤트 발생.
			형식) $("요소선택").mouseomove(function(매개변수) {.....});
	 -->
	 

	<h2></h2>

</body>
</html>
06_JQuery

Event_07

키보드 이벤트
   - keypress() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생.
   문자 키를 제외한 키 코드 값을 반환을 해 줌.
    형식) $("요소선택").kwypree(function(매개변수) {    });
   - keydown() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 
    형식) $("요소선택").keydown(function(매개변수) {    });
   - keyup() :  선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생.
    형식) $("요소선택").keyup(function(매개변수) {    });

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$("#user_id").on("keypress",function(e){
			$(".txt2").text(e.keyCode);
		});
		
		$("#user_id").on("keydown",function(e){
			$(".txt1").text(e.keyCode);
			$(this).css("background-color","yellow");
		});
		
		$("#user_id").on("keyup",function(e){
			$(this).css("background-color","tomato");
		});
		
	});

</script>
</head>
<body>

	<!-- 
	   키보드 이벤트
	   - keypress() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생.
	   문자 키를 제외한 키 코드 값을 반환을 해 줌.
	   		형식) $("요소선택").kwypree(function(매개변수) {    });
	   - keydown() : 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생. 
	   		형식) $("요소선택").keydown(function(매개변수) {    });
	   - keyup() :  선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생.
	   		형식) $("요소선택").keyup(function(매개변수) {    });
	
	 -->

	<p>
		<input type="text" name="user_id" id="user_id">
	</p>
	
	<p class="txt1"></p>
	<p class="txt2"></p>

</body>
</html>
06_JQuery

Event_08

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".site").on("change",function() {
			$(".txt").text($(this).val());
		});
	});

</script>
</head>
<body>
	<!-- 
		기타 자주 사용되는 이벤트 메서드 
		- change() : 선택한 입력 요소에 값이 새 값으로 변경되고,
		                             포커스가 다른 요소로 이동이 되었을 때 이벤트가 발생.
	
	 -->
	<select class="site">
		<option value="www.naver.com">네이버</option>
		<option value="www.google.com">구글</option>
		<option value="www.daum.com">다음</option>
		<option value="www.nate.com">네이트</option>
	</select>

	<p class="txt"></p>
	
	
	
</body>
</html>

 

 

06_JQuery

Animation_01

효과 관련 메서드
- hide() : 노출되어 있는 요소를 숨기는 기능을 하는 메서드.
               형식) $("요소선택").hide(효과속도(ms), 콜백함수)
               * 콜백함수 : 효과가 완료되면 실행되는 함수. ==> 생략도 가능함.
- show() : 숨겨져 있던 요소를 노출시키는 기능을 하는 메서드.
형식) $("요소선택").show(효과속도(ms),콜백함수) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").on("click",function() {
			$("h2").hide(2000, function() {			/* 1000= 1초 */
				alert("h2 태그 글자가 숨겨졌습니다.");
			});
		});
		
		$(".btn2").on("click",function() {
			$("h2").show(2000,function() {
				alert("h2 태그 글자가 보여집니다.");
			});
		});
		
		
	});


</script>
</head>
<body>
	
	<!-- 
		효과 관련 메서드
		- hide() : 노출되어 있는 요소를 숨기는 기능을 하는 메서드.
			               형식) $("요소선택").hide(효과속도(ms), 콜백함수)
			               * 콜백함수 : 효과가 완료되면 실행되는 함수. ==> 생략도 가능함.
		- show() : 숨겨져 있던 요소를 노출시키는 기능을 하는 메서드.
					형식) $("요소선택").show(효과속도(ms),콜백함수)
	
	 -->
	
	<h2>효과 관련 내용</h2>
	
	<button class="btn1">Hide</button>
	<button class="btn2">Show</button>
	
	
	
</body>
</html>

 

 

 

 

 

06_JQuery

Animation_02

 

 

toggle() : 선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 하는 기능을 하는 메서드.
   형식) $("요소선택").toggle(효과속도, 콜백함수)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn").on("click",function() {
			$("img").toggle(1000);
		});
	});

</script>
</head>
<body>
	
	<!-- 
		toggle() : 선택한 요소가 보이면 숨기고, 숨겨져 있으면 보이게 하는 기능을 하는 메서드.
				   형식) $("요소선택").toggle(효과속도, 콜백함수)
	
	 -->
	
	<img src="images/beauty.jpg">
	
	<br> <br> <br>
	
	<button class="btn">Toggle</button>


</body>
</html>

 

06_JQuery

Animation_03

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").on("click",function(){
			$("img").fadeOut(1000);
		});
		
		$(".btn2").on("click",function() {
			$("img").fadeIn(1000);
		});
		
		$(".btn3").on("click",function() {
			$("img").fadeToggle(1000);
		});
		
		
	});

</script>
</head>
<body>

	<!-- 
		- fadeIn() : 숨겨져 있던 요소가 점점 투명해 지면서 노출이 되는 기능.
					형식) $("요소선택").fadeIn(효과속도, 콜백함수)
		- fadeOut() : 노출이 되어 있던 요소가 점점 사라지는(불투명) 기능.
					형식) $("요소선택").fadeOut(효과속도, 콜백함수)
		- fadeToggle() : 노출이 되어 있던 요소는 점점 사라지고, 사라져 있던
						요소는 점점 선명해 지면서 노출이 되는 기능.
					형식) $("요소선택").fadeToggle(효과속도, 콜백함수)
		
	
	 -->

	<img src="images/beauty.jpg">
	
	<br> <br> <br>
	
	<button class="btn1">fadeOut</button>
	<button class="btn2">fadeIn</button>
	<button class="btn3">fadeToggle</button>

</body>
</html>
06_JQuery

Animation_04

 

투명도 50%

fadeTo() : 선택한 요소를 지정한 투명도의 값까지만 숨기는 기능.
                투명도는 0부터 1사이의 값까지만 입력을 할 수 있음.
                형식) $("요소선택").fadeTo(효과속도, 투명도, 콜백함수) 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").on("click",function() {
			$("img").fadeTo(1000,0.25);
		});
		$(".btn2").on("click",function() {
			$("img").fadeTo(1000,0.5);
		});
		$(".btn3").on("click",function() {
			$("img").fadeTo(1000,0.75);
		});
		$(".btn4").on("click",function() {
			$("img").fadeTo(1000,1);
		});
		
		
	});

</script>
</head>
<body>

	<!-- 
		fadeTo() : 선택한 요소를 지정한 투명도의 값까지만 숨기는 기능.
			                투명도는 0부터 1사이의 값까지만 입력을 할 수 있음.
			                형식) $("요소선택").fadeTo(효과속도, 투명도, 콜백함수)
	
	 -->

	<img src="images/beauty.jpg">
	
	<br> <br> <br>
	
	<button class="btn1">투명도(25%)</button>
	<button class="btn2">투명도(50%)</button>
	<button class="btn3">투명도(75%)</button>
	<button class="btn4">투명도(100%)</button>

</body>
</html>

 

 

 

06_JQuery

Animation_05

 

 

- slideUp() : 선택한 요소를 숨길때 사용하는 메서드.
형식) $("요소선택").slideUp(효과속도, 콜백함수)
- slideDown() : 선택한 요소를 나타내고자 할 때 사용하는 메서드.
형식) $("요소선택").slideDown(효과속도, 콜백함수)
- slideToggle() : 요소가 나타나 있으면 숨기고 , 숨겨져 있으면 나타내는 메서드.
형식) $("요소선택").slideToggle(효과속도, 콜백함수)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$(".btn1").on("click",function() {
			$("img").slideUp(1000);
		})
		$(".btn2").on("click",function() {
			$("img").slideDown(1000);
		});
		$(".btn3").on("click",function() {
			$("img").slideToggle(1000);
		});
	});


</script>
</head>
<body>
	
	<!-- 
		- slideUp() : 선택한 요소를 숨길때 사용하는 메서드.
				형식) $("요소선택").slideUp(효과속도, 콜백함수)
		- slideDown() : 선택한 요소를 나타내고자 할 때 사용하는 메서드.
				형식) $("요소선택").slideDown(효과속도, 콜백함수)
		- slideToggle() : 요소가 나타나 있으면 숨기고 , 숨겨져 있으면 나타내는 메서드.
				형식) $("요소선택").slideToggle(효과속도, 콜백함수)
	 -->

	<img alt="" src="images/beauty.jpg">
	
	<br> <br> <br>
	
	<button class="btn1">slideUp</button>
	<button class="btn2">slideDown</button>
	<button class="btn3">slideToggle</button>

</body>
</html>

 

06_JQuery

Animation_06

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$("h1").animate({marginLeft: "250px"},	/* 5초동안 천천히 움직여서 왼쪽 바깥쪽을 250px을 띄어라. */
				5000,
				function() {
					alert("도착완료");
					
		});
		$("h2").animate({marginLeft: "250px",
							width:"100px",
							opacity:0.25},	/* 불투명도 */
				5000);
		$("h3").animate({marginLeft: "250px"},
				3000,
				function() {
				$("h3").animate(
						{marginLeft: "100px"},			/* 250만큼 갔다가 다시옴 5초동안  */
						2000);							
			
		});
	});

</script>
<style type="text/css">

	h1 {
		width :50px;
		height : 30px;
		background-color: red;
		font-size: 120%;
	}

	h2 {
		width: 50px;
		height: 30px;
		background-color:blue;
		font-size: 120%;
		color: #fff;
	}
	
	h3 {
		width: 50px;
		height: 30px;
		background-color:orange;
		font-size: 120%;
		
	}
	

</style>
</head>
<body>

	<!-- 
		-animate() : 선택한 요소에 다양한 동작(motion) 효과를 적용하는 메서드.
		            형식) $("요소선택").animate({애니메이션 속성 }, 효과속도(ms), 콜백함수)
				==> 애니메이션 속성에는 모션으로 적용할 속성을 CSS(스타일)을 이용해서 입력.
				효과속도는 ms(1/1000) 또는 "slow" ,"normal", "fast"로도 적용이 가능.
	
	 -->

	<h1>내용1</h1>

	<h2>내용2</h2>

	<h3>내용3</h3>
	
</body>
</html>

 

 

 

06_JQuery

Animation_07

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		$("h1").animate({marginLeft: "250px"},
				5000);
		
		$("h2").delay(2000).animate({marginLeft: "250px"},
				3000);
		
		$(".stop").on("click",function() {
			$("h1").stop();		// h1 태그의 동작이 정지가 됨.
			$("h2").stop();		// h2 태그의 동작이 정지가 됨.
			
			
		});
		
	});

</script>
</head>
<body>

	<!-- 
		- stop() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를
				    정지시키는 메서드.
				   형식) $("요소선택").stop()
		- delay() : 선택한 요소에 효과 또는 애니메이션이 적용된 효과를
					지연시키는 메서드.
					형식) $("요소선택").delay()
	
	 -->
	
	
	<h1>내용1</h1>

	<h2>내용2</h2>
	
	<button class="stop">stop</button>

</body>
</html>

 

 

 

06_JQuery

Exam

 

https://www.websiteplanet.com/ko/webtools/lorem-ipsum/

 

무료 로렘 입숨 생성기 – 더미 & 필터 텍스트 생성기

해당 무료 온라인 도구를 사용하여 단어, 문장, 단락을 로렘 입섬 텍스트로 빠르게 생성하세요. 디자인, 모형, 웹 사이트 더미 텍스트가 생성됩니다.

www.websiteplanet.com

==> 아무런 글자 생성

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">

	$(function() {
		
		// 초기값 설정
		let size = 14; 	// 최초 글자 크기 선언.
		
		// 1. 글자체를 선택했을 때 이벤트 처리
		/* $("#fs").change(function() {
			$("#txt_wrap").css("font-family",$(this).val());
		}); */
		
		$("#fs").on("change",function() {
			$("#txt_wrap").css("font-family",$(this).val());
		});
		
		
		// 2. 글자크기 버튼을 클릭했을 때 이벤트 처리
		$(".zoom button").on("click",function() {
			// index() : 현재 요소가 부모의 몇번쨰 자식인지를 반환하는 메서드.
			let btn_index = $(".zoom button").index(this);
			
			if(btn_index ===0) {		// "+" 버튼을 클릭한 경우
				size++;   // size(글자크기)가 하나 증가함.
				$("#txt_wrap").css("font-size", size+"px");
			}else if(btn_index ===2) { // "-" 버튼을 클릭한 경우
				size--;		// size(글자크기)가 하나 감소함.
				$("#txt_wrap").css("font-size", size+"px");
			}else { //"0" 버튼을 클릭한 경우
				size= 14;	//size(글자크기)가 원래 크기로 설정
				$("#txt_wrap").css("font-size", size+"px");
				
			}
		});
		
	});


</script>
</head>
<body>

	<div id="wrap">
		<dl>
			<dt>글자크기</dt>
			<dd class="zoom">
				<button>+</button>		<!-- 0번쩨 인덱스 -->
				<button>0</button>
				<button>-</button>
			</dd>
			
			<dt>글자모양</dt>
			<dd>
				<select name="fs" id="fs">
					<option value="dotum, '돋움', san-serif">돋움</option>
					<option value="gulim, '굴림', san-serif">굴림</option>
					<option value="magun gothic, '맑은고딕', san-serif">맑은고딕</option>
					<option value="Gungsuche, '궁서체', san-serif">궁서</option>
				</select>
			</dd>
		</dl>
	</div>	<!-- id="wrap" end -->
	
	<p id="txt_wrap">
	    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent. In hac habitasse platea dictumst quisque sagittis purus. Pulvinar elementum integer enim neque volutpat ac.
		
		Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia. In tellus integer feugiat scelerisque. Feugiat in fermentum posuere urna nec tincidunt praesent. Porttitor rhoncus dolor purus non enim praesent elementum facilisis. Nisi scelerisque eu ultrices vitae auctor eu augue ut lectus. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus. Et malesuada fames ac turpis egestas sed. Sit amet nisl suscipit adipiscing bibendum est ultricies. Arcu ac tortor dignissim convallis aenean et tortor at. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Eros donec ac odio tempor orci dapibus ultrices. Elementum nibh tellus molestie nunc. Et magnis dis parturient montes nascetur. Est placerat in egestas erat imperdiet. Consequat interdum varius sit amet mattis vulputate enim.
		
		Sit amet nulla facilisi morbi tempus. Nulla facilisi cras fermentum odio eu. Etiam erat velit scelerisque in dictum non consectetur a erat. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Ut sem nulla pharetra diam. Fames ac turpis egestas maecenas. Bibendum neque egestas congue quisque egestas diam. Laoreet id donec ultrices tincidunt arcu non sodales neque. Eget felis eget nunc lobortis mattis aliquam faucibus purus. Faucibus interdum posuere lorem ipsum dolor sit.
		
		Et netus et malesuada fames ac. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Sodales neque sodales ut etiam sit amet nisl purus in. Maecenas volutpat blandit aliquam etiam. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Egestas purus viverra accumsan in nisl. Semper feugiat nibh sed pulvinar proin. Duis convallis convallis tellus id interdum velit laoreet. Ante in nibh mauris cursus mattis molestie. Ut etiam sit amet nisl purus in mollis nunc. Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Tellus at urna condimentum mattis pellentesque id nibh tortor id. Tristique magna sit amet purus gravida quis blandit turpis cursus. Dolor sit amet consectetur adipiscing. Consequat ac felis donec et odio pellentesque diam volutpat. Nunc sed augue lacus viverra vitae congue. Mauris in aliquam sem fringilla ut morbi tincidunt augue.
		
		Elementum eu facilisis sed odio morbi quis commodo odio. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. Accumsan sit amet nulla facilisi morbi tempus. Suscipit tellus mauris a diam maecenas sed enim ut sem. Turpis egestas maecenas pharetra convallis posuere. Nibh venenatis cras sed felis eget velit aliquet. Elementum nisi quis eleifend quam adipiscing. Amet cursus sit amet dictum sit amet justo donec enim. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla. Habitant morbi tristique senectus et netus et malesuada. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Ac turpis egestas maecenas pharetra.
		
		Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu. Sit amet consectetur adipiscing elit. Ultricies integer quis auctor elit. Odio euismod lacinia at quis. Mi eget mauris pharetra et ultrices neque. Ultricies lacus sed turpis tincidunt id aliquet. Nullam vehicula ipsum a arcu. Congue quisque egestas diam in arcu cursus euismod. Sodales neque sodales ut etiam sit. Nisl vel pretium lectus quam id leo in vitae.
	</p>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)

'coding > [2021.08.02~2022.01.24] 수업복습' 카테고리의 다른 글

[수업 86일차] 21.12.11 /Spring 2/ 스프링 라이브러리 파일/lombok 설치/  (0) 2021.12.13
[수업 85일차] 21.12.10 / Spring 1 / 01_NonSpring/ 02_DI  (0) 2021.12.13
[수업 43일차] 21.10.12 / 06_JQuery(2)  (0) 2021.10.13
[수업 42일차] 21.10.08 / 05_JavaScript_09_DOM(2) / 06_JQuery(1)  (0) 2021.10.08
[수업 41일차] 21.10.07 / 05_JavaScript_09_DOM(1)  (0) 2021.10.08
'coding/[2021.08.02~2022.01.24] 수업복습' Related Articles more