당 떨어질 땐 초코딩

속성 window.name : 창의 이름에 접근할 수 있는 객체 속성 window.history : 현재 창에서 열었던 URL을 저장 window.document : 현재 문서의 내용을 가리킴 window.onfocus : 클릭이나 키보드 입력, 기타 사용자가 입력하는 행위를 감지 window.onblur : 현재 창이 포커스를 잃었음을 감지 window.onblur = blurResponse; function blurResponse(){ //함수 정의 } 메소드 window.setTimeout( ) : 함수나 문장을 실행하기 전에 일정 시간 기다리도록 함 setTimeout(myFunction, 4000); window.clearTimeout( ) : 기다리도록 예약한 타이머를 취소할 때 사용 wind..

내장 이펙트 : 요소의 CSS 속성을 변화시키면서 움직이게 만듦 .hide( ) : 선택한 요소의 display 속성을 none으로 바꾸고 레이아웃에서 없앰 .show( ) : 선택한 요소의 display 속성을 바꿔서 보이게 만듦 .toggle( ) : 요소가 숨겨진 상태라면 그 요소를 보이게 만들고, 보이는 상태면 숨김 .fadeIn( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 0에서 100으로 바꿈 .fadeTo( ) : 요소를 지정한 불투명도 퍼센트까지 애니메이트 가능 .fadeOut( ) : 선택한 요소의 CSS opacity(불투명도) 속성을 100에서 0으로 바꿈 요소가 보이지는 않지만 그 자리는 유지됨 .slideUp( ) : DOM이 선택한 요소의 높이를 0으로 바꾼 다..

DOM TREE 이동 메소드 .parent( ) : 해당 요소 위에 있는 요소 선택 $('p').parent() //body .children( ) : 해당 요소 아래에 있는 요소 선택 $('ul').children() //li .prev( ) : 해당 요소 왼쪽에 있는 형제 요소 선택 $('p').prev() //h1 .next( ) : 해동 요소 오른쪽에 있는 형제 요서 선택 $('title').next() //meta 메소드 체인 사용 - 더 높이, 더 낮게, 더 깊이 이동할 때 사용 - 더 효율적으로 이동하고 수정 가능 - 메소드를 추가하너가 여러개를 조합하여 사용 가능 $('a').parent().parent() //body $('title').parent().next(.parent() //ht..

이벤트 : 페이지에서 어떤 일이 일어 났을 때 코드를 실행하는 매커니즘 - 이벤트가 일어났을 때 실행되는 코드가 함수인데, 이를 사용하면 jQuery를 더 효율적으로 만들고 코드 재활용 가능 bind : 이벤트 묶기 - 이벤트 리스너는 자바스크립트 해석기에 어떤 함수를 넘겨줘야 할지 알게 됨 - .bind( ) 메소드 사용 1. 단축 메소드 - DOM 요소가 이미 존재 할 때만 사용 가능 $("#myElement").click(function() { alert($(this).text()); } 2. DOM 요소를 새로 만들었을 때처럼, 페이지를 불러온 뒤에 추가된 요소에도 이벤트 리스너 등록 가능 $("#myElement").bind("click", function() { alert($(this).tex..

객체 : 데이터명과 값을 설정하여 저장할 때 사용 { 데이터명1 : 값1, 데이터명2 : 값2, 데이터명3 : 값3 } 변수 : 하나의 데이터를 저장 var 변수명 = 데이터; - 프로그램에서 데이터를 유지 - 메소드 밖에서는 사용 불가 배열 : 데이터를 순차적으로 저장 var 변수명 = [ 데이터1, 데이터2, 데이터3 ]; - 객체 선언 방법과 비슷하지만 '데이터명'을 지정하지 않는다는 차이 this : 데이터 수집 전용 변수 - this에 저장되는 데이터는 JavaScript의 실행 내용에 따라 자동으로 변환 - 사용 이유 1. 처리 성능 향상 2. 같은 코드 여러번 사용 가능 3. $( ) 함수에 여러 선택자를 지정한 경우, 처리 시점을 나눌 수 있음 - on( ) 메소드안에서 this를 지정하면..

animate( ) : 처리 대상에 애니메이션 효과를 줄 때 사용하는 메소드 .anmaite({ /* 첫 번째 매개 변수 */ 'CSS 속성 1' : '값 1', 'CSS 속성 2' : '값 2', 'CSS 속성 3' : '값 3' }, /* 애니메이션 실행 시간 */, /* 이징 종류 */, function() { //이벤트 } ); - 첫 번째 매개 변수 : 애니메이션 효과 실행 완료 시, 외형을 표현하는 CSS 속성과 값을 전달 - 애니메이션 실행 시간 : 얼마만큼 시간이 지난 후에 애니메이션 효과를 적용하는지 지정 - 이징 종류 : 애니메이션 효과의 변화 속도 - linear : 같은 속도, 완급 조절 없이 일정한 속도로 움직임 - swing : 가벼운 완급 조절, 애니메이션 효과의 속도가 약간 ..

on( ) : 특정 사건이 발생하는 시점에 실행할 명령을 설정하는 메소드 - on( ) 메소드의 첫 번째 매개변수는 이벤트 타입을, 두 번째 매개 변수는 이벤트 핸들러를 전달 on('이벤트 타입' . '이벤트 핸들러'); - 이벤트 : 특정 사건 - 이벤트 타입 : 이벤트 유형 - 이벤트 핸들러: 실행하려는 명령(함수) 주요 이벤트 타입 이벤트 타입 해당 시점 mouseover 요소에 마우스 포인터를 올려놓았을 때 mouseout 요소에서 마우스 포인터가 벗어날 때 mousedown 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭할 때 mouseup 요소에 마우스 포인터를 올려놓은 상태에서 해당 요소를 클릭했다가 땔 때 mousemove 요소 안에서 마우스 포인터를 움직일 대 click 요소를..

CSS 스타일 변경 $(function(){ $('선택자').css('속성', '값'); } - 선택자 : CSS와 같은 선택자를 지정 - 속성 : CSS 속성 지정 - 값 : 속성에 설정할 값을 지정 - 명령 대상 : $('선택자') - 명령 내용 : css('속성', '값') -> '명령대상에 명령 내용을 보낸다' 라고 해석 명령 대상 id="hello" //HTML $('#hello') // jQuery - css( ) 메소드의 명령 대상이 되는 것은 id의 값이 정의된 HTML 요소 - $( ) 의미 : 'HTML 요소를 기반에 두고 jQuery의 고유 요소를 생성한다' - jQuery 객체 : $( ) 함수를 통해 jQuery 고유의 형식으로 변횐된 요소 명령 내용 - 의미 : CSS의 '속성'..

https://api.jquery.com/ jQuery : 자바스크립트 라이브러리 - 목적 : 웹 사이트에서 자바스크립트를 사용하는 것이 훨씬 쉬워지도록 하는 것 - 여러 줄의 자바스크립트 코드를 필요로 하는 많은 일반적인 작업을 한 줄의 코드로 작업할 수 있는 메서드로 실현 가능 - 기능 1. HTML/DOM 조작 : 특정 요소를 쉽게 찾고, 내용 변경이 간단 2. CSS 조작 : 특정 요소에 대한 스타일의 변경 등의 작업이 간단 3. HTML 이벤트 : 이벤트를 간단히 처리 4. 효과 및 애니메이션 : 웹 페이지 상의 효과나 애니메이션이 가능 5. AJAX : 네트워크를 통하여 서버와의 정보 교류를 쉽게 함 다운로드 1. cmd 창 열기 2. npm install jquery 입력 3. 사용 - HT..

회원 기본 정보 아이디 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호 확인 메일 주소 예) id@domain.com 이름 개인 신상 정보 주민등록번호 - 예)123456-1234567 생일 년 월