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

부드러운 이동 애니메이션을 위한 Easing jquery으로 오브젝트의 자연스러운 가속도 움직임을 적용하기에 적합합니다. 단조로운 사이트에 자연스러운 움직임을 추가할 수 있으며, 다양한 영역에 적용이 가능합니다. 단조로운 움직임과, 부드러운 움직임의 데모를 비교하면 확실히 느껴지네요.

체크박스, 라디오 박스, 셀렉트 박스 등 여러 폼타입과 위젯을 하나의로 그룹화해서 쓸수 있는 jqueryui 입니다. 첫번째 박스는 가로 방향의 도구 모음 박스이며, 두번째는 모바일 장치, 각종 기타 기기에 사용할 수 있는 세로 방향의 도구모음 박스입니다. 디자인된 다양한 폼 양식을 사용할려면 적합 합니다.

개체를 드래그 하는 동안 커서 스타일을 줄 수 있습니다. 기본적으로 커서는드래그 된 객체의 중앙에 나타압니다. cursorAt 옵션을 사용하여 드래그 가능한 위치를 기준으로 커서 출력 위치를 지정합니다. cursor 옵션에 유효한 CSS커서 값을 옵션에 제공하여 커서 모양을 정의할 수 있습니다. default, move, pointer, crosshair 등

이미지 파일을 드래그 해서 휴지통 근처에 드랍하면, 파일을 삭제하는 프로그램의 예제입니다. 다운로드 받은 파일의 압축을 해제해서 PHP가 구동되는 웹서버에 업로드를 합니다. delete.php 와 index.php 의 소스코드를 열어서 보면 Mysql DB접속 정보를 입력해줘야 합니다. 이미지파일의 경로를 Mysql DB에 저장할 테이블을 생성해주어야 하는데 SQL/drop_delete.sql 파일을 Mysql 서버에 임포트 해주면 됩니다. import 하고 나면 drop_delete 라는 데이터베이스와 간단한 구조의 images 라는 테이블이 하나 생성됩니다. 웹브라우져로 페이지에 접속해보면 아래 그림과 같은 화면이 열리게 됩니다. 이미지를 마우스로 클릭해서 끌어다가 휴지통에 넣으면 끌었던 이미지 파일..

드래그 가능한 영역의 경계를 정의하여 각 드래그 가능한 객체의 움직임을 제한합니다. x 축 또는 y 축으로 제한 하는 옵션을 설정 하거나 containment옵션을 사용하여 부모 영역내에서 드래그가 가능하도록 설정 할 수 있습니다.

Jquery 를 이용하여 캘린더 및 스케쥴러를 구성 할 수 있는 기능을 소개해 드릴까 합니다. 첨부된 압축파일을 다운로드 하시면 아래와 같은 구조를 가지고 있습니다. 안타깝게도 full_demo 는 themeswitcher function 을 더이상 제공하지 않기 때문에 ... 사용할 수가 없습니다. 하지만 weekcalendar.html , weekcalendar_demo2.html ... 등을 이용하여 충분히 테스트 해 보실 수 있습니다. 각 html 별 특징이나 다른점을 설명 드립니다. weekcalendar.html 는 심플한 버젼의 기본 기능으로만 구성된 샘플 파일 입니다. weekcalendar_demo2.html 는 캘린더에 표시될 데이터를 셋트로 구성하여 다르게 표시 하는 기능을 보여 줍니..

이번에 소개해 드릴 자료는 Apple 에서 제공하는 Live Photos API 입니다. 샘플 HTML 코드 안내 입니다. script/livephoto.js 파일에 핵심코드가 들어 있습니다. const player = LivePhotosKit.Player(document.getElementById('Live_Photo_Div')); //div 객체 아이디 player.photoSrc = 'images/live/waves.jpg'; //이미지파일 player.videoSrc = 'images/live/waves.mov'; //영상 파일 위 처럼만 사용하시면 live photos 를 사용하실 수 있습니다. 그리고 나머지는 옵션들에 대한 설정이 대부분 입니다. Events player.addEventList..

스크롤을 내리면 상단 헤더영역을 고정해주고, 스크롤 영역을 기반한 고정영역이 변경되는 midnight.js 소스입니다. 위 해더 (로고) 부분에 위치된 영역이 고정영역이며, 해당 영역이 고정인 상태로 스크롤시 배경영역이 지속적으로 변경됩니다. 위와같이 배경이 변경되면, 로고영역이 경계선을 토대로 깔끔하게 변경되어 적용됩니다.

쇼핑몰에서 다양한 상품을 디스플레이 할때 꾸미기 좋은 제이쿼리 소스로, lsotope.js 소스를 바탕으로 적용되어있으며슬라이드는 Flickity 를 이용하여 상품이미지를 클릭하여 넘겨서 리스트에서 바로 확인할 수 있는 UI 를 가진 소스입니다. 상품의 사진이 있다 가정하고, 해당 상품별 이미지를 마우스 클릭후 슬라이드하면 아래와 같이 이미지가 넘겨지면서 보여지는 UI 를 가지고 있습니다. 또한 레이아웃 전체가 반응형 구조임으로 최근 트랜드적인 쇼핑몰의 기본 아웃풋으로 이용하는데 최적화 되어있습니다.

다운로드 받은 파일의 압축을 해제해서 demo/basic.html demo/personal.html 위 두개의 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 일정이 있는 날짜는 날짜 아래에 빨간색 점으로 표시가 되게 됩니다. 날짜에 마우스를 올리면 아래 그림 처럼 날짜에 동그라미가 표시되고, 빨간 점이 있는 날짜를 클릭하면 해당 날짜에 저장된 일정을 달력 하단에 표시해줍니다. 달력을 클릭했을때 그날의 일정을 보여주는 효과가 필요할때 사용이 가능하겠다 싶네요. HTML 소스코드를 열어서 보니 일정을 확인하고픈 달력을 만들어야 한다는 점이 바로 사용하려고 할때는 약간 부족한 부분이네요. 그 외에 해당 하는 날짜에 일정을 지정하는 부분은 생각보다 어렵지 않게 HTML 태그로 조절하는게 가능해보이네요.