웹솔루션개발 25년 노하우! 해피CGI의 모든것

첨부된 파일을 다운로드 받아서 압축을 해제하고 나오는 index.html 파일을 웹브라우저에서 열어서 보면 간단하게 확인이 됩니다. 위와 같은 화면이 나오고 특정 자리를 클릭해보면 아래 그림 처럼 해당 좌석을 선택했다고 표시가 되고, 선택한 좌석의 가격 을 우측에 표시해주고, 합계 정도를 계산해서 화면에 표시해줍니다. index.html 파일을 텍스트 편집기로 열어서 보면 map 이란 항목에 'ff_ff', 'ff_ff', 'ee_ee', 'ee_ee', 'ee___', 'ee_ee', 'ee_ee', 'ee_ee', 'eeeee', 위와 같이 설정되어 있는 것을 'ff_ff', 'ff_ff', 'ee_ee', 'ee_ee', 'ee___', 'ee_ee', 'ee_ee', 'ee_ee', 'eeeee'..

JQUERY를 이용하여 왼쪽 또는 위쪽으로 자동 롤링되는 소스입니다. 전체 소스는 첨부파일 참고하시면 됩니다. 왼쪽으로 롤링되게 하려면 아래 소스를, //왼쪽으로 롤링 function rollingStart() { $banner.css("width", $bannerWidth * $length + "px"); $banner.css("height", $bannerHeight + "px"); //alert(bannerHeight); //배너의 좌측 위치를 옮겨 준다. $banner.animate({left: - $bannerWidth + "px"}, 2500, function() { //숫자는 롤링 진행되는 시간이다. //첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다. $(this).ap..

html,css,js 소스를 선택하는 옵션으로 자동 생성해 주는 사이트 입니다. Gradient Box Shadow Text Shadow Color Font Table Column Border Border Radius Transform Background 위와 같은 다양한 속성의 소스를 생성 가능합니다. css 뿐만 아니라 html. js 소스도 가능합니다.

가볍고 빠른 슬라이드 쇼 프로그램인 Skippr 입니다. http://austenpayan.github.io/skippr/ 페이지에 접속시 홈페이지에 해당 기능을 추가 하는 방법이 설명 되어 있습니다. 위 화면중 소스코드 부분을 확대해서 스크린샷을 올려 드리겠습니다. 1. 압축파일에 포함된 CSS 를 연결 압축파일의 2. Jquery 및 압축파일에 포함된 skippr.js 연결 3. 슬라이드 소스 구현 4. 슬라이드 실행 슬라이드 실행시 사용가능한 옵션은 위에서 링크 해드린 페이지 하단에서 확인이 가능 합니다.

css 와 jquery 를 이용하여 아래와 같이 탭 메뉴를 생성할 수 있습니다. 소스는 아래와 같습니다. 스타일과 jquery 를 같이 사용하였습니다. 소스는 첨부파일에 html 파일을 zip 파일로 압축하여 첨부해두었으니 다운받아 사용하시기 바랍니다.

뉴스본문과 같은 형태의 문서에 삽입된 이미지를 클릭하면 레이어로 확대되어 전체화면으로 볼수 있는 medium-lightbox 입니다. 이미지는 data-width 와 data-height 값으로 제어하며 플러그인을 이용하여 이미지 보기시 부드러운 효과를 적용하고 있습니다. http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html 본 링크는 해당 소스의 데모를 확인할 수 있는 링크입니다. 위와같이 이미지를 클릭하면 전체 화면에서 해당 이미지를 확인할 수 있는 기능이며, 별도 레이어 및 새창과 관련된 소스 없이 한번에 간단히 이미지를 확대하여 확인할 수 있습니다. 확대된 이미지를 한번더 클릭하면 축소되어 원래 위치에 삽입되는것처럼 적용됩니..

네온조각을 닮은 CSS 멀티 레이어 그라디언트 배경 jquery 플러그인입니다. CSS3브라우저를 지원하며, jquery 내에 요소값을 지정하여 color, shade, shards, comlexity, lightness 등 다양한 네온조각을 만들 수 있는 값을 지정하여 자유로운 패턴을 배경으로 적용할 수 있습니다. 본 소스를 이용해 다양한 배경패턴을 랜덤하게 출력할 수 있습니다. 고정되는 패턴이 없으며 새로고침할때마다 비슷하지만 다른 패턴을 출력하여 일관된 느낌과 약간씩 다른 포멧을 유지하여 지루하지 않은 디자인을 연출할 수 있습니다. 위와같은 패턴의 샘플 소스를 확인할 수 있으며, 해당 함수에 맞게 값을 조절하여 원하시는 패턴을 구현할 수 있습니다.

- 소개 재생시간이 긴 HTML5 비디오에 챕터를 추가하여 사용자의 비디오 시청에 도움을 줍니다. - 라이센스 ATTRIBUTION LICENSE 3.0 - 작업 예제 1. HTML5를 이용하여 비디오 재생 소스를 추가합니다. 2. 파일 상단에 jQuery 라이브러리와 vidcha.js 스크립트를 링크해 줍니다. 3. 챕터를 표시할 네비게이션을 추가하고 챕터 시간을 설정합니다. - 작동 예제

탭메뉴를 이용해서 Accordions 을 만드는 jquery 플러그인 스크립트입니다. 첨부된 파일을 다운로드 받아서, 압축을 해제하면 나오는 index.htm 파일을 웹브라우저로 열어서 보면 데모를 확인하는게 가능합니다. 브라우저로 열어보면 화면에 위 그림과 같이 표시가 되는데, 첫번째, 두번째, 세번째 탭을 클릭해보면 Accordions 으로 작동이 됩니다. 소스코드를 문서편집기로 열어서 보면, HTML태그 의 구조는 위와 같이 비교적 간단한 구조입니다. id 가 accordion 에 속해있는 div 태그를 accordion 으로 전환해주는 자바스크립트는 아래와 같습니다. 탭으로 사용할 태그와, 효과, 기본적으로 펼쳐져 있어야 할 탭 등을 지정할수 있는걸로 예상이 되네요.

* ResponsiveSlides 소개 - ResponsiveSlides.js 는 컨테이너 안의 요소를 사용하여 반응 형 슬라이더를 만드는 jQuery 플러그인입니다. Microsoft의 Build 2012 및 Gridset App 과 같은 사이트에서 사용되었습니다 . ResponsiveSLides.js는 IE6 이상의 모든 IE 버전을 포함하여 다양한 브라우저에서 작동합니다. 또한 IE6 및 기본적으로 지원하지 않는 다른 브라우저에 대한 CSS 최대 폭 지원을 추가합니다. * License - MIT license * 사용방법 - 첨부된 압축파일을 원하는 웹디렉터리에 업로드후 압축을 해제합니다 - js 파일을 링크합니다 - 마크업을 추가합니다 - css 를 추가합니다 - 슬라이드쇼를 연결하고 웹페이지를..