본문 바로가기

제이쿼리

[Popup] 다양한 팝업 창(Modal)을 구현 할 수 있는 modal.js 플러그인 뭘 이런걸 제이쿼리 플러그인을 쓰나??라고 말할 수 있지만좀 더 역동적인 효과를 사용하려면제이쿼리를 사용해야 합니다.그러면 이걸 추천합니다. [미리보기] 미리보니까 맘에 들죠^^ 평법한 레이어 팝업보다는 요런 팝업창을 추천합니다.사용법도 간단합니다. [다운받기] MIT 라이선스
[Tab] 제이쿼리 플러그인을 이용한 다양한 유형의 탭메뉴(Tab) 우리가 가장 흔하게 사용하는 탭 메뉴입니다.이 탭메뉴 제이쿼리를 이용하면 여러가지 효과중에골라서 편하게 사용할 수 있습니다. [미리보기] 간단한 기능이기에호환성도 뛰어납니다.익스7부터 지원을 하니 호환성은 완벽하네요~ 애니메이션, 오버효과, 토클 등 다양한 기능을 사용할 수 있어서 좋네요^^ [다운받기]
[Scroll] 풀페이지를 바탕으로 하는 스크롤 페이지 fullpage.js 일단 보시죠^^ [미리보기] 이런거 찾고 계셨죠?이벤트 페이지를 만들 때 많이 쓰는 레이아웃 구조죠^^물론 스크롤을 했을 경우 부드럽게 움직이는 느낌은 좋은제이쿼리 플러그인 Fullpage.js입니다. [다운로드] 간단한 데모들도 확인해보세요~확실히 좋은 소스는 데모도 잘되어 있어요^^ Full backgroundsGradient backgroundsScrolling inside sections and slidesAdding fixed header and footerVertical navigation dotsHorizontal navigation dotsNormal scrollingWithout anchor links (same URL) (The MIT License)
[Gallery] 반응형까지 지원이 되는 갤러리를 찾는다면 Slippry.js 반응형까지 지원이 되는 갤러리입니다. 다양한 샘플도 보여주기 때문에적용하기 좋은 것 같네요^^기존에 보기 힘든 사진효과는 좋네요^^ 사진효과 보기 샘플보기 단점이 있다면 Html5/CSS3로 제작이 되었기 때문에익스플로러 7,8버젼에서는안된다는 사실...이 조금 아쉽네요^^ 다운은 홈페이지에서 받으세요 http://slippry.com
[ Public] 퍼블리싱에 있어 백과사전과 같은 사이트네요^^ 오늘 발견한 사이트는 백과사전과 같은 사이트입니다.거의 모든 프로그램 레퍼런스는 다 있네요~ 우선 우리에게 제일 필요한 html5와 CSS3가 엄청정리가 잘되어 있습니다.물론 영어라는 단점이 있지만 크게 이해하는데에는걸림돌이 되지 않습니다. 차후 누군가가 한글 버젼을 내 놓지 않을까?라는 생각은 듭니다. 보시면 아시겠지만정리가 쩝니다^^파이어 폭스에서 개발하고 정리한 것 같네요^^ 제가 운영하고 있는 웹 스토리 보이 사이트도조만간 이렇게 해야겠네요^^ 이것 뿐만 아니라 자바스크립, 제이쿼리, PHP 등등없는게 없네요^^참고하세요~ http://devdocs.io/
[jQuery] 제이쿼리(jQuery) 플러그인 목록 모음입니다. [jQuery] 제이쿼리(jQuery) 플러그인 목록 모음입니다. 해당 소스는 라이선스 조건을 확인한 다음에 사용해주세요^^ 라이센스 정보 보기 -BACKGROUND- [jQuery] 001. 백그라운드 이미지를 활용 할 수 있는 제이쿼리 [다운받기][미리보기] [jQuery] 002. 백그라운드에 영상을 제어하는 제이쿼리입니다.[다운받기][미리보기] [jQuery] 003. 스크롤과 버튼을 통한 백그라운드 제어하기 [다운받기][미리보기] [jQuery] 004. 다양한 옵션에 따라 백그라운드 이미지 조절하기 [다운받기][미리보기] [jQuery] 005. 페이지의 숨겨진 영역을 보여주는 페이지 슬라이드 [다운받기][미리보기] [jQuery] 006. 백그라운드 배경을 기본으로 하는 이미지 갤러리 [다운..
[jQuery] 제이쿼리(jQuery) 튜토리얼(Tutorial) 모음입니다. [jQuery] 제이쿼리(jQuery) 튜토리얼(Tutorial) 모음입니다. 001. 제이쿼리를 이용한 12달 달력 코딩하기 Customizing and Theming jQuery UI Datepicker [미리보기] 002. 포토샵과 제이쿼리를 이용한 이미지 슬라이드 만들기 Customizing and Theming jQuery UI Datepick [미리보기] 003. 페이지 번호를 통한 페이지 스크롤 바 만들기 Extreme Makeover: jPaginator CSS3 Edition [미리보기] 004. CSS와 제이쿼리를 이용한 레이어 팝업 만들기 Super Simple Lightbox with CSS and jQuery [미리보기] 005. CSS3와 jQuery를 이용한 말풍선(Toolti..
[HTML/CSS] CSS3를 통한 자막(Caption) 오바 효과 만들기 CSS3를 통한 자막(Caption) 오바 효과 만들기 Caption Hover Effects [미리보기][목록보기] CSS3를 통해서 다양한 오버효고를 보여주는 튜토리얼입니다. CSS3를 통해 만들었기 때문에 구 익스플로러에서는 작동 안된다는거~~ 크로스브라우징까지 생각하신다면 제이쿼리 쪽에서 알아보세요^^
제이쿼리, CSS3, HTML5 관련 튜토리얼 모음 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe HTML/CSS [HTML/CSS] 001. CSS3를 이용한 탭 메뉴(tab menu) 만들기 How to Create a CSS3 Tabbed Navigation [미리보기] [HTML/CSS] 002. CSS3를 이용한 버티컬 네비게이션 메뉴 만들기 Orman Clark’s Vertical Navigation Menu [미리보기] [HTML/CSS] 003. CSS3를 이용한 오목한 버튼 이미지 코딩하기 Tagtastic Tag Cloud with CSS Transformations [미리보기] [HTML/CSS] 004. 웹폰트와 배경이미지를 이용한 별 코딩Create a Rating Syste..
[jQuery] 메뉴에 선택에 따라 배경움직이는 페이지 RSS Feed E-mail Twitter Facebook Google+ me2day yozm Cafe 메뉴에 선택에 따라 배경움직이는 페이지 만들기 [Create a Parallax Scrolling Website Using Stellar.js] 미리보기
[jQuery] 풀스크린으로 화면 전환효과 슬라이드 만들기 풀스크린으로 화면 전환효과 슬라이드 만들기 [Fullscreen Slit Slider with jQuery and CSS3] Html5의 힘이 점점 크게 느껴지는 소스입니다. 당연히 익스플로러로 보면 안되는거 아시죠^^ 미리보기
[jQuery] 숫자가 포함된 아코디언 메뉴 코딩하기 숫자가 포함된 아코디언 메뉴 코딩하기 [How to Create Accordion Menu]
[jQuery] CSS3를 이용한 아코디언 메뉴 만들기 CSS3를 이용한 아코디언 메뉴 만들기 [Free Content Accordion (CSS3+jQuery)] 데모버젼 및 튜토리얼은 없습니다. 파일만 제공할께요^^
[jQuery] Contact me 버튼 누르면 슬라이드 팝업창 나오기 제이쿼리를 이용한 레이어 팝업형식의 슬라이드 팡업창 소스입니다. 데모보기 My Awesome Post Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. sed do eiusmod tempor in..
[jQuery] 제이쿼리를 사용하기 위한 기본 지식 동작 방식 $('p') : HTML 파일 내의 모든 문단 엘리먼트를 접근 $('div') : HTML 파일 내의 모든 div 엘리먼트를 접근 $('#A') : id=A 인 모든 HTML 엘리먼트를 접근 $('.b') : class=b 인 모든 HTML 엘리먼트를 접근 엘리먼트에 CSS 적용하기 .css { font-size:11px; backgroudn-color:#fff; } $('div').addClass('css'); $('div').addClass('css'); 이벤트 처리로 텍스트 추가 또는 제거하기 맨위로 링크 만들기 $(document).ready(function() { $('Return to top').insertAfter('p'); $('').prependTo('body'); }); Re..
[jQuery] CSS와 jQuery를 이용한 말풍선 만들기 CSS와 jQuery를 이용한 말풍선 만들기 [Super How to Create Link Tooltips Using CSS3 and JQuery] 데모보기 바로가기