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

홈페이지 제작이 어려운 여러분께 소개해 드릴수 있는 무료 홈페이지 기본틀을 다운받을수 있는 곳입니다. 여러형태의 기본틀을 볼수있으니 원하시는 틀로 나만의 홈페이지를 만드시는데 참고하시기 바랍니다. 무료로 다운로드가 되고 소스도 알아보시 쉽게 되어 있어 제작하시는 부분에서 많은 도움이 되실것입니다^^

CSS3를 이용하여 다양하고 고급스러운 이미지 hover효과를 보여줄 수 있습니다. 크롬브라우저를 통해 보시면 번역기능을 통해 좀 더 손쉽게 사용방법을 이해할 수 있습니다. 데모페이지에서 좌측에서는 호버의 종류 리스트를 확인할 수 있고. 클릭하시면 좌측에서 해당 호버효과와 관련된 내용이 출력됩니다. 이미지가 출력되는 부분에서는 마우스를 이용하여 미리보기가 가능하고. 바로 아래부분에서는 해당 소스를 확인할 수 있어 아주 간편합니다. 총 20여가지의 효과로 다양한곳에 적용해보시기 바랍니다.

HTML5 에서는 기존의 버전에서 하지 못했던 여러가지 기능등을 완벽히 구현하지는 못하지만 자바스크립트와 같이 사용을 한다면 플러그인 없이도 어느정도 구현이 가능합니다. 그중 canvas 기능은 그림판을 만들거나 간단한 게임, 이미지 효과를 적용할 수 있습니다. 각 목차 페이지로 이동을 하면 영문페이지로 접속이 되나 우측하단의 언어를 한국어로 선택하시면 한글페이지로 보실 수 있습니다. 아직은 IE9 이상 최신 브라우저에서만 지원이 되며 기존의 프로그램들을 모두 대체하지는 못하겠지만 앞으로 발전가능성이 충분히 있을 듯 합니다. canvas 를 이용한 몇개의 사이트를 소개해드립니다. http://www.effectgames.com/demos/canvascycle/ http://dougx.net/plunder..

부트스트랩은 일종의 웹사이트 저작도구로 (반응형에 최적) 다양한 템플릿을 제공하고 있습니다. css를 이용하여 라운드나 그라데이션등 효과를 주려면 css에 대한 지식이 있어야 하지만 부트스트랩을 사용한다면 코드만확인하여 붙여넣어서 사용할 수 있습니다. 아이콘을 사용하기 위해서 위 버튼태그의 3가지 클래스만 사용하면 바로 만들어낼 수 있습니다. 위와같이 사용하기 위해서는 먼저 head사이에 링크를 삽입하세요 삽입후 아래와같은 방법으로 사용할 수 있습니다. 위와같이 사용하면 아래와같은 아이콘이 노출됨을 확인하실 수 있습니다. 다양한 아이콘 및 효과들은 데모링크에서 확인하실 수 있습니다. 단 부트스트랩은 ie8이상 버전에서만 작동을하니 참고 부탁드립니다. 지원브라우저 문서모드는 최신문서모드를 사용하세요 ie8..

초보자나 숙달된 제작자 분들이나!! 누구나 탐나는 사이트를 하나 알려 드립니다^^ 3번째!! 무료로 만들어둔 파일들을 받아 자신에 색깔에 맞게 디자인을 수정하거나 참고하여 작업이 가능하니 많이 이용해주세요^^ 보시는 부분처럼 이쁘게 디자인한 것도 많아요~

메뉴이동시 타임라인이 함께 스크롤되어 사이트의 역동성을 표현할 수 있습니다. 메뉴를 클릭하면 타임라인이 함께 이동합니다. 압축파일안에 포함된 html이나 css를 이용하여 스타일을 변경해줄 수 있습니다.

익스플로러와 달리 크롬에서input박스에 커서가 올라 갈 경우 의도치 않게 푸른색 테두리가 나타나는 현상을 많이 보셨을것입니다. 이를 해결하기 위해서 간단하게 inpu에 Focus CSS를 적용해주시면 한번에 해결이 가능합니다. input:focus { outline: none; }

모바일에서 숫자 입력시 영문키패드와 동시에 숫자가 나올경우 숫자를 누르기에 공간이 협소한 경우가 많습니다. 이럴 경우 숫자키패드만 나오면 편리하다고 생각하는데 이럴때는 코딩시 간단하게 inputype을 tel로 변경해주시면 숫자키패드만 모바일 화면에서 확인하실 수 있어 좋습니다. 사용전 사용후

컨텐츠를 현재페이지에 오버레이 형태로 불러오는 페이지 제작시 유용합니다. 메뉴를 클릭하면 현재페이지에 오버레이된 형태로 출력합니다. 해당 사이트에 html, ss, avaScript 소스에 관한 자세한 설명과 소스를 다운로드 받으실수 있습니다.

css를 이용하여 카드를 뒤집는 효과로 레이어 앞과 뒤를 에니메이션으로 전환할수 있습니다. 마우스오버시, 마우스클릭시, 랜덤 3가지 방법으로 뒤집는 효과를 줄수 있습니다. 레이어의 앞과 뒷면 디자인이 가능으로모 여러가지 방법으로 응용이 가능합니다. 해당사이트에 css 의 원리와 구현방법에 대해서 자세하게 나와있습니다. 아래는 마우스 오버시 뒤집어 지는 효과입니다. 다른 효과는 해당 사이트에서 확인이 가능하며 소스전체를 다운로드 받으실수 있습니다.