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

첨부파일을 다운로드 받아서 압축을 해제한 후 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 모달창이 화면에 보여지면서, 기본형(별다른 효과가 없는), 페이드(fade) 효과를 주면서 뜨도록 하는 타입이 있고, 배경이미지를 보여주고 모달화면이 생기는 효과가 있습니다. 기본형 또는 페이드 효과를 줬을때 화면에 모달이 표시되는 샘플 HTML태그에서 아래와 같은 소스코드로 기본형 또는 애니메이션 효과를 줄수 있네요. Default Modal Fade Animation 배경에 이미지가 포함된 예제도 있는데, Image" target=_blank>https://source.unsplash.com/1600x900/?fitness)"}}'>Image Background 위 처럼 data-nkd..

[F12]를 누르면 나오면 개발자도구는 무척 유용합니다. 개발자도구는 웹페이지의 구성요소를 확인할 수 있고 바로 코드를 삽입하거나 수정해서 변화된 페이지를 바로 볼 수 있습니다. 그러나 개발자도구는 css의 컬러값이 몇개가 사용되고 몇개의 이미지가 사용되는지 바로 확인할 수가 없습니다. 이러한 문제를 해결해줄수 있는 프로그램이 크롬의 확장 프로그램인 비주얼 인스펙터입니다. 팝업에서 구성요소 중 하나를 클릭하면 어떤 요소인지 알려주며 직접 수정도 할 수 있습니다. 색상은 물론 위치와 사이즈도 변경할 수 있습니다. 또한 이렇게 고쳐본 결과물을 이미지 파일로 받을 수도 있습니다.

* 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 위젯 기능도 있습니다. 위젯 코드를 제공하며 자신의 사이트에 원자 시계 위젯을 추가할수도 있습니다.