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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 jquery 라이브러리 파일과 moment.min.js 파일 링크를 걸어줍니다. 2. 원하는 스타일의 아이콘형 글꼴을 선택하여 링크를 걸어줍니다. 3. 타임라인을 표시할 레이어를 추가합니다. 4. 타임라인에 표시할 이벤트들을 정의합니다. 입력할 데이타 형식은 주석을 참고하세요. 5. 타임라인 플러그인을 호출합니다. (기본값) 5-1. 이벤트가 없는 날짜를 표시할 지 여부를 결정할 수 있습니다. (기본값 null) 5-2. 옵션으로 아이콘 클래스를 정의할 수 있습니다. 5-3. 날짜 출력 형식을 수정할 수 있습니다. 5-4. 특정 날짜를 지정하여 이동시킬 수 있습니다 - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 tagify.css 파일 링크를 걸어줍니다. 2. Jquery 버전 사용시 jQuery 라이브러리 파일 링크와 함께 jQuery.tagify.js 파일을 링크해줍니다. 2-1. 만약 순수한 Javascript만 사용하고 싶다면 tagify.js 파일을 링크해줍니다. 3. 태그를 입력할 INPUT 태그를 추가합니다. 4. tagify 스크립트를 실행합니다. jQuery 버전과 순수 Javascript 버전 구분은 주석을 참고하세요. 5. 태그의 중복 입력을 허용하려면 아래와 같이 duplicates 옵션에 false를 입력하세요. 6. 세부 옵션과 API 메소드, 이벤트 등은 홈페이지를 참고하세요. - 작동 예제

다운로드 받은 파일의 압축을 해제하면 생기는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 이미지 파일로 된 지도위에 위 그림과 같이 특정 위치에 마크를 표시해주고, 마크를 클릭하면 미리 준비해둔 제목, 내용 을 지도위에 보여주는 작은 레이어가 열리는 스크립트의 예제입니다. index.html 파일의 소스코드를 열어서 보면 이미지로 제작된 지도를 웹페이지에 표시하기 위해서 사용된 스크립트를 확인이 가능합니다. 별다른 기능은 없으며, json 포맷의 데이터를 이용해서 지도 위의 마커의 X좌표, Y좌표, 아이콘, 클릭했을때 화면에 표시되는 레이어내의 제목, 내용 등의 문구를 지정할수 있겠습니다. X,Y좌표만 살짝 변경을 해서 웹페이지를 새로고침 해보니 지도 위에 찍히던 마커가 이동을 하..

html Brand Home page a page b page c page d css body background: #eee min-height: 3000px padding: 0 margin: 0 font-family: 'Open Sans', sans-serif .container width: 80% margin: 0 auto clear: both a display: inline-block color: #333 text-decoration: none nav background: #fff height: 80px line-height: 80px box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2) position: fixed top: 0 left: 0 width: 100% z-index..

웹페이지에 키보드를 표시해주고, 키보드를 이용해서 입력폼에 글자를 입력받을수 있는 스크립트 입니다. 다운로드 받은 압축파일의 압축을 해제한 후, examples/index.htm examples/numpad.html 위 파일을 웹브라우저로 열어보면 데모확인이 가능합니다. 데모사이트에서도 쉽게 확인이 가능합니다. 좌측 아래의 123키를 이용해서 숫자와, 특수문자를 입력받는 키보드로 바꾸는게 가능합니다. 숫자패드 우측의 키보드 모양의 키를 이용해서, 다른 나라의 키보드로 변경할수는 있습니다. 하지만, 지원되는 국가가 그리 많지는 않네요 위 코드에서 확인이 되듯, azeri, english, german, russian, numeric, number_only, symbolic 등등 몇가지를 선택할수가 있습니다..

* jQuery Hero Slider Plugin 슬라이드 전환시 효과가 재미있는 jQuery 플러그인 슬라이드시의 움직임은 data-transform = "scale" 로 data-transform = "rotate" 를 조합 해 지정할 형태로되어있어 내비게이션 및 자동 재생의 유무,속도 조정 등의 옵션도 갖추어져 있습니다. * License MIT License * 이용방법 상단에 css 파일을 호출합니다 아래와 같이 마크업 영역안에 배너를 삽입합니다 그리고 하단에 js 파일을 불러옵니다 아래와 같은 옵션으로 슬라이드 방향을 결정할 수 도 있습니다 옵션 항목은 아래와 같습니다 1) activate : 클래스를 실행 bp-hs_inner__item하고 추가하여 is-active클래스를 표시 , 기본값으..

* Draggable Dual-View Slideshow 드래그 가능한 슬라이드 쇼로 전체 화면보기에서 관련 콘텐츠 영역을 볼 수 있습니다. 전체 화면 스크롤 웹 사이트를 만들 수 있으며 사이트 섹션에 가로 슬라이더를 추가 할 수도 있습니다. * License GPL License * 사용방법 첨부된 다운받아 웹디렉터리 안에 업로드한후 압축파일을 해제합니다 아래와 같은 구조로 코드를 작성해줍니다 기본 제공되는 css,js 파일을 호출하고 slideshow 영역안에 가로로 드래그해서 보여질 내용들의 html 및 css코드를 작성합니다 페이지 하단과 상단으로 이동할 수 있는 영역에 대한 html,css 코드를 추가합니다 드래그 및 슬라이드가 작동될 수 있도록 js 호출 및 script 를 작성해줍니다 기본 ..

첨부파일의 압축을 풀고 docs/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 모바일 기기 같이 화면은 작은데, 많은 정보를 입력받아야 하는 페이지에서 하나씩 입력하고, 아래로 내려가는 슬라이드와 같은 형식으로 웹페이지에서 어떤 입력양식에 대한 값을 받아야할 때 좋을것 같네요. OK를 눌러보면 준비해 둔 입력폼에 입력값을 입력한뒤에 OK를 누를때 마다 한단계씩 아래로 떨어지면서 다음 입력양식을 보여주고, 필요한 정보들을 입력하도록 해주는 UI입니다. 각 단계에 대한 입력양식을 채울때 마다, 하단의 프로그래스 바에 현재 진행상황을 표시해주고, 우측의 위, 아래 버튼을 이용해서 이전 입력폼 화면으로 이동하는게 가능합니다. 스마트폰을 이용해서, 여러가지 질문(설문)을 받기 위한 UI가 필..

ul li를 사용하여 메뉴를 만들시 display속성을 table을 이용하지 않고는 li의 높이값을 모두 균일하게 만들기가 애매한 상황이 있습니다. 위 소스를 이용시 제일 긴 li값을 가져와 나머지 모든 li에 적용시킬수 있는 소스입니다. 간단히 소스내에 스크립트에 지정되어 있는 클래스값을 적용하고 싶은 ul에 추가적으로 적용시키면 하위에 속한 li에 값이 적용이 됩니다. ex) 자세한 소스는 첨부된 파일내에서 확인할 수 있습니다.

모양이나 스타일을 쉽게 변경할 수 있는 달력입니다. 월, 주, 일 단위로 일정을 볼 수 있습니다. 일정은 마지막 부분에 마우스를 가져다 대면 해당 일정의 기간을 마음대로 조정할 수 있습니다. 드래그 하면 위치도 이동이 가능하고 각 구간별 색상 지정이 가능합니다. 주, 월 단위로도 출력이 가능합니다. 주단위에서 변경한 내용은 월단위에서도 변경된 상태로 출력됩니다. 주단위나 월단위에서도 각 일정은 드래그로 위치(날짜)변경이 가능합니다. 지정된 항목을 드래그 하여 일정 등록을 할 수 있습니다.