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

유투브에 등록된 동영상을 웹페이지 배경에서 재생이 될 수 있도록 지원하는 Jquery.mb.YTPlayer 입니다. https://pupunzi.com/mb.components/mb.YTPlayer/demo/demo.html 페이지에 접속시 해당 스크립트가 구동되는 데모 화면을 확인이 가능 합니다. 첨부된 압축파일을 다운받거나 https://github.com/pupunzi/jquery.mb.YTPlayer 페이지에서 소스 다운로드가 가능 합니다. 압축을 풀어보시면 examples 폴더가 확인이 되며, 해당 소스들을 참고 하셔서 웹사이트에 추가 해주시면 됩니다. examples 폴더내에 있는 예제파일들중 소스가 간단하게 구현된 test-3.html 파일을 참고해보면 아래와 같습니다. 해당 소스는 배경에 ..

마우스휠 이벤트를 감지하거나 제어를 해야 되는 경우, 사용이 가능한 Jquery 플러그인 mousewheel.js 입니다. 첨부된 압축파일 (Ver3.1.13) 을 다운로드 받으시거나 홈페이지로 이동하여 최신버전을 다운로드 할 수 있습니다. http://plugins.jquery.com/mousewheel/ 압축파일을 풀어 보면 test 폴더가 있으며, 해당 폴더내에 접근시 샘플 소스를 확인이 가능 합니다. 샘플로 존재하는 소스를 보면 각종 영역에 대한 휠 이벤트를 감지 할 수 있는 샘플이 있으니, 해당 소스를 활용하여 필요한곳에 적용 하여 이용을 할 수 있습니다.

백그라운드 패턴등 배경이미지가 많은 사이트입니다. 원하는 배경이 있다면 preview 버튼을 누르면 해당 이미지로 배경을 깔린것을 확인하실 수 있습니다. 상단의 subtle patterns 버튼을 눌러 가지고 있는 패턴도 공유할수 있으니 참조하세요 ~~ 사이트 제작에 많은 도움이 되시길 바랍니다.

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

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

css 소스를 이용하여 탭메뉴를 만들 수 있습니다. 아래소스만으로 위 이미지와 같은 탭 메뉴 출력을 할 수 있습니다. 탭을 라디오 버튼으로 만들어주고 스타일을 씌워 탭메뉴 모양으로 만들어줍니다. 탭메뉴에 마우스를 올렸을때 글자색은 label:hover 안에 있는 color 값을 수정해주시면 됩니다.

도시, 하늘(구름), 드론촬영, 음식, 자연등 다양한 카테고리로 구분된 영상을 무료로 다운받을 수 있는 사이트입니다. 각 카테고리별로 클릭하여 영상자료를 play 해볼 수 있으며, 각 영상별로 640 x 360 의 저화질 이미지 부터 3840 x 2160 까지의 고화질 영상까지 지원됩니다. 이용하고자 하는 영상을 즉시 플레이하여 확인도 가능하여 원하는 고퀄리 영상을 상업적으로 이용할 수 있습니다. 본 사이트 좌측 스크롤부분에 라이센스와 관련된 사항을 확인할 수 있으며, 저작권에 제한이 없음을 안내하고 있습니다. 허나 당연한 조건인 재배포 및 재판매는 불가하며 본 영상을 이용할 시 본 사이트에 대한 출처를 밝혀서 이용하셔야 합니다. 이외 이용하는 시간 혹은 용도에 따라 제한된 라이센스가 있을 수 있어 사용..

본 사이트는 페턴, 일러스트, 아이콘과 같은 무료 벡터 그래픽을 제공해주는 사이트입니다. 무료로 다운로드 할 수 있으며 상업적 목적으로 사용하거나 개인적인 용도로 이용이 가능합니다. 본 소스는 ESP, PNG, AI 등의 파일로 제공받을 수 있습니다. 아울러 개인용, 사업용 모두 사용이 가능하다고 되어있긴하지만, 사용 시기와 사용하시는 웹사이트의 빌더 형태에 따라 이용하시면 안되는 조건도 있을 수 있어 관련 라이센스를 반드시 확인하시고 이용이 가능한 조건이실 경우 활용하시기 바랍니다.^^ https://deszone.net/license/ (deszone 라이센스 안내페이지)

여러 각도에서 촬영한 상품의 이미지를 360도 회전하면서 마치 동영상을 보여주듯이 화면에 재생시키는 스크립트 입니다. 첨부된 파일의 압축을 해제하고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 재생하기 버튼, 멈추기 버튼 막대바를 이용해서 화면에 이미지를 표시해줍니다. 샘플 파일을 다운로드 받아서 압축을 풀어보면, 360도 회전하면서 이미지를 보여주기 위해서, 아래 그림 처럼 이미지를 총 36개를 준비해둔게 확인이 됩니다. 재생하기 버튼을 클릭하면 이미지를 순차적으로 표시해주는데 사진을 보여주면서, 마치 동영상을 재생하는것 과 같은 효과가 나타나네요. 온라인으로 상품을 판매하는 쇼핑몰 사이트에서 특정 상품의 이미지를 보여줄 때 사용할만할 듯 하네요.

일전에 세로 가운데정렬에 대한 자료를 올렸지만 이번에는 display:flex를 이용한 세로 가운데 정렬을 할수 있는 방법입니다. display:flex 속성을 가진 영역 안의 컨텐츠의 정렬방법을 align-self: center; -webkit-align-self: center; 를 이용하면 가로크기에따라 세로 중앙에서부터 채워지는것을 확인할 수 있습니다. 줄이기전 줄인후 사용법은 아주 간단합니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 텍스트가 늘어나도 가운데부터 정렬이되여 화면상에 보여줍니다. 하위버전의 브라우저에서는 지원이되지 않기때문에 사용상에 제약이 있지만 모바일이나 상위버전에만 작업을 할경우에는 유용합니다 ^^ 위속성이외에도 Flex를 이용한 다양한 레이아웃 및 속성들이..