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

* Auto Typer JS 애니메이션 타이핑을위한 플러그인. Chrome, Firefox, Safari, Internet Exploer 에서 사용가능 * License MIT License * 이용방법 사용법은 비교적 간단합니다 첨부된 압축파일을 다운로드하여 원하는 경로의 디렉토리에서 압축해제합니다 html 문서 상단부에 디자인에 필요한 style 파일을 호출합니다 초기문구 삽입 및 타이핑 효과가 들어갈 영역을 아래와 같이 넣어줍니다 타이핑 효과를 적용하기 위한 js 파일 호출 및 스크립트 옵션을 선업합니다 위와 같이 작성하게 되면 button 요소 클릭시 타이핑효과가 아래와 같이 진행되는것을 확인하실 수 있습니다 스크립트 정의 옵션에 해당 하는 속성의미는 아래와 같습니다 selector : 대상 요소..

iconmonstr는 직관적이고 심플한 아이콘들을 무료로 제공하는 사이트 입니다. 원하는 아이콘을 svg, eps, psd, png 파일로 다운 받을 수 있습니다. svg 파일의 경우, "Embed"로 html소스에 바로 적용할 수 있는 코드 복사가 가능합니다. png 이미지로 다운 받으실 경우, 사이트 내에서 사이즈조정 및 색상변경을 하여 다운로드가 가능하므로 이미지 편집프로그램으로 편집 없이 사용하실 수도 있습니다. iconmonstr의 아이콘은 무료로 이용할 수 있으나 재배포, 재판매는 금지하고 있으며, 자세한 라이센스는 [링크]에서 확인하실 수 있습니다.

사용자가 고른 색상을 기준으로 색상을 추천해주는 사이트 "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..