190919 첫수업

w3c

https://www.w3schools.com/jquery/jquery_intro.asp

제이쿼리 코드가 예쁘게 정리된 곳

https://oscarotero.com/jquery/

다룸, 다음

http://darum.daum.net/

비쥬얼스튜디오 단축 사용법

script = sc 누르고 tab 누르기

자바스크립트의 구성

Basic syntax is: $(selector).action()

셀렉터.메서드(functioh(){

명령어;

명령어;

});

$ = 제이쿼리

ex1. 이벤트 프로그램 실행하기

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

<script>

// alert() //결과값 확인. 실행여부 체크할때 사용

$("p").click(function(){

$(this).hide();

}); //$("p")셀렉터를 .click 클릭하면 펑션 안에 내용을 실행해라

</script>

<script>

// alert() //결과값 확인. 실행여부 체크할때 사용

$(document).ready(function(){ //도큐먼트에 있는 내용을 모두 읽은 후에 실행해라

$("p").click(function(){

$(this).hide();

});

}); //이벤트 프로그램 $("p")셀렉터를 .click 클릭하면 펑션 안에 내용을 실행해라

</script>

<p>If you click on me, I will disappear.</p>

<p>Click me away!</p>

<p>Click me too!</p>

참고

<script>

$("p").on({

mouseenter: function(){

$(this).css("background-color", "lightgray");

},

mouseleave: function(){

$(this).css("background-color", "lightblue");

},

click: function(){

$(this).css("background-color", "yellow");

}

});

</script>

가로세로중앙정렬 /* 익스 10이하에서는 작동되지 않음 */

https://codepen.io/enxaneta/full/adLPwv

display: flex;/* 부모에 자식을 붙여주세요라는 뜻 */

justify-content: space-between;/* 가로를 서로 나누어 정렬하세요. 왼쪽 오른쪽 정렬 */

align-items: center;/* 세로 정렬을 가운데로 */