noname02

setTimeout을 사용한다. var delay = function() {동작} setTimeout(delay, timems); 이 때 timems가 같으면 결국 쓰나 안쓰나 똑같다. 따라서 .each(function(i) { var delay ... setTimeout(delay, timems * i);} 와 같이 i를 이용해 시간을 눌려주는 방법을 생각해볼 수 있다.

CSS로 애니메이션효과를 만들 수 있다.애니메이션은 우선 키프레임을 정의하여 효과를 부여한다. 1234567@keyframes name { 0% { ... } n% { ... } 100% { ... }}cs 와 같이 키프레임을 정의한다. 키프레임을 정의했으면 애니메이션을 적용할 셀렉터에 animation 프로퍼티로 적용한다. 1234567891011.selector { animation: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state;} cs anim..

.each().promise().done()each안에 animate가 있는 경우, animate도 모두 끝난 경우에 done이 작동한다. 앵커와 관련된 메서드를 작성하는 경우, return false;를 넣으면 앵커의 기본기능이 작동하지 않는다.이는 event.preventDefault()와 같은 역할을 한다.href가 설정되어있지 않아도 페이지가 현재페이지로 이동하기 때문에 새로고침 효과가 발생하는 것도 막을 수 있다. 커스텀으로 필터링을 하려면 filter의 function을 이용해도 되고, $.expr[':']을 통해 커스텀 셀렉터를 확장한 뒤 .filter(':customSelector')로 필터링할 수도 있다.

셀렉터 :animated가 있다.이는 애니메이션중인 요소를 찾는다. 이를 is와 결합해서 $('selector').is(':animated'); 를 사용한다.애니메이션중이면 true, 아니면 false를 반환한다.

offset()과 position()은 DOM엘리먼트의 위치를 찾는데 사용되는 jQuery메서드다.각각 top, left값이 담긴 위치 오브젝트를 반환한다.여기서 offset()은 document에서의 위치를 반환하고, position()은 parent엘리먼트에서의 위치를 반환한다.여기서 중요한 점은 position()을 사용할 때에는 당연히 css의 position 속성이 적용되어있어야 한다는 점이다. 예를 들어서 와 같이 되어있고, box1은 200x200, box2는 100x100이라고 치자.근데 box1에는 position 속성이 없고 box2에는 position: relative; 속성이 있는 경우box2에 대한 position()을 하면 box1에 대한 위치값이 아닌 body에 대한 위치값, ..

※내용의 정확성은 보장 못함. 비전문가인 본인이 이해하기 쉽게 정리하는 글임을 밝힘. Deferred 객체는 여러가지 용도로 쓰인다.jQuery API 문서를 보면 A factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function. 라고 설명되어있다. 즉 콜백큐, 동기/비동기 작업에 대한 성공/실패에 따른 콜백을 다룰 수 있게 한다.대체적으로 ajax에 사용되고..

live메서드는 현재와 미래의 요소에 대해 이벤트를 바인딩하는 메서드이다.코드를 짤 때, 셀렉터로 선택된 요소들은 스크립트가 로딩되었을 때에 있던 DOM 엘리먼트들이다.그런데 만약 append, appendTo 등으로 추가된 요소가 있다면 스크립트가 실행되지 않을 것이다.특히나 이벤트들이 그럴 수 있다. 이럴 때 사용하는게 live이다.그런데 live는 Deprecated 되었으므로 이는 on으로 대체하면 된다. 1$(document).on('event', 'selector', function() { ... });cs 으로 사용하면 된당.

1234$('select').on(load, function() { console.log('#1'); });console.log('#2');cs 이 경우 #2가 먼저 로그가 찍히고, 그 다음 #1이 로그가 찍힌다. 당연한 내용.그래서 이런 코드가 있다. 123456789101112131415161718192021222324$('#content > img').click( function() { var $this = $(this); var title = $this.attr('title'); $desc.html(title).show(); $loading.show(); $('').on('load', function() { var $img = $(this); $loading.hide(); $('#panel').a..

1var image = new Image();cs 와 같이 빈 이미지 엘리먼트를 담은 오브젝트를 생성할 수 있다.이 오브젝트 프로퍼티인 src에 이미지 주소값을 넣으면, width값과 height값이 자동으로 갱신된다. 12345678var resize = function ($image) { var windowH = $(window).height() - 100; var windowW = $(window).width() - 80; var image = new Image(); image.src = $image.attr('src'); var imageH = image.height; var imageW = image.width;cs 왜 imageH = $image.height(); 를 사용하지 않는 것일까? 이..

1. div박스 내에 이미지를 삽입했는데 이미지 아래에 div박스 공간이 남는다면, 이미지에 vertical-align: bottom 속성을 주면 박스가 이미지로 꽉 차게 된다. (모던 웹사이트 디자인의 정석 - 207p) 2. 미디어쿼리(뿐만 아니라 무언가 덮어씌울 css를 설정할 때)작성할 때, 당연하지만 css 선택자의 레벨에 따른 우선순위를 꼭 맞춰서 작성해줘야 한다. 3. position: fixed에서 left, right 값을 0으로 지정하고 margin: 0 auto; 를 주면 가운데로 배치된다. 4. 화면 밑에서 slide-up 되는 효과 : div박스 height를 0으로 설정하고 bottom: 0으로 바닥에 붙인 뒤, height: 100%로 트랜지션을 주면 쭈욱 올라옴. 5. pos..

어떤 여러 메뉴들이 있고, 이 메뉴들에 대한 hover 이벤트에 대해 jQuery 애니메이션을 설정하는 경우가 있을 수 있다.보통 이러한 메뉴들은 class 이름이 같기 마련인데, 만약 이에 대해 아무 생각없이 $('class').hover~~ 와 같이 처리하게 된다면, 한 메뉴만 hover이벤트가 발생해도 다른 모든 메뉴들까지 덩달아 애니메이션이 되는 것을 볼 수 있다.이는 지극히 당연하게도 jQuery선택자가 모든 class 요소를 선택하였기 때문이다.따라서 커서가 올라간 메뉴에 대해서만 이벤트를 발생시키려면, jquery 선택자 두번째 매개변수에 $(this)를 줌으로써 실행 컨텍스트 범위를 한정시킬 수 있다.즉 $('class').hover(function() {$this = $(this);$('..

float이 적용된 div박스가 3개가 있다고 하자. 첫번째 div박스부터 div1, div2, div3라고 하자.그럼 여기서 div2의 클리어 속성은 div1에 대해서만 적용이 된다.div1에 클리어 속성을 넣어봐야 어떠한 변화도 일어나지 않는다. div2, div3와는 상관이 없다. 왜냐하면 div1에 영향을 주는 float이 없기 때문이다.

어떤 메뉴에 hover이벤트가 발생했을 경우 css 디자인이 바뀌는 경우가 있을 수 있다.그런데 이 메뉴에 hover 이벤트가 발생하면, 어떤 특정한 요소 A가 이 메뉴를 가리는 효과가 있다고 하자.그렇게 되면 A가 메뉴를 가리면서 마우스 포인터가 A위에 놓이게 되고, 이에 따라 메뉴 hover의 효과가 사라지는 경우가 발생할 수 있다.따라서 hover가 발생하면 :hover로 가상클래스로 css를 정의하지 말고, hover 클래스 등 특정 클래스를 add해주고 hover에서 나오는 경우 다시 hover 클래스를 remove해주는 식으로 하면 메뉴 위에 어떤 효과가 나타나서 hover이벤트가 풀려도 디자인은 그대로 hover가 되있는 것처럼 만들 수 있다. 참고예제 : http://tympanus.net..

123456var d = 1000;$('#menu span').each(function() { $(this).stop().animate({ 'top': '-17px' }, d += 250);});cs #menu의 span을 선택한 뒤 각각 animate를 적용하고있다.그런데 여기서 animate duration 값에 d += 250 을 주었다.이는 duration 매개변수의 수식이 일단 계산되고, 그 다음 값을 적용시키는데맨 처음엔 1250ms, 그다음 엘리먼트에는 1500ms, 그 다음 엘리먼트에는 1750ms ... 이런식으로 지연을 줌으로써엘리먼트들이 동시에 효과가 적용되는것이 아니라 각각 250ms씩 속도가 지연되면서 계단식으로 효과가보이는 효과를 줄 수 있다.

자바스크립트의 ||, && 연산자는 불린값을 리턴하지 않는다. 값 자체를 리턴한다.따라서 값의 성질(true, false)에 따라 앞의 값이 출력되던지, 뒤의 값이 출력되던지 한다. or의 경우, 둘 중 하나만 true면 true를 반환하니까 만약 앞의 값이 false라면 뒤의 값을 리턴한다.뒤의 값이 true라면 true가 나오는 것이고, false면 false가 나올 테니까.물론 앞의 값이 true라면 뒤의 값을 볼 필요도 없이 앞의 값을 리턴한다. and의 경우는 or과 반대다. 둘 중 하나만 false면 false를 반환하니까 만약 앞의 값이 true라면 뒤의 값을 리턴한다. 마찬가지로 앞의 값이 false면 그냥 앞의 값을 리턴한다. 중요한 점은, 첫줄에서도 강조했듯이 불린값을 리턴하는게 아니라..

함수의 인수 옆에 use (...) 키워드를 사용할 수 있는데, 이 경우use 키워드 인수 안에 함수 외부의 변수를 넣으면, 함수 외부의 값을 사용할 수 있게 된다.단, call by value 이므로 함수 외부의 변수값은 변함이 없다. 단지 값의 복사만 이루어 질 뿐이다.

1. 상수 정수는 INT와 BIGINT를 사용실수는 DOUBLE을 사용 2. 문자열 255자까지는 VARCHAR 사용65535자까지는 TEXT 사용4294967295자까지는 LONGTEXT 사용 VARCHAR(n) 이면 n자까지 저장됨. 3. 날짜와 시간 0000-00-00 00:00:00의 형태는 DATETIME0000-00-00의 형태는 DATE(날짜)년도는 YEAR시간은 TIME

문자열 값은 작은따옴표나 큰따옴표로 묶어서 작성한다.여러개의 칼럼이나 값을 넣는 경우 괄호로 묶고 콤마로 구분해준다.0-1. Syntax USE- DATABASE name : db 선택 CREATE- DATABASE name : 데이터베이스 생성- TABLE name : 테이블 생성- name : 칼럼 생성- DEFAULT value : 기본값을 value로 설정- AUTO_INCREMENT : 연속으로 번호 부여(기본키 속성 필수)- PRIMARY KEY : 기본키 속성(중복(X), NULL(X))- UNIQUE KEY : 고유키 속성(중복(X), NULL(O))- INDEX name : 인덱스 name 생성- ON tbname(column_name) : 테이블 tbname의 칼럼 column_name..

쿠키클라이언트에 저장하는 정보.사용자가 열어볼 수 있으므로 중요한 정보는 저장하지 않는 편이 좋다.$_COOKIE["이름"] 으로 쿠키값을 가져올 수 있다.setcookie(쿠키이름 [,쿠키값, 만료시간, 경로, 도메인, 보안]);쿠키이름 : 쿠키의 이름쿠키값 : 쿠키의 값만료 시간 : 초단위. 쿠키가 만료되는 시간을 설정. 지정하지 않으면 쿠키가 파일로 생성되지 않고 헤더에만 존재하여 브라우저가 닫히면 그와 동시에 쿠키도 사라진다.경로 : 쿠키를 사용할 수 있는 경로. / 로 설정하는 경우 웹사이트 모든 경로에서 사용 가능도메인 : 쿠키를 사용할 수 있는 도메인. 서브도메인에서도 사용할 수 있게끔 해준다. 예를 들어 naver.com 으로 설정하면 cafe.naver.com 에서도 사용 가능하다.보안 ..

php에서는 $_GET['name']이나 $_POST['name']으로 값을 가져올 수 있다. ... - 폼 태그 속성name : 폼의 이름(php에서 이름을 통해 값을 가져옴)action : 폼의 정보가 전달될 주소.(php스크립트 파일주소)method : 폼의 정보 전달 방식(get, post)enctype : 폼 데이터의 인코딩 타입 (post 방식일 경우 한정)target : 폼 데이터의 처리 후 보여줄 프레임이나 창의 이름(앵커의 target과 같음)- 폼 태그 이벤트 처리 함수onsubmit : submit을 실행하였을 때 이벤트 처리onreset : reset을 실행하였을 때 이벤트 처리 - type=" "text : 일반 텍스트 입력 상자password : 비밀번호 입력 상자file : 파..

1. 변수자바스크립트처럼 자료형을 결정짓지 않는다.변수 선언 키워드도 필요 없이 변수를 선언한다.jQuery 변수형처럼 $name으로 선언한다.함수 외부에 선언된 변수를 사용하려면 함수 내부에서 global 키워드로 재선언 해줘야 한다.define("name", "value"); 로 상수를 선언한다.유니코드 기반이므로 변수명을 한글을 포함한 다른 언어로도 선언 가능하다.2. 연산자$a === $b 는 자료형과 값이 같을 경우에만 참이다.$a !== $b 는 자료형과 값이 같지 않을 경우 참이다.두 문자열 변수를 결합하는 연산자는 . 이다. $c = $a . $b$c .= "안녕하세요" 는 $c = $c . "안녕하세요" 와 같다.두 배열을 결합하는 연산자는 + 이다.` 연산자는 쉘 명령을 실행한다.@ 연..

읽어오고자 하는 대상의 내용이 단순 text나 html 태그를 표현하며 읽어온 내용을 특정 요소에 출력하는 것만을 목적으로 할 경우, load 메서드를 사용해 코드를 축약할 수 있다. $("Selector").load("URL" [, function() { 성공했을 경우 콜백 메서드 }]); html파일을 불러올 경우 특정 요소만을 불러올 수 있는데 셀렉터를 사용하듯 사용하면 된다. $("Selector").load("URL #name" [, function() { }]);와 같은 방식으로 표현을 하면 된다.여기서 Selector는 load된 txt나 html 내용을 붙여넣을 셀렉터를 뜻한다.

날이 갈수록 개인정보 보호에 관련하여 보안정책을 점진적으로 강화하고 있습니다. 이에 따라 Web에서 회원가입 시 Password 설정을 복잡해진 보안정책에 맞추다 보니 복잡하게 조합해야만 정상적으로 가입을 할 수 있습니다. 이러한 강화된 보안정책 때문에 기존에 사용하던 자신만의 Password를 인위적으로 보안정책에 맞추는 경우가 많을 것입니다. 그러다 보니, 종종 Log-In을 할 때 Password를 잊어버려서 곤란한 상황이 발생하는 경우도 한번쯤은 있었을 것입니다. 일반적으로 이렇게 복잡한 조건이 필요한 경우 사용자에게 입력을 받을 때 여러 가지 조건을 주면서 정해진 규칙 안에서만 입력을 하도록 유도를 하고 있습니다. 이번 프로젝트를 진행하면서 사용자가 입력하여 DB에 형식에 맞도록 저장하기 위해 ..

개발 작업을 간단하게 처리하거나 자동화하는 jQuery는 자바스크립트의 핵심 라이브러리가 된지 오래입니다. 많은 개발자들이 jQuery의 기본 기능을 사용하여 작업을 수행합니다. 하지만 더 나아가 플러그-인을 사용하여 jQuery를 확장하여 사용하기도 합니다. 이미 배포된 플러그-인을 적용해서 사용할 수 있지만 직접 플러그-인을 개발하여 프로젝트에서 활용한다면 개발팀의 기술 수준 뿐만 아니라 개발 생산성을 더 높일 수 있습니다. 오늘은 왜 플러그-인이 필요한 지 알아본 다음, 간단한 플러그-인을 예로, 플러그-인 설계 규칙과 개발 방법을 소개합니다. 왜 jQuery 플러그-인을 만드는가다음과 같은 두가지 이유가 있습니다.일관된 코드 스타일을 유지한다.jQuery의 기반 코드를 잘 활용한다.jQuery가 ..

$("Selector").length 로 판단! 0이면 없는 것.