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

사용자가 고른 색상을 기준으로 색상을 추천해주는 사이트 "Khroma"를 소개합니다. 메인에 있는 "Personalize" 버튼을 클릭하시면 색상선택을 시작 하실 수 있습니다. 다양한 색상 50가지를 선택하실 수 있습니다. 50가지의 색상을 다 선택하시면 우측상단에 "Start Tranining" 버튼이 활성화되어 색상조합추천을 받으실 수 있습니다. 버튼을 누르면 선택한 50가지의 색상을 기준으로 AI가 분석을 시작하며 약 3~5분정도의 분석시간이 소요됩니다. 분석이 완료되면 다양한 샘플 조합이 화면에 출력됩니다. 좌측 상단 메뉴를 통해 문자, 이미지, 그라디언트 등 다양한 샘플예제들을 확인하실수 있습니다. 우측상단에 있는 설정을 누르시면 이미지 파일을 업로드하여 그이미지의 색상조합도 image메뉴에서 ..

비핸스(behance)는 어도비 소유의 사이트로 개인 포트폴리오를 전시할 수도 있고, 검색할 수도 있는 무료 온라인 웹사이트입니다. 작품 검색뿐 아니라 어떻게 작품을 구성하고 어필해야 하는지도 알 수 있어서 포트폴리오에 대해 공부하기에 매우 좋은 사이트입니다. [크리에이티브 툴] 메뉴를 클릭하면 어도비의 프로그램을 사용해 제작한 작품들의 컬렉션을 확인하실 수도 있습니다.

html5 에서 지원되는 audio, video 태그를 이용해서 오디오나, 동영상을 웹페이지에 재생해줄때 간단하게 오디오나, 비디오를 컨트롤러를 CSS를 이용해서 조절하는 플러그인입니다. 다운받은 압축파일의 압축을 해제한후, audio_demo.html 파일을 웹브라우저로 열어보면 오디오를 재생하기 위한 컨트롤 예제를 볼수 있습니다. video_demo.html 파일을 웹브라우저로 열어보면 동영상을 재생하는 버튼 및 플레이타임, 현재 재생되는 구간, 재생시간, 사운트크기, 전체화면으로 등등을 조절하는 컨트롤이 커스텀 된 것을 확인할 수 있습니다. html 태그를 보면 video 태그에 styleishe 를 줘서 제작자가 컨트롤을 커스텀할수 있도록 간단합니다. 비디오나, 오디오의 컨트롤을 비교적 간편하게 ..

MOCKUPWORLD 사이트는 다양한 목업종류를 선택하여 전문적으로 목업자료를 찾아볼 수 있습니다. 'FREE MOCKUPS' 메뉴에 마우스를 오버하면 나오는 다양한 카테고리를 통해 자료를 검색하거나 찾고자 하는 단어를 검색창에 입력하시면 많은 자료들을 검색하실 수 있습니다. 목업자료를 다운로드할 수 있는 외부사이트와 연결해주는 방식이기 때문에 많은 자료가 있고 목업 이미지와 해상도를 미리 확인할 수 있어서 사용하기 편리한 사이트입니다.

사이트 첫 페이지에 들어서면 위와 같이 인쇄, 방송, 인터넷 등 상업적 용도에도 무료라고 명시 되어있습니다. 특히나 유튜브 자막등에도 무료라고 합니다. 굉장히 많은 글씨체가 있으니 한번 방문해 보시기 바랍니다.

브라우저 창 크기를 조정하여 열 조정되는 반응형 레이아웃 css입니다. https://webdesignerwall.com/tutorials/responsive-column-layouts 미디어쿼리를 이용하여 뷰포트 너비에 따라 4열에서 3열 , 3열에서 2열로 자동 변경되는 반응형 열 레이아웃 CSS입니다. 복잡한 구조를 간단한 CSS를 이용하여 구성이 가능합니다. IE 11이하에서는 지원하지 않으나, 관련 자바스크립트 사용시 지원가능합니다.

순수CSS를 이용하여 브라우저간 지원이 되는 버튼 CSS입니다. \ CSS를 이용하여 div, p, a, 버튼 등 다양한 html 요소에 적용이 가능한 버튼 CSS입니다. 둥근모서리, css그라디언트, 색상, 폰트크기, 등등 다양한 요소를 조정할 수 있습니다. 롤오버 아웃 효과도 있어서 단조롭지 않게, 사이트에 적용할 수 있습니다.

jquery 버전 2.1.0 에서 최적화된 소스로 본 소스내에 라는 booklet 고유 jquery 소스를 적용하고, 핵심소스인 $(function() { //single book $('#mybook').booklet(); //multiple books with ID's $('#mybook1, #mybook2').booklet(); //multiple books with a class $('.mycustombooks').booklet(); }); 값을 이용한 다양한 option 을 적용하여 효과적인 UI 를 구현할 수 있습니다. https://builtbywill.com/booklet/#/documentation 위 링크를 통해 다양한 옵션설정을 확인할 수 있으며, https://builtbywill.c..

기본적으로 제공되는 이미지는 무료로 이용가능한 이미지입니다. 홈페이지 메뉴중 "license" 페이지를 먼저 열람하여 규격을 확인하시기 바랍니다. 허용범위에 대해선 1. Pexels의 모든 사진은 상업적, 비상업적 용도로 무료 사용할 수 있습니다. 2. 저작권을 고지하지 않아도 됩니다. 꼭 포토그래퍼나 Pexels를 출처로 밝혀야 하는 것은 아니지만 언제든 밝혀주시면 감사하겠습니다. 3. 사진을 수정할 수 있습니다. 창의력을 발휘하여 원하는 대로 사진을 수정하세요. 등의 허용범위 사항을 확인할 수 있으며, 웹사이트, 제품, 인쇄물, SNS 등에 공유 및 배포가 가능합니다. 아울러 허용되지 않는 범위에 대해서도 숙지하셔야 합니다. 1. 식별할 수 있는 인물이 부정적으로 또는 불쾌하게 나와서는 안 됩니다. ..

.scrollTop() 을 이용하여 스크롤시 지정한 값까지 이동하면 상단으로란 버튼이 노출되고 클릭시 부드럽게 상단으로 이동하며 버튼이 사라지는 자료입니다. 버튼 .scroll {position: fixed; left: 50%;bottom: 50px;display: none;} 버튼을 하단 고정으로잡고 숨깁니다. $( window ).scroll( function() { if($(this).scrollTop() > 400 ) { $('.scroll').fadeIn(); }else{ $( '.scroll' ).fadeOut(); } } ); 지정한 값만큼 스크롤시 버튼이 보이고 아니면 사라집니다. $('.scroll').click(function(){ $('html, body').animate({ scro..