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

스마트폰, 태블릿, 모니터 등 화면 크기나 픽셀등을 한번에 확인할 수 있는 사이트입니다. 모바일 앱 및 모바일 사이트를 제작하는 분들은 많이들 이용하시는 사이트이며, 반응형 프로젝트등에서도 미디어쿼리의 사이즈를 지정할때 유용할듯하네요. 핵심적인 디바이스별 사이즈인 width, h, device width 값으로 확인하실 수 있습니다. 그나저나 정말 다양한 기기별 해상도입니다.. 점점 맞춰 진행하는게 쉬운일이 아니게 되가네요^^

위 영역에 마우스를 오버할 경우 부드럽게 좌우로 움직이는 animation 효과입니다. 소스상에서 @keyframes slide { 0% { left: 0; top: 0; } 50% { left: 30px; top: 0px; } 100% { left: 0; top: 0; } 위 keyframes 영역은 위 녹색 구영역의 움직임을 주기 위한 영역입니다. 0% 는 첫번째 위치, 50% 는 두번째 위치할 부분, 100% 는 되돌아올 위치를 말합니다. (되돌아올 위치를 100px 로 적용하면 한번더 좌측으로 이동되므로 되돌아올 위치가 아닌 다음번 이동될 위치입니다.) slide 라는 부분은 animation-name 으로 적용할 네이밍으로 아래 추가 설명으로 안내드리겠습니다. 본 소스에서는 라는 형태의 구조이며..

사이트 주소를 입력하면 해당 사이트에 대한 다양한 CSS 통계를 확인할수 있습니다. 궁금한 사이트를 입력해보시고, 해당 사이트에 대한 다양한 통계를 확인해 보세요. ​ ​ ​

1995년 PHP 가 세상에 나타난 후 최근 8.0 베타가 시작 되는 순간까지 기록을 보실수 있습니다. ​ ​ 25년간의 PHP 의 역사를 한번 둘러보세요.

candy cane이란 위 이미지의 지팡이 모양 사탕을 말하는 것입니다. 지팡이사탕의 사선 무늬를 텍스트에 입혀 사선이 움직이는 귀여운 효과를 css만으로 만들어 볼 수 있습니다. 홈페이지 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 스타일 소스 중 --color1: #000; --color2: #2e8ff8; 위 컬러값을 변경하면 색상이 변경됩니다. keyframes 소스로 움직이는 효과를 주고 있으며 keyframes은 익스플로어에서 지원하지 않고 있어 크롬, 파이어폭스 등 지원하는 브라우저로 효과를 확인 하실 수 있습니다.

문서내에 존재하는 테이블의 데이터를 엑셀화하여 저장할 수 있습니다. 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..

Interactive Image는 이미지, 텍스트, 오디오, 소셜 링크, SoundCloud 트랙, HTML5 / Youtube / Vimeo 비디오 를 이미지의 대화 형 메모 / 마커 / 댓글 로 사용할 수있는 간단하고 유연한 jQuery 플러그인입니다 . ​ ​다운로드 받은 파일의 압축을 해제한후 examples/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지의 이미지가 표시되고, 이미지 위의 마우스를 올려보면, 아래의 그림과 같이 포인트를 표시해줍니다. ​ ​ 각 포인트에 마우스를 올려보면 일반적인 텍스트(HTML)로 설명문구를 표시하거나, 사진을 추가로 보여주거나, 오디오파일을 재생시킨다거나, 동영상을 재생시킨다거나, SNS사이트로 공유를 한다거나 하는게 가능합니다. ..

위의 테이블은 css로 반응형 스타일을 주어 작은 화면에서 아래의 이미지와 같이 한줄의 내용이 모두 합쳐져 하나로 출력됩니다. 사이트 또는 첨부파일을 받아보시면 자세한 소스를 확인하실 수 있습니다. 아래의 미디어 쿼리 소스로 700px 이하의 너비에서 내용이 합쳐지도록 조절되며 html 소스는 크게 2부분으로 구성되어 있습니다. 1) 표 타이틀(table head) 2) 표 내용 부분 화면의 너비에 따라 출력되는 타이틀이 다르기 때문에 표 타이틀이 내용부분에서도 반복되는 것을 볼 수 있습니다. 해당 부분을 참고 하셔서 본 반응형 테이블 소스를 유용하게 사용해보세요.

* Infinitely Scrollable Vertical Menu 메뉴를 반복스크롤 하여 무한으로 보여줄수 있는 기능 * License MIT LICENSE * 적용방법 첨부된 압축파일을 해제하여 웹루트 디렉터리에 업로드 합니다 상단에 css 와 script 를 호출합니다 ​ 스크롤을 적용할 메뉴부분의 html 및 script 를 작성합니다 적용할 html 문서에 항목이 보이는 영역에 맞는만큼 많은 클론이 필요합니다. 예를 들어, 8 개의 항목이 뷰포트의 높이에 맞으면 8 개의 복제본을 만들어야합니다 (class 의 경우 샘플파일 base.98fd6c19.css 에서 확인이 가능합니다) 웹페이지로 호출하면 아래와 같은 무한 스크롤 메뉴를 확인할 수 있습니다 첨부된 압축파일을 해제하여 샘플파일 index..