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

* Tilted Content Slideshow 이미지를 기울어진 형태로 보여줄 수 있는 3D 입체 슬라이드쇼 입니다 * 설치방법 첨부된 압축파일을 해제하여 원하는 폴더에 업로드 합니다 적용될 페이지에 제공되는 css 및 js 를 선언합니다 애니메이션 효과가 적용될 사진과 텍스트를 아래와 같이 배치하도록 합니다 문서 하단에 제공되는 js 파일 및 스크립트를 선언합니다 위와 같은 관련 코드가 실행되었을때 화면은 아래와 같습니다 샘플소스 코드는 첨부된 파일중 index.html 파일을 참조하시면 도움이 되실겁니다

* Grid to Fullscreen 사진을 확대, 애니메이션 격자형태로 변형하여 보여줄 수 있는 기능을 가진 jquery plugin * 사용방법 첨부된 압축파일을 다운로드 하여 사용할 웹루트 디렉터리에 업로드하고 압축을 해제합니다 그후 아래와 같은 핵심코드들이 삽입되어야 합니다 적용할 html 문서에 샘플로 제공되는 css , js 파일을 선언 이미지 및 설명문구가 들어갈 html 구문을 아래와 같이 작성 하단에 기본 제공되는 js 파일 및 스크립트 선언 애니메이션 효과 관련 스크립트 옵션은 아래와 같습니다 timing - duration : 애니메이션 지속시간 조절할 수 있습니다(숫자형, 초단위) activation : 사진의 애니메이션 움직임 위치를 선정할 수 있습니다(`closestCorner`..

waifu2x에서는 이미지의 화질을 높이거나 일반적으로 이미지를 늘리는 것보다 이미지 깨짐현상이 훨씬 덜하게 최대 2배의 크기를 늘릴 수 있는 사이트 입니다. 이미지 업로드하시고 스타일, 노이즈감소, 확대 등 원하는 조건을 선택하신 다음 변환버튼을 누르시면 웹사이트상에서 변환된 이미지를 확인하실 수 있고, 다운로드 버튼을 누르시면 변환된 이미지가 다운로드 됩니다. 아래와 같이 작은 이미지의 크기를 늘리실 때 유용합니다. 일반적으로 포토샵 등 이미지 편집 프로그램으로 크기를 늘리시면 아래와 같이 이미지가 흐릿하게 깨져 보입니다. waifu2x 사이트를 이용하여 이미지를 2배 늘리시면 아래와 같이 보다 선명한 화질의 이미지로 크기를 늘리실 수 있습니다. 고화질 이미지 없는 저화질 이미지를 사용해야 될 경우,..

사이트 개발시 결제 연동에 부담을 줄여주는 서비스가 있어 소개해드립니다. 위의 내용처럼 계약 상관없이 즉시 개발가능하며, 소스코드 수준의 기술지원도 해준다고 되어있습니다. 지원되는 PG 사는 아래와 같으며, KCP , 다날 , 나이스페이 , LG U+ , 이니시스 , 페이앱 지원 언어는 아래와 같습니다. JavaScript , Python , Node.js , Ruby , Java , PHP 카카오페이, 페이코등 간편 결제도 지원하며, 개발 기간 단축과 여러 PG 사를 한번의 개발 연동으로 사용할수 있다는 점이 장점입니다. 그리고 위와 같이 여러 결제 통계도 제공한다는 점이 장점입니다. https://admin.bootpay.co.kr/login 위의 링크에서 관리자 체험이 가능합니다.

안녕하세요 해피CGI 입니다. 해피 소셜마켓 솔루션 모바일 Ver1.2 (장착옵션) 이 새롭게 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더 좋은 모습으로 보답하겠습니다. 감사합니다.

안녕하세요 해피CGI 입니다. 해피 소셜마켓 솔루션 Ver1.2 이 새롭게 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더 좋은 모습으로 보답하겠습니다. 감사합니다.

BBC 뉴스사이트에 있는 타임라인형태의 메뉴를 만들수 있는 자료입니다. ol 과 li 태그를 기본으로 before, after의 가상선택자를 이용한 디자인입니다. before를 이용하여 좌측의; 붉은색라인을 만들어주며 li:before { content: ''; background-color: #c00; position: absolute; bottom: 0px; top: 0px; left: 6px; width: 3px; } after를 이용한 백그라운드로 원형의 이미지를 호출하여 이미지와 같은 형태로 만들수 있습니다. li:after { content: ''; background-image: url("http://www.happycgi.com/program/upload/happy_config/info_l..

정확한 원자 시계로 정확한 현재 시간을 확인해 보세요. https://time.is/Moscow 위와 같이 지역명을 인자값으로 줄수 있으며, https://time.is/just 와 같이 단순한 옵션등도 있습니다. https://time.is/widgets 위젯 기능도 있습니다. 위젯 코드를 제공하며 자신의 사이트에 원자 시계 위젯을 추가할수도 있습니다.

모든 방향으로 드래그앤드롭으로 이동하면 원하는 위치로 콘텐츠가 이동되며, 마우스 스크롤을 이용하여도 해당 콘텐츠가 아래위로 이동되어 간편하게 본문내 영역중 내가 원하는 위치를 확인할 수 있습니다. 본 소스 하단에 정의된 라는 소스를 반드시 추가해두셔야 하며, 상단에 적용된 라는 css 를 이용하여 원하시는 형태의 디자인을 구현할 수 있습니다. 실제 소스상 필요한 항목은 라는 부분이며 data-draggable-scroll-content 값을 가진 영역이 본문 콘텐츠 영역입니다. 이미지 형태로 만들어진 지도나, 확대된 이미지를 자세하게 보기 위한 용도로 이용하시는데 유용합니다.

회전, 줌인, 줌아웃, 페이드 효과 등 다양한 효과를 심플하고 가벼운 CSS로 구현되는 애니메이션 효과 라이브러리 입니다. 예제 사이트 http://kristofferandreasen.github.io/wickedCSS/examples.html 밋밋한 사이트에 아기자기함을 더해주니, 괜찮은 CSS 애니메이션 효과네요. 사용법 http://kristofferandreasen.github.io/wickedCSS/documentation.html 관련 CSS를 다운로드 받은 후 사이트에 업로드 및 링크해주시고, 효과가 필요한 이미지에 효과별 class를 선언하면 끝... 완전 간단 하네요. 일부 효과에는 jQuery 가 필요한 경우도 있으니, 사용법을 참고해서 사용하세요.