이미지맵 이미지맵은 하나에 이미지에서 특정 이미지에만 링크를 주고 싶을 때 사용한다. coords : 좌표 shape : 모양 (rect-직사각형 영역, circle-원형 영역, poly-다각형 영역, default-전체 영역) 반응형 이미지 맵 제이쿼리 (jQuery-rwdImageMaps) 반응형에서 이미지 맵을 사용할 때는 이미지의 비율이 줄어들어서 좌표의 값이 변하게 된다. 이런 불편함을 처리해주는 제이쿼리가 rwdImageMaps이다. 사용 github url - https://github.com/stowball/jQuery-rwdImageMaps GitHub - stowball/jQuery-rwdImageMaps: Responsive Image Maps jQuery Plugin Responsi..
플러그 인(plug-in)이란 다양한 기능을 구현해 놓은 제이쿼리 라이브러리이다. 제이쿼리 플러그인을 내려받아 연동하면 제이쿼리로 구현하기 어려운 다양한 기능을 쉽고 간단하게 사용할 수 있어서 사이트 제작시 제이쿼리 사용자가 많이 이용한다. 무료 저작권 종류 구분 종류 자유 수정 가능 TIT, BSD, Apache, Public Domain, Free 수정시 부분 공개 LGPL,MPL 제이쿼리 플러그인 다운로드사이트 www.htmldrive.net HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library www.htmldrive.net www.bestjquery.com 8500+ Best jQuery Plugins & ..
1. 그룹 이벤트 등록 메소드 한 번에 2개 이상의 이벤트를 등록할 수 있다 그룹 이벤트 등록 메소드 종류 종류 설명 on() - 이벤트 대상 요소에 2개 이상의 이벤트 등록 - 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트 적용 bind() 이벤트 대상 요소에 2개 이상의 이벤트 등록 delegate() - 선택한 요소의 하위 요소에 이벤트 등록 - 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트 적용 one() - 이벤트 대상 요소에 1개 이상의 이벤트 등록 - 지정한 이벤트가 1회 발생하고 자동으로 해제 1) on() 메서드 선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있다. 즉, 동적으로 생성..
사용자가 이벤트를 발생시킬 때마다 이벤트 핸들러의 매개변수는 이벤트 객체가 생성된다. 이벤트 객체에는 이벤트 타입에 맞는 다양한 정보를 제공하는 속성과 메서드가 포함되어 있다. 기본형 $("이벤트 대상 선택").mousemove(function(매개변수) { 매개변수(이벤트 객체).속성; }); 이벤트 객체의 속성 종류 구분 종류 설명 마우스 이벤트 clientX 마우스 포인터의 X 좌푯값 반환(스크롤 이동 거리 무시) clientY 마우스 포인터의 Y 좌푯값 반환(스크롤 이동 거리 무시) pageX 스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X 좌푯값을 반환 pageY 스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y 좌푯값을 반환 screenX 화면 모니터를 기준으로 마우스 포인터의..
1. 이벤트 등록 메서드 이벤트 : 사이트에서 방문자가 취하는 모든 행위 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 코드 종류 : 단독 이벤트 등록 메소드 , 그룹 이벤트 등록 메소드 기본형 버튼 $("#btn").click(function(){ 자바스크립트 코드; }); $("#btn") : 이벤트 대상 click() : 이벤트 등록 메소드 function(){...} : 이벤트 핸들러 이벤트 등록 메서드 종류 구분 종류 설명 로딩 이벤트 load() 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생 ready() 지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생 error() 이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생 마우스 이벤트 click()..
1. 객체 조작 메서드 객체 조작 메서드 : 속성 조작, 수치 조작, 객체 편집 메소드로 나뉜다. 속성 조작 메서드는 요소의 속성을 바꿀 때 사용 수치 조작 메서드는 요소의 너비값 또는 높이 값 같은 수치를 바꿀 때 사용 객체 편집 메서드는 말 그 대로 객체를 생성하거나 삭제 또는 복제할 때 사용 2. 속성 조작 메서드 속성 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 innerHeight() $("요소 선택").innerHeight(..
탐색 선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 탐색 선택자에는 배열의 인덱스를 사용해 선택하는 '위치 탐색 선택자'와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 '속성 탐색 선택자'가 있다. 1. 위치 탐색 선택자 기본 선택자로 요소(태그)를 선택했을 경우 배열에 담기게 된다. 이때 배열의 인덱스(index)를 사용하면 특정 요소를 더 세밀하게 선택할 수 있는데 위치 탐색 선택자는 바로 이 인덱스를 활용하여 특정 요소를 선택하게 된다 위치 탐색 선택자 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:first") $("li").first() 전체 요소 중 첫 번째 요..
1. 선택자 CSS 선택자처럼 선택한 요소의 디자인 속성을 적용할 때 사용할 수 있다. HTML에 작성한 스타일은 사용자의 동작에 의해 스타일을 변경할 수 없기 때문에 '정적이다'라고 표현한다. 하지만 제이쿼리 선택자를 사용하면 '동적'으로 스타일을 적용할 수 있다. 1) 문서객체모델(DOM) HTML문서 객체 구조를 말한다. HTML의 문서 객체 구조를 그림으로 표현하면 트리 구조가 된다. 가장 상위에 위치하는 은 뿌리(Root)라고 하고, 가지처럼 뻗어나가는 요소는 노드(Node)라고 한다. 노드의 종류 : 요소노드, 텍스트노드, 속성노드 2) 선택자 사용하기 선택자를 사용하기 위해서는 문서 객체를 불러와야 한다. 가 생성되기 이전에 선택자가 먼저 실행되어 선택자로 문서 객체를 선택할 수 없다. 영역..
