목록2018/01 (97)
코드랩 레퍼런스
Definition .unbind() 메서드는 이벤트를 제거합니다. Syntax $("selector").unbind() Compatibility 6 7 8 9 10 11 .unbind() Share
Definition .triggerHandler() 메서드는 이벤트를 수동으로 발생시킵니다. Syntax $("selector").triggerHandler() Compatibility 6 7 8 9 10 11 .triggerHandler() Share
Definition .trigger() 메서드는 이벤트를 수동으로 발생시킵니다. Syntax $("selector").trigger() Compatibility 6 7 8 9 10 11 .trigger() Share
Definition .one() 메서는 이벤트 처리를 연결합니다. Syntax $("selector").one() Compatibility 6 7 8 9 10 11 .one() Share
Definition .on() 메서드는 선택한 요소의 이벤트를 설정합니다. Syntax $("selector").on() Compatibility 6 7 8 9 10 11 .on() Share
Definition .off() 메서드는 선택한 요소의 이벤트를 제거합니다. Syntax $("selector").off() Compatibility 6 7 8 9 10 11 .off() Share
Definition .delegate() 메서드는 선택한 요소의 지정된 하위요소에 이벤트를 등록합니다. Syntax $("selector").delegate() Compatibility 6 7 8 9 10 11 .delegate() Share
Definition .bind() 메서드는 선택한 요소에 한 개 이상의 이벤트를 등록합니다. Syntax $("selector").bind() Compatibility 6 7 8 9 10 11 .bind() Share
Definition .ready() 메서드는 웹 페이지가 로딩 되었을 때 이벤트가 발생합니다. Syntax $("selector").ready() Compatibility 6 7 8 9 10 11 .ready() Share
Definition .scroll() 메서드는 웹 브라우저 스크롤의 변화가 있을 때 이벤트가 발생합니다. Syntax $("selector").scroll() Compatibility 6 7 8 9 10 11 .scroll() Share
Definition .resize() 메서드는 웹 브라우저 사이즈의 변화가 있을 때 이벤트가 발생합니다. Syntax $("selector").resize() Compatibility 6 7 8 9 10 11 .resize() Share
Definition .slideUp() 메서드는 선택한 요소를 슬라이딩으로 숨깁니다. Syntax $("selector").slideUp() Compatibility 6 7 8 9 10 11 .slideUp() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 없어..
Definition .slideToggle() 메서드는 숨김/노출을 슬라이딩으로 합니다. Syntax $("selector").slideToggle() Compatibility 6 7 8 9 10 11 .slideToggle() Share
Definition .slideDown() 메서드는 선택한 요소를 슬라이딩으로 보여줍니다. Syntax $("selector").slideDown() Compatibility 6 7 8 9 10 11 .slideDown() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); Sample2 클릭하면 이미지가 속도에 따라 나타나는 예제입..
Definition .fadeToggle() 메서드는 숨김/노출을 천천히 합니다. Syntax $("selector").fadeToggle() Compatibility 6 7 8 9 10 11 .fadeToggle() Share
Definition .fadeTo() 메서드는 선택한 요소 투명도를 조절합니다. Syntax $("selector").fadeTo() Compatibility 6 7 8 9 10 11 .fadeTo() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 5 $(".list .one1 img").fadeTo("slow",0.1); $(".list .one2 img").fadeTo("normal",0.2); $(".list .one3 img").fadeTo("fast",0.3); $(".list .one4 img").fadeTo(1000,0.4); $(".list .one5 img").fadeTo(3000,0.4); $(".list img").fadeTo("slow",1)..
Definition .fadeOut() 메서는 선택한 요소를 천천히 숨김니다. Syntax $("selector").fadeOut() Compatibility 6 7 8 9 10 11 .fadeOut() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 속도에 따라..
Definition .fadeIn() 메서드는 선택한 요소를 천천히 보여줍니다. Syntax $("selector").fadeIn() Compatibility 6 7 8 9 10 11 .fadeIn() Sample1 클릭하면 이미지가 나타나는 예제입니다. 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); 효과(Effect) 1 2 3 4 $(".one1").show(); $(".one2").fadeIn(); $(".one3").slideDown(); $(".list li").hide(); Sample2 클릭하면 이미지가 속도에 따라 나타나는 예제입니다. 효과(Effec..
Definition .stop() 메서드는 실행중인 애니메이션을 정지합니다. Syntax $("selector").stop() Compatibility 6 7 8 9 10 11 .stop() Share
Definition .queue() 메서드는 선택한 요소 스택에 대기 중인 큐를 반환하거나 추가할 수 있습니다. Syntax $("selector").queue() Compatibility 6 7 8 9 10 11 .queue() Share
Definition .finish() 메서드는 선택한 요소의 진행중인 애니메이션을 강제로 종료합니다. Syntax $("selector").finish(); Compatibility 6 7 8 9 10 11 .finish() Share
Definition .dequeue() 메서드는 스택에 쌓인 큐를 모두 제거합니다. Syntax $("selector").dequeue(); Compatibility 6 7 8 9 10 11 .dequeue() Share
Definition .delay() 메서드는 애니메이션 효과를 지연합니다. Syntax $("selector").delay() Compatibility 6 7 8 9 10 11 .delay() Share
Definition .clearQueue() 메서드는 첫 번째 큐만 실행하고 나머지 대기 중인 큐는 모두 삭제합니다. Syntax $("selector").clearQueue(); Compatibility 6 7 8 9 10 11 .clearQueue() Share
Definition .animate() 메서드는 선택한 요소에 애니메이션을 적용합니다. Syntax $("selector").animate(); Compatibility 6 7 8 9 10 11 .animate() Sample1 클릭하면 이미지가 움직이는 예제입니다. animation Click Sample2 클릭하면 width값이 변경되는 예제입니다. animation Click Sample3 slideToggle이 되는 애니메이션 예제입니다. animation Click Sample4 크기와 투명도가 변경되는 애니메이션 예제입니다. animation Click Sample5 크기, 투명도, 보더레디우스가 변경되는 애니메이션 예제입니다. animation Click Sample6 크기, 투명도, 보더가..
Definition .toggle() 메서드는 선택한 요소를 숨김/노출합니다. Syntax $("selector").toggle(); Compatibility 6 7 8 9 10 11 .toggle() Sample1 클릭하면 없어지고, 클릭하면 나타나는 예제입니다. 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Click $(".list li").toggle("fast"); Click $(".list li").toggle("normal"); Click $(".list li").toggle("slow"); Click $(".list li").toggle(2000); 효과(Effect) 1 2 3 4 5 Click $(".list li").toggle(); Cli..
Definition .show() 메서드는 선택한 요소를 보여줍니다. Syntax $("selector").show(); Compatibility 6 7 8 9 10 11 .show() Sample1 이미지를 보여주는 예제입니다. 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); 효과(Effect) 1 2 3 $(".list .one1 img").show(); $(".list .one2 img").fadeIn(); $(".list .one3 img").slidedown(); $(".list img").hide(); S..
Definition .hide() 메서드는 선택한 요소를 숨김니다. Syntax $("selector").hide(); Compatibility 6 7 8 9 10 11 .hide() Sample1 클릭하면 이미지가 없어지는 예제입니다. 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); 효과(Effect) 1 2 3 $(".one1 img").hide(); $(".one2 img").fadeOut(); $(".one3 img").slideUp(); $(".list img").show(); Sample2 클릭하면 이미지가 속도에 따라 없어지는 예제입니다..
Background-gradient는 백그라운드 그라디언트 설정을 할 수 있습니다. 속성 설명 linear-gradient 선형 그라데이션 백그라운를 설정합니다. radial-gradient 원형 그라데이션 백그라운를 설정합니다. repeating-linear-gradient 반복 선형 그라데이션 백그라운를 설정합니다. repeating-radial-gradient 반복 원형 그라데이션 백그라운를 설정합니다. Share
레이어 팝업 스타일1 See the Pen layer Popup Style1 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일2 See the Pen layer Popup Style2 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일3 See the Pen layer Popup Style3 by Webstoryboy (@webstoryboy) on CodePen. 레이어 팝업 스타일4 See the Pen layer Popup Style4 by Webstoryboy (@webstoryboy) on CodePen. Share