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

다양한 CSS3 효과를 한눈에보고 다양한 효과를 guthub에 공개된 소스를 이용하여 홈페이지에 반영할 수 있습니다. https://github.com/leaverou/animatable 위 링크에서 소스를 다운받으실 수 있으며 제작하는 사이트에 적용하시면 됩니다 ^^ css3를 공부하시는 분이라면 소스파악에 도움이 될듯하며 급하게 다양한 효과를 사이트에 반영하고 싶으신분에게는 좋은 자료가 될것 같습니다.

기본적으로 알아두면 좋은 html 소스와 설명 부터 CSS 와 자바스크립트까지!! 쉽게 생각하실수 있겠지만 꼭 필요한 부분을 잘 정리해둔 사이트입니다. 들어가셔서 유용한 정보 많이 습득하시길 바랍니다^^

원 형태의 네이게이션으로 독특한 구조의 네이게이션입니다. CSS Transforms 을 사용하므로 익스10이상 크롬에서 구현됩니다. 사이트 하단에 위치한 것과 사이트 중앙에 위치한것 두가지 타입이 있습니다. 해당 사이트에서 소스다운로드와 데모체험이 가능하고 그림으로 구현되는 원리가 잘 설명되어 있습니다. 익스10버전, 크롬에서는 정상작동하고 사파리에서는 구현은 되나 네비게이션 메뉴 크기가 제대로 구현되지 않습니다.

css와 jQuery를 이용하여 양쪽의 블록이 열리고 닫히는 효과(커튼효과)입니다. HTML형태로 기본구조를 구성합니다. section 태그와 div태그를 이용하여 단락 및 구조를 구성합니다. 아래는 커튼효과에 사용되는 각종 css 스타일입니다. 모든 소스 및 데모체험은 해당사이트에서 확인 및 다운로드가 가능합니다. 데모화면과 같이 좌우의 블록이 커튼효과와 함께. 다음 내용이 보여집니다. 원페이지형태의 사이트를 보다.. 다이나믹한 효과로 만들수 있습니다.

웹페이지 제작시 모든 페이지의 첫번째 스타일시트는 초기화 코드로 시작됩니다. 초기화 코드는 모든 웹브라우저에서 같은 결과물을 출력하기위해 사용합니다. 초기화 코드를 제공해주는 대표적인 웹사이트를 정리해봅니다. 1) html5 doctor css reset http://html5doctor.com/html-5-reset-stylesheet/ 2) Eric Meyer's reset css http://meyerweb.com/eric/tools/css/reset/index.html 3) YUI 3 reset css http://yuilibrary.com/yui/docs/cssreset/

웹페이지에서 원하는 버튼모양을 선택하여, CSS를 바로바로 만들 수 있는 홈페이지입니다. 또한 한글로 되어 있어.. 더욱 편리합니다. - 원하는 버튼의 모양을 클릭하고 색상, 글자체, 굵기, 그림자 등등을 간편하게 클릭으로 선택할 수 있습니다. - 글자가로 위치, 세로위치, 그림자 퍼짐정도, 테두리 등을 선택할 수 있습니다. - 원하는 버튼 선택이 끝나면. CSS 소스를 복사할 수 있습니다. - 맨하단에는 기본 버튼 디자인외 다양한 디자인의 버튼을 선택하고 이용할 수 있습니다. 참고로 해당 홈페이지는 크롬에서 정상작동을 하니.. 크롬으로 확인해보세요... 이미지제작없이 CSS로 다양한 버튼을 만들수 있어.. 아주 효율적이네요.. 이용해보세요.

white-space : 공백문자 다루는 방법을 지정하는 코드. (HTML 상에서 띄어쓰기 또는 줄바꿈, 탭으로 인한 공백 등등) white-space : normal; - 기본값, 연속 공백과 줄바꿈 등은 통합해서 표현 white-space : pre; - 원문 그대로 출력. normal과 반대. white-space : nowrap; - 스페이스 바를 막 눌러서 들어가는 연속 공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함. white-space : inherit; - 부모 요소의 값을 상속 ------------------------------------------------------------------------------------------- word-break : 텍스트가 들어가..

위와 같은 패턴종류, 사이즈, 색상값을 설정하면 데모이미지가 변경되게 됩니다. 위 소스를 응용하여 이미지와 합성하여 위 이미지 샘플과 같은 용도로 응용이 가능합니다. 위와같은 다양한 종류의 패턴을 확인할 수 있습니다.

CSS hack 이란? 브라우저의 차이나 버그를 이용해 일부 브라우저를 제외 또는 특정 브라우저를 대상으로 CSS를 적용하는 방법을 'CSS핵' 이라고 합니다. 크로스브라우징을 위한 응급대처 같은 방법이라고 생각하시면 되고, 일부는 문법상 올바르지 않을수있는점 참고해주시고, 자주하는하는 핵 몇가지만 작성해드리겠습니다. 1. 스타핵 (star hack) 셀렉트 앞에 *html 을 붙히며 Win IE 4~6, Mac IE 4~5 등에 스타일이 적용되며 다른 브라우저에는 적용되지 않습니다. *html p{ padding:3px; } /* 맨앞에 *html 을 붙임 */ 2. 언더스코어 핵 (underscore hack) 속성 가장 앞에 언더스코어(_)를 붙이며 Win IE 4~6 등에서 스타일이 적용되고 다른..

마치 포토샵에서 제작된것같은 효과를 넣은 글자 모양을 css로 제작할 수 있습니다. 위 데모사이트로 이동하시면 간단하게 해당 효과에 들어간 css를 한눈에 확인하실 수 있습니다. 3개의 창중 첫번째창은 사용될 html파일의 소스이며, 두번째창은 css창으로 해당부분을 참고해보시면 되겠습니다. html 창 및 css창에서 내용을 직접 입력할경우 바로아래 부분에서 실시간으로 적용되여 보여집니다. 이 기능을 이용하여 좀 더 응용해보실 수 있습니다.