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

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

웹페이지 제작시 모든 페이지의 첫번째 스타일시트는 초기화 코드로 시작됩니다. 초기화 코드는 모든 웹브라우저에서 같은 결과물을 출력하기위해 사용합니다. 초기화 코드를 제공해주는 대표적인 웹사이트를 정리해봅니다. 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를 바꿔주는 JQuery 소스입니다. 변경 이벤트를 버튼에 작성시 이용가능합니다. 버튼 클릭시 CSS 클래스를 변경할 수 있습니다. 기본 클래스와 클릭시 변경되는 클래스를 지정하고 설정하면 됩니다. 사용법도 간단하고, 여러가지로 사용할 수 있는 유용한 JQuery 소스입니다.

css 만으로 이미지를 폴라로이드 사진처럼 만듭니다. 구글, 사파리, 파이어폭스에서만 적용이 됩니다. 아래 스타일소스를 이미지에 적용하면 됩니다. .polaroid { background:#000; /*Change this to a background image or remove*/ border:solid #fff; border-width:6px 6px 20px 6px; box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */ -webkit-box-shadow:1px 1px 5px #333; -moz-box-shadow:1px 1px 5px #333; height:200px; /*Set to height of your..

기존의 아주 기본적이고 평범한 체크박스는 이제 버리세요~ 그동안 체크박스의 디자인을 변경하기가 쉽지않았지만 css를 이용하여 체크박스 디자인을 변경해볼 수 있습니다. [ 데모사이트 예시 이미지 ] 파일을 다운받아보시면 아시겠지만 all css는 아니며, css와 html그리고 js. 이 3가지 합작으로 새로운 체크박스 디자인을 만들어 낼 수 있습니다.

html 소스는 물론이고 css에대한 정보가 가득합니다. 초보들도 알기쉽게 잘 정리 되어 있는 사이트입니다.^^ 한글로 설명이 되어 있어 보시는것에도 불편이 없으실것입니다. 좋은자료 많이 챙겨가시기 바랍니다^^

일반인들도 쉽게 코딩을 배울 수 있도록 짧은 영상을 여러개 유투브 사이트에 올려놓고 공유해주고 있는 사이트 입니다. CSS뿐만 아니라 자바스크립트부터 다양한 분야가 있으니 참고하면 좋을 사이트 인거 같습니다. 이미 많은분들이 이용하고 있는듯 하네요. 사람마다 성향은 다르겠지만, 저는 보기에 편리한 영상이었던거 같습니다. 회원가입도 필요 없이 유투브 접속만으로도 손쉽게 영상을 보면서 CSS의 정보를 얻어갈 수 있어서 편리한것 같습니다. 생활코딩 공식사이트 : https://opentutorials.org/ 생활코딩 유투브채널 : https://www.youtube.com/playlist?list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62

미리보기 페이지에서 화살표에 관한 설정값을 직접 입력할 수 있습니다. 설정값을 변경하면 바로 상단의 말풍선 박스의 미리보기에 적용되에 바로 확인할 수 있습니다. 우측에서는 CSS소스를 바로 확인할 수 있어 편리합니다.

CSS 로 만들 수 있는 레이아웃에 대해서 기본적인 개념을 배울 수 있는 곳 입니다. 한국어를 지원하고 있습니다. 이전다음버튼으로 순서대로 보시면 됩니다. 기본 개념부터 속성까지 알기쉽게 설명이 되어 있습니다.

modals 팝업의 다양한 애니메이션 효과 CSS에서 다양한 포퍼먼스의 탭메뉴 CSS까지. 다양한 부분의 애니메이션 효과 CSS 자료입니다. 각 효과별 타이틀에 보면 해당 애니메이션 효과 CSS 소스파일을 확인하고, 다운로드도 받을 수 있습니다. 전 이중에서 스크롤 효과들이 가장 마음에 드네요.. 단순한 사이트에.. 활력을 줄 수 있는 느낌이 드네요.