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

HTML5에서 공식으로 채택한 자바스크립트 API들에 대하여 이해하기 쉽도록 예제와 참고사이트에서 제공하는 내용을 번역 또는 실정에 맞게 의역한 사이트 입니다 ^^ 앞으로 사용될 HTML5에 도움이 될것같아 자료를 찾아보았네요 ~ 자세한 내용은 상단의 링크를 통해서 페이지 내용들을 확인하실 수 있습니다

사이트를 접속하시면 4가지 종류로 정보가 나누어 져 있습니다~ 원하시는 정보를 클릭하시어 들어가시면 해당 프로그램에 대한 정보를 확인할수 있으며 간단한 예제소스등도 볼수 있습니다. 유용한 정보 많이 등록되어 있으니 확인해보시고 많은 도움 받으시기 바랍니다^^

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

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

간단히 Css또는 Scss를 이용하여 기본이미지를 20가지 이상의 다양한 효과를 입힐 수 있는 자료입니다. http://bennettfeely.com/image-effects/ 위 링크에서 자료확인 및 사용법 기본 css를 다운 받으실 수 있으며 사용법도 확인하실 수 있습니다. 간단한 사용법은 아래의 이미지를 확인하시면 쉽게 적용하실 수 있습니다. 적용하길 원하는 항목을 확인한다음 css또는 scss를 복사하여 해당 클래스를 이미지에 적용해주시면 됩니다 ^^ 다양한 효과를 적용할 수 있지만 css3를 이용하여 적용하기 때문에 익스플로어 구버전 및 일부 부라우저에는 적용이되지 않으니 참고 부탁드립니다 ^^

바둑판 그리드 형태의 디자인 템플릿 데모가 있는 사이트입니다^^ 소스는 html5로 이루어져 있으며 pc와 모바일 그리고 테블릿기기를 구분하지않는 반응형으로 제작되어 있습니다 각 탭을 클릭하면 애니메이션 효과와 함께 탭 상세 내용이 노출이되는 형태이구요 ^^ 각 탭을 클릭하면 애니메이션 효과와 함께 아래의 이미지와같이 노출이 됩니다. 위 템플릿 파일을 그대로 사용하시기보다는 html5나 반응형 사이트 구축을위해 준비하시고 계신분들께서 참조하시기에 좋은 예제인것 같습니다 ^^ 기본 마크업은 아래와 같은 형태로 되어 있습니다. Menu Close 보다 자세한 내용은 데모 페이지에서 확인해주시면 됩니다 ^^ 템플릿을 확인하여 웹페이지 제작에 도움이 되셧으면 좋겠네요 !

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

새롭게 나온 html5에 대한 예제파일이 많습니다. 아직은 미흡한 부분도 있지만 html5 예제파일만큼은 다양하게 등록이 되어 있으니 확인해보시고 유용하게 사용하시기 바랍니다^^

초보자분들도 유용하게 사용할수 있는 소스 홈페이지입니다. html5, php 등 다양한 소스가 등록되어 있으며, 각각의 페이지에는 예제와 같은 소스가 추가 되어 있는부분이 많아 도움이 많이 되실것이니 유용하게 사용해보세요^^