TRstory

# 스크롤에따라 움직임에 따라 모션시작 (css3) ie10 HTML 삽입 미리보기할 수 없는 소스 # 스크롤 에따른 속도 움직임 효과 : http://prinzhorn.github.io/skrollr/ # 스크롤양 에따른 움직임 효과 : https://scrollmagic.io/ # 사용자 정의 스크롤 경로 (곡선 포함) 그릴 수있는 플러그인 http://joelb.me/scrollpath/ # 스크롤 에따른 페이지 움직임 효과 (커튼) https://github.com/victa/curtain.js # jquery 모션효과?http://johnpolacek.github.io/superscrollorama/ # 최근 https://github.com/markdalgleish/stellar.js/ # 스..

1. 시맨틱마크업 html5 테그 머리말 (섹션해더) 본문 (독립섹션) 문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다. 뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다. (보조섹션) 문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다. 광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다 글 영역 사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다. 네비게이션(탬색 링크의 섹션 정의) 메뉴(도구모음 및 목록 양식 컨트롤, 명령) 문서의 제목을 그룹화 하는데 사용한다. 예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 요소와 요소로 제목, 부제목을 정의하며 이들 제목들은 로..

※ IE6~8 브라우저=> respond.js : https://github.com/scottjehl/Respond css3-mediaQueries.js : http://code.google.com/p/css3-mediaqueries-js비교 : http://gionaf.com/playground/mq-fallback/results.html ※ 미디어 쿼리 참고 싸이트 : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 속성으로 구분하기..............................................................................................................

Background (배경 이미지 관련 속성) 속 성 설 명 값 background background의 여러 가지 속성을 간단하게 한번에 선언하여 사용할수 있다. background-color background-images background-repeat background-attachment background-position background-attachment 페이지 스크롤을 할 때, 페이지와 함께 스크롤 되게 할 것인지 아니면 배경 이미지는 고정되게 할 것인지를 설정할 수 있다. scroll fixed background-color 특정 요소의 배경 색상을 지정할 수 있다. color-rgb color-hex color-name transparent background-images 배경 이미..

Event event.preventDefault() 기본 이벤트를 저지 함. event.stopPropagation() 사용자가 첨부한 이벤트를 저지 함. default click action is prevented HTML DOM EventsMouse Events onclick 마우스를 클릭 했을 경우 발생하는 이벤트 ondblclick 마우스를 더블클릭 했을 경우 발생하는 이벤트 onmouseup 사용자가 마우스 버튼 누름 상태를 해제할떄 발생하는 이벤트 onmousedown 사용자가 마우스를 눌렀을경우 발생하는 이벤트 onmousemove 요소 위에있는 동안 포인터를 이동하면 이벤트가 발생 onmouseover 마우스가 지정된 영역안에 들어가면 발생하는 이벤트 onmouseout 마우스가 지정된 영..

excanvas.js 파일을 추가하면 익스프로러8 이하에서 canvas 태그를 사용할수 있습니다. 설명 : http://excanvas.sourceforge.net/

Quick API Reference : http://oscarotero.com/jquery/ jQuery 속성선택자 요소[속성] 특정 속성을 가지고 있는 문서 객체를 선택함 요소[속성=값] 속성 안의 값이 특정 값과 같은 문서 객체를 선택함 요소[속성~=값] 속성 안의 값이 특정 값을 단어로써 포함하는 문서 객체를 선택함 요소[속성^=값] 속성 안의 값이 특정 값으로 시작하는 문서 객체를 선택함 요소[속성$=값] 속성 안의 값이 특정 값으로 끝나는 문서 객체를 선택함 요소[속성*=값] 속성 안의 값이 특정 값을 포함하는 문서 객체를 선택함 사용 예) $('input[type=text]').val("텍스트 값추가"); 1. jQuery 기본 필터 선택자 요소:odd 홀수 번째에 위치한 문서 객체르 선택함 ..

데이터 타입 메소드 1. Object 메소드 constructor() 객체의 생성자 함수 hasOwnProperty(name) 객체가 name 속성을 가지고 있는지 확인 isPrototypeof(object) 객체가 object의 프로토타입인지 검사 propertyIsEnumerable(name) 반복문을 사용해 열거할수 있는 지 확인 toLocaleString() 객체를 호스트 환경에 맞는 언어의 문자열로 변경 toString() 객체를 문자열로 변경 valueOf() 책체의 값 @ 배열의 filter 를통한 특정 key값을 반환 (3학년인 배열반환) 2. window 속성 height 새 윈도우의 높이 픽셀 값 width 새 윈도우의 너비 픽셀 값 location 주소 입력창의 유무 yes, no, ..

1. 함수사용 - method 처럼 사용 (type1) function testInitFn($str){ function initFn($str){ console.log("=== initFn: ", $str) } initFn($str); return { setInit: function($str){ initFn($str) } } }; var varFn = testInitFn("call-a"); varFn.setInit("call-b"); ------------------ === initFn: call-a === initFn: call-b ------------------ - method 처럼 사용 (type2) var varFn; varFn = ( function($str){ function initFn($s..

1. 배열정렬function compareNumbers(a,b) { return a-b;} var numArray = [13,2,31,47,5]; alert(numArray.sort(compareNumbers)); // 2,5,13,31,47 출력 alert(numArray.reverse()); // 47,31,13,5,2 출력 출처 : javascript cookbook 2. 배열 복사var numArray = [13,2,31,47,5]; var newArray = numArray.slice(1,3) // 1번째부터 3번째미만 alert( numArray +" : "+ newArray ); // 13,2,31,47,5 : 2,31 출력 //IE8 이하버젼 if(!Array.prototype.indexO..