코드랩 레퍼런스

See the Pen loading Ball by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen Circle Loading by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen Rotate Bar by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen Menu1 by Webstoryboy (@webstoryboy) on CodePen. Share

Parallax Style 속성 설명 Parallax Basic Parallax 사이트를 만들기 위한 기본 틀입니다. Parallax Basic - Menu Parallax 사이트의 기본 틀과 메뉴를 연동한 샘플한 입니다. Parallax - Dot Menu Parallax 사이트와 닷메뉴를 연동한 샘플입니다. Parallax - Dot Menu Style - Scale Parallax 사이트 닷메뉴 스타일 스케일을 이용한 샘플입니다. Parallax - Dot Menu Style - opacity Parallax 사이트 닷메뉴 스타일 opacity를 이용한 샘플입니다. Parallax - Dot Menu Style - box-shoadow Parallax 사이트 닷메뉴 스타일 box-shoadow를 이..

See the Pen dog by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen Roket Ainmation by Webstoryboy (@webstoryboy) on CodePen. Share

See the Pen Tentacle Animation by Webstoryboy (@webstoryboy) on CodePen. Share

Definition .mouseup() 메서드는 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. Syntax $("selector").mouseup() Compatibility 6 7 8 9 10 11 .mouseup() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마우스를 올려보세요!..

Definition .mouseover() 메서드는 선택한 요소에서 마우스를 올렸을 때 이벤트가 발생합니다. Syntax $("selector").mouseover() Compatibility 6 7 8 9 10 11 .mouseover() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마..

Definition .mouseout() 메서드는 마우스가 벗어 났을 때 이벤트가 발생합니다. Syntax $("selector").mouseout() Compatibility 6 7 8 9 10 11 .mouseout() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마우스를 올려보세요!..

Definition .mousemove() 메서드는 요소 범위 내에서 마우스를 움직였을 때 이벤트가 발생합니다. Syntax $("selector").mousemove() Compatibility 6 7 8 9 10 11 .mousemove() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() :..

Definition .mouseleave() 메서드는 선택한 요소 범위 내에서 마우스가 벗어 났을 때 이벤트가 발생합니다. Syntax $("selector").mouseleave() Compatibility 6 7 8 9 10 11 .mouseleave() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouse..

Definition .mouseenter() 메서드는 선택한 요소 범위 내에서 마우스를 올렸을 때 이벤트가 발생합니다. Syntax $("selector").mouseenter() Compatibility 6 7 8 9 10 11 .mouseenter() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseov..

Definition .mousedown() 메서드는 선택한 요소에서 마우스 버튼을 놀렀을 때 이벤트가 발생합니다. Syntax $("selector").mousedown() Compatibility 6 7 8 9 10 11 .mousedown() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() ..

Definition .hover() 메서드는 마우스를 올렸을 때와 벗어 났을 때 각각 이벤트가 발생합니다. Syntax $("selector").hover() Compatibility 6 7 8 9 10 11 .hover() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마우스를 올려보세요..

Definition .dblclick() 메서드는 선택한 요소를 더블 클릭했을 때 이벤트가 발생합니다. Syntax $("selector").contextMenu() Compatibility 6 7 8 9 10 11 .dblclick() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마우스..

Definition .contextMenu() Syntax $("selector").contextMenu() Compatibility 6 7 8 9 10 11 .contextMenu() Share

Definition .click() 메서드는 선택한 요소를 클릭했을 때 이벤트가 발생합니다. Syntax $("selector").click() Compatibility 6 7 8 9 10 11 .click() Sample1 이벤트 메서드 예제입니다. 이벤트(Event) .click() : 클릭해보세요! .dblclick() : 더블 클릭해보세요! .hover() : 마우스 오버해보세요! .mousedown() : 마우스 버튼을 놀러보세요! .mouseenter() : 마우스를 여기에 올려보세요! .mouseleave() : 마우스를 벗어나보세요! .mousemove() : 마우스를 움직여보세요! .mouseout() : 마우스를 벗어나보세요! .mouseover() : 마우스를 올려보세요! .mouse..

Definition .keyup() 메서드는 선택한 요소에서 키보드를 눌렀다가 떼었을 때 이벤트가 발생합니다. Syntax $("selector").keyup() Compatibility 6 7 8 9 10 11 .keyup() Share

Definition .keypress() 메서드는 선택한 요소에서 키보드를 계속 누르고 있을 때 이벤트가 발생합니다. Syntax $("selector").keypress() Compatibility 6 7 8 9 10 11 .keypress() Share

Definition .keydown() 메서드는 선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. Syntax $("selector").keydown() Compatibility 6 7 8 9 10 11 .keydown() Share

Definition .submit() 메서드는 submit 버튼을 누르면 이벤트가 발생합니다. Syntax $("selector").submit() Compatibility 6 7 8 9 10 11 .submit() Share

Definition .select() 메서드는 입력 양식을 텍스트를 선택했을 때 이벤트가 발생합니다. Syntax $("selector").select() Compatibility 6 7 8 9 10 11 .select() Share

Definition .focusout() 메서드는 포커스가 사라지기 바로 전에 발생합니다. Syntax $("selector").focusout() Compatibility 6 7 8 9 10 11 .focusout() Share

Definition .focusin() 메서드는 선택한 요소에 포커스가 마주어지기 바로 전에 발생합니다. Syntax $("selector").focusin() Compatibility 6 7 8 9 10 11 .focusin() Share

Definition .focus() 메서드는 요소에 포커스를 획득했을 때 이벤트가 발생합니다. Syntax $("selector").focus() Compatibility 6 7 8 9 10 11 .focus() Share

Definition .change() 메서드는 요소에서 값이 변경될 때 이벤트가 발생합니다. Syntax $("selector").change() Compatibility 6 7 8 9 10 11 .change() Share

Definition .blur() 메서드는 포커스가 떠날 때 이벤트가 발생합니다. Syntax $("selector").blur() Compatibility 6 7 8 9 10 11 .blur() Share

Definition .undelegate() 메서드는 지정된 하위 요소에 이벤트를 등록합니다. Syntax $("selector").undelegate() Compatibility 6 7 8 9 10 11 .undelegate() Share