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

사이트에서 데모사이를 확인할 수 있고 소스를 다운로드 하실수 있습니다. 익스플로어 11 이상, 크롬에서 작동합니다. 데모페이지에서 다양한 효과의 마우스 오버 에니메이션을 확인하실 수 있습니다.

인풋박스를 클릭하여 값을 입력할 떄 생기는 테두리를 없앨 수 있는 CSS소스를 알려드립니다. focus를 활용하여 테두리를 지울 수 있습니다. input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus {outline:2px solid #d50000;} input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus {outline:none;}

브라우저를 사용할때 마우스로 드래그하면 기본적으로 나오는 파란색을 확인하실 수 있는데요. 이 기본 푸른색상을 CSS로 변경이 능합니다. selection 을 입력하여 원하는 색상으로 간편하게 변경하실 수 있습니다. ::selection { color:red; background:yellow; }

4가지 형태의 슬라이딩되는 배경이미지 해당사이트에서 소스를 다운로드 받으실수 있습니다.

html 을 처음 다뤄보시거나 html 편집기를 이용해본적이 없으신분들은 가장 간단하게 이용하여 즉시 확인할 수 있는 웹편집기 html-online 을 추천해드립니다. 별도 에디터 없이 홈페이지만 접속해도 에디터를 위지윅으로 위지윅을 에디터로 볼 수 있는 화면을 확인할 수 있어, 어떤 방식으로 코딩이 진행되는지를 한눈에 확인할 수 있습니다. 위처럼 좌측 위지윅에디터와 우측 html 편집기로 호환되어 있으며, html 편집기를 이용하여 코드 작성시 에디터상에 즉시 반영이 되며, 에디터로 편집하여도 html 편집기에 즉시 반영됩니다. 위와같은 코드를 적용하면 위와같이 코드가 즉시 반영되어 어떤 내용을 입력하고 있는지를 바로 확인할 수 있습니다.^^

Grid layout 형태의 소스로 반응형 형태로 제작이되어 있어 PC 및 모바일에서 사용할 수 있는 소스입니다. 상단의 데모버튼을 클릭하면 4종류의 레이아웃 형태를 확인할 수 있습니다. 데모의 형태에 따라서 창이 출력되는 애니메이션종류 색상별 검색 등 다양한 기능들을 확인하실 수 있습니다. http://www.htmldrive.net/items/show/1835/jQuery-plugin-for-better-grid-layouts 위 링크에서 데모확인 및 소스를 다운로드 받으실수 있으며 압축파일에 html소스 및 관련 css/js 파일이 있으니 참고하시길 바랍니다. 사이트 제작에 많은 도움이 되시길 바랍니다.

html 파일 코딩전 기본적인 베이스를 미리선택하여 완성후 원하는 코딩방식대로 진행할 수 있는 간편한 html 시작 편집툴입니다. 사이트에 접속시 doctype 및 html, head, meta, body 등 html 구문에 맞게 미리 생성되어있으며, META/HEAD 에 적용할 형태를 선택하여 내가 원하는 사이트 구축을 편리하게 진행할 수 있습니다. 처음 사이트 접속시 위와같은 기본구조가 제작되어있으며, meta 에 반영할 content명 및 body에 적용될 class등을 사전에 지정할수 있으며, X-UA-Compatible, Favicon 등 실제 사이트 구축시 반영할 조건을 갇춘 html 구성을 모두 적용할 수 있습니다. 제공되는 Jqurey 소스등은 미리 작성할수 있어 간편한 html 코딩을 진..

css3를 이용하여 페이퍼 형식의 디자인 버튼을 손쉽게 만들수있습니다. 페이지로 이동했을때 하단에 보시면 버튼별로 미리보기가 가능하며, 왼쪽화면에서는 HTML을 오른쪽 화면에서 CSS를 확인할 수 있습니다. 버튼의 관한 예시는 스크롤을 내리면 더 많이 확인할 수 있습니다.

크로스 브라우징 작업시 IE 버전에 따른 조건부 주석처리를 해야 할 경우가 종종 생깁니다. 그때 유용한 기능으로 아래의 내용을 보고 조건부별로 진행해보세요. Html 조건부 사용되는 기호 :! : 아니다(not) - 예) [if !ie] ie가 아니라면lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다() : 우선처리& : 그리고(and) - 예) [if (..

다양한 디자인의 버튼을 CSS로 만드는 css3button HTML5,CSS3로 배경색상, 테두리, 그림자효과등을 손쉽게 선택하고 CSS 코드를 생성하는 사이트입니다. 위 그림과 같이 배경색상, 테두리, 바깥그림자, 안쪽 그림자, 폰트크기, 폰트그림자 효과등 다양한 설정을 클릭으로 가능합니다. 설정한 버튼 스타일시트는 위와 같이 출력되며, 해당 코드를 복사 , 붙여넣기만 하면 끝... 이미지편집을 하지 않아도 이쁜버튼을 손쉽게 만들수 있어요.. 참고로 크롬브라우저에서 접속해야 사이트 이용이 원활합니다..