프로그래밍 공부/jQuery (7) 썸네일형 리스트형 jQuery - 이미지 슬라이더 DOCTYPE html> Document *{ margin: 0px; padding: 0px; } /* Animation Canvas */ .animation-canvas { position: relative; overflow: hidden; width: 600px; height: 400px; } /* Slider Panel */ .slider-panel { width: 3000px; position: relative; } .slider-image { float: left; width: 600px; height: 400px; } /* Slider Text Panel */ .slider-text-panel { position: absolute; top: 200; left: 50px; } .slider-te.. jQuery - 캔버스 애니메이션을 위한 틀 과거에는 대부분 플래시로 이미지 슬라이더를 구현했지만, 지금은 자바스크립트 만으로 구현이 가능하다. 자바스크립트로 플래시 또는 실버라이트의 시각적 효과를 구현 하려면 다음 네 가지 사항을 CSS로 미리 지정해야 한다. 1. 캔버스의 width 스타일 속성과 height 스타일 속성은 필수로 지정한다. 2. 캔버스의 position 스타일 속성은 relative로 지정한다. 3. 캔버스의 overflow 스타일 속성은 hidden으로 지정한다. 4. 구성 요소의 position 스타일 속성은 absolute로 지정한다. DOCTYPE html> Document * { margin: 0px; padding: 0px; } #canvas { background-color: gray; width: 600px; h.. jQuery - 효과 jQuery 라이브러리를 이용한 움직임 효과에 관한 내용들이다. 메서드 이름 설명 show() 문서 객체를 크게 확대하며 보여준다. hide() 문서 객체를 작게 축소하며 사라지게 한다. toggle() show() 메서드와 hide() 메서드를 번갈아 실행한다. slideDown() 문서 객체를 슬라이드 효과와 함께 보여준다. slideUp() 문서 객체를 슬라이드 효과와 함께 사라지게 한다. slideToggle() slideDown() 메서드와 slideUp() 메서드를 번갈아 실행한다. fadeIn() 문서 객체를 선명하게 보여준다. fadeout() 문서 객체를 흐릿하게 사라지게 한다. fadeToggle() fadeIn() 메서드와 fadeout() 메서드를 번갈아 실행한다. animate().. jQuery - 이벤트 下 모든 이벤트 리스너는 이벤트 객체가 존재한다. 물론 자바스크립트에서의 이벤트 객체와 jQuery에서의 이벤트 객체는 완전히 같지는 않다. 아래는 jQuery에서 자주 사용하는 이벤트 객체의 속성이다. 이벤트 객체 속성 설명 event.pageX 브라우저 화면을 기준으로 한 마우스의 X좌표 위치 event.pageY 브라우저 화면을 기준으로 한 마우스의 Y좌표 위치 event.preventDefault() 기본 이벤트를 제거한다. even.stopPropagation() 이벤트 전달(버블링, 캡처링)을 제거한다. event.preventDefault()와 event.stopPropagation()은 이전에 살펴본 내용으로, event.preventDefault()는 태그 같이 기본적으로 이벤트를 가진 태그.. jQuery - 이벤트 上 jQuery를 이용하면 이벤트를 연결하는 방법이 기존에 자바스크립트에서 이벤트를 연결 하는 것보다 편하게 이용할 수 있다. 메서드 이름 설명 on() 이벤트를 연결한다. off() 이벤트 연결을 제거한다. one() 이벤트를 한 번만 연결한다. 위의 3개의 메서드를 사용한다. 사용하지 않아도 문제는 없다. DOCTYPE html> Document HEADER jQuery - 문서 객체 조작 기존에 자바스크립트에서 문서 객체 모델(DOM, Document Object Model)을 배웠는데 jQuery를 이용하면 복잡한 문서 객체 모델을 쉽게 다룰 수 있게 된다. 문서 객체의 게터(Getter)와 세터(Setter) jQuery를 적용하는 방법에는 여러가지가 존재한다. 먼저 jQuery에서 $란 jQuery를 나타내는 식별자이다. 실제로 jQuery의 스크립트를 열어보면 'window.jQuery = window.$ = jQuery라는 문장을 찾을 수 있다. jQuery라는 식별자를 사용해도 인식이 되고 $를 써도 jQuery로 인식이 된다. 게터와 세터의 차이점은 세터(Setter)는 jQuery 객체를 리턴하고, 게터(Getter)는 매개변수를 하나만 사용하고 문자열을 리턴한다. 세터(S.. jQuery - jQuery 자바스크립트 라이브러리 jQuery는 모든 브라우저에서 동작하는 클라이언트 자바스크립트 라이브러리이다. 2006년 1월에 발표 되었고, 무료로 사용 가능한 오픈 소스 라이브러리이다. jQuery는 다음의 기능이 있다. 1. 문서 객체 모델과 관련된 처리를 쉽게 구현 2. 일관된 이벤트 연결을 쉽게 구현 3. 시각적 효과를 쉽게 구현 4. Ajax 어플리케이션을 쉽게 개발 현재에도 전 세계 사람들이 가장 많이 방문하는 사이트의 대부분이 jQuery를 사용한다. jQuery를 사용하기 위해서는 사이트에 들어가 다운을 받아야한다. http://jquery.com jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes th.. 이전 1 다음
