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

BOOTSTRAP 을 이용한 아날로그 시계를 웹 페이지에 보여주는 플로그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 특이사항은 Time Zone 셋팅이 가능 하구요. 7개의 시계 스타일을 제공 합니다. 사용법 안내 합니다. 1. 라이브러리 호출 하세요. 2. 시계가 출력될 컨테이너를 선언하세요. 3. 컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하면 아래의 이미지 처럼 출력 됩니다. ^^ 타임존 셋팅 외에는 시계의 크기 등을 변경하려면 css 를 수정해야 한다는게 안타깝네요. 제공되는 옵션은 대부분 색상에 대한 옵션입니다. 타임존 셋팅값은 혹시나 필요하실까 생각되어 첨부 합니다. (타임존이 너무 많아요 ^^ ) Europe/Andorra, Asia/Dubai, Asia/Kabu..

아날로그 시계를 웹 페이지에 보여주는 플러그인을 소개 합니다. 라이센스는 MIT 라이센스 입니다. 사용법에 대해서 안내 합니다. 1. 라이브러리를 호출 하세요. 2. 시계 위치를 잡기 위해 css 를 추가해 주세요. 3. 시계를 출력할 컨테이너를 선언하세요. 4.컨테이너에 시계를 생성하는 스크립트를 호출 합니다. 정상 작동하게 되면 아래의 이미지 처럼 출력 됩니다. 스크립트로 시계 함수에 전달 가능한 옵션에 대해서 설명 합니다. szie : 시계의 크기 설정 x : 시계의 x축 시작 좌표 y : 시계의 y축 시작 좌표 x, y 값 설정시 주의사항은 시계의 중심점을 기준으로 좌표를 설정해야 합니다. 즉, x값 0, y값 0 으로 설정하신 후 원하시는 좌표 값을 설정하시면 됩니다.

다운로드 받은 파일의 압축을 해제한후 easy_slides.test.html 파일을 웹브라우져로 열어보면 샘플 확인이 가능합니다. 총 4가지의 이미지 슬라이더 유형을 지원합니다. 1. One Big Picture 2. Circle 3. 4 in line 4. Clock 장점으로는 HTML태그가 간단하게 구성되어 있습니다. 슬라이더를 작동시키는데 있어서 지정할수 있는 전체 옵션은 이며, 자바스크립트 코드 역시 사용하기에는 많이 어렵지 않게 작성되어 있네요. ​ ​ ​

* Slide Out Box Menu 각 섹션별로 원하는 페이지를 슬라이드 하여 보여주는 기능을 가진 플러그인입니다 첨부된 압축파일을 다운받아 적용하고자하는 웹루트 디렉터리에 압축을 해제합니다 기본제공되는 css 파일을 문서상단에 호출합니다 아래와 같이 각 섹션페이지 별로 슬라이드해줄 컨텐츠를 삽입합니다 detail 레이어 부분 코드 body 태그 위에 제공되는 js 파일을 삽입합니다 위와 같이 적용하였을때 슬라이드 페이지 및 레이어로 정보를 노출하고 싶은 부분을 보여줄 수 있습니다 첨부된 압축파일에 제공되는 샘플파일들을 참고 및 응용하여 작업하면 도움이 될것 같습니다

* Revealing Hero Effect with CSS & JavaScript 페이지가 스크롤 될 때 섹션별로 컨텐츠를 표시합니다 첨부된 압축파일을 다운로드하여 웹루트 디렉터리에 압축 해제합니다 적용한 html 문서를 열고 문서 상단에 제공되는 css 를 호출하도록 합니다 그리고 섹션별로 아래와 같이 페이지 스크롤 영역안에 들어갈 각 컨텐츠를 삽입할 수 있습니다 섹션별로 컨텐츠를 삽입할 영역을 다정한후 body 태그 위에 기본제공되는 js 파일을 아래와 같이 호출하도록 합니다 적용후 브라우저로 호출할시 아래와 같이 스크롤될때 각 섹션영역을 구분하면서 스크롤링 됨을 확인할 수 있습니다

웹페이지에서 스크롤을 해도 특정 요소는 같은 위치에 머무르면서 표시하도록 하는 플러그인입니다. 다운로드 받은 파일의 압축을 해제한뒤 example/jquery.stickySmart.html 파일을 웹브라우저로 열어보면 샘플 확인이 가능합니다. 열려진 웹페이지에서 스크롤을 내려보면, 특정 컨텐츠가 스크롤이 내림으로서 웹페이지 내에서 안보여지게 되었을때 위 그림 처럼 스크롤을 따라다니면서 표시해주는 플러그인 입니다. 스크롤을 아래로 조절될 때 외에도, 스크롤을 위로 조절할 때 웹페이지의 아래쪽 부분에 표시를 해주는 것도 가능합니다. 위 그림 처럼 스크롤을 따라다니는 상태에서는 실제 웹페이지내에 표시되던 형태와는 다른 모양으로 표시하도록 커스터마이징이 가능하네요 특정 문단이 아니라, 메뉴 및 검색폼이 스크롤을..

기본 javascript에 내장된 시간과 관련된 함수들보다 사용하기 쉬운 moment.js 입니다. https://momentjs.com/ 페이지에 접속시 샘플 소스를 확인이 가능 합니다. 해당 소스를 이용 하실려면 다운로드 받으신 moment.js 파일을 로드 해주시고 사용 하시면 됩니다. 이곳 첨부 파일을 다운로드 받으시면 테스트를 해본 소스도 같이 첨부 해두었습니다.

자동완성 스크립트인 AutoCompleteJS 입니다. 심플하고도 강력한 기능이 특징 입니다. http://autocompletejs.com/examples 페이지로 접속하면 데모 및 샘플 소스를 확인이 가능 합니다. 다양한 데모가 전시 되어 있으므로 사용하기가 편리 합니다. http://autocompletejs.com/docs 페이지에서 자세한 설정 및 옵션 확인이 가능 합니다.

문서내에 존재하는 테이블의 데이터를 엑셀화하여 저장할 수 있습니다. jQuery Plugin 이며, 라이센스는 MIT 입니다. 소스다운을 누르시면 압축 파일을 다운로드 받을 수 있습니다. 압축 해제하셔서 폴더로 들어가면 demo 폴더가 있습니다. index.html 파일은 원본파일이며, happy.html 은 제가 임의로 가공한 파일 입니다. 심플한 코드를 보고 싶다면 happy.html 을 보십시요. 사용법은 매우 심플 합니다. 1. 라이브러리를 호출하세요. 2. 엑셀로 만들 데이터의 테이블을 만들어 주시되 class 명은 맞춰주셔야 합니다. 번호 이름 전화번호 배송지 주문번호 배송메모 1 홍길동1 010-1111-1111 대구 달서구 두류동 776-1 N-192858291-D9S8 문앞에 두시고 문자..

CSS3 3D 변환 기능을 사용하여 이미지, 배경 이미지, Youtube, Vimeo, HTML5 Video 등등 ... 많은 HTML 요소에 부드러운 Parallax Effect 를 추가하는 jQuery Plugin 입니다. ​ ​ 사용법은 생각보다 쉽습니다. 1. 기본적으로 jQuery Plugin 이므로 jQuery 를 호출해 주셔야 합니다. 2. Script 호출 해 주세요. 3. HTML 요소는 아래처럼 하시면 됩니다. Your content here... Your content here... Your content here... 4. CSS 를 선언하여 변경할 일이 있다면 플러그인 호출전에 미리 선언하시거나 jarallax CSS 파일에 넣어두셔도 됩니다. .jarallax { position..