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

다양한 운영체제, 브라우저,해상도에 따른 크로스브라우징을 도와주는 사이트입니다.. 기본적으로 가입후 1시간 무료로 사용할 수 있으며. 이후에는 월19불 결제가 필요한 사이트지만. 상당히 편리함으로 사용을 한 번정도는 고려해봄직한 곳입니다. 처음 접속시화면이며 운영체제 선택화면 브라우저 선택화면 해상도 선택화면 입니다. 무료면 참 완벽한 사이트일껀데 아쉽긴 합니다 ^^;;

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

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

html 코드를 작성하다 보면 한번씩 부호들이 코드로 변환되어 있는것을 확인 해보셧을꺼예요 ㅎㅎ 이런 부호들도 모두 코드가 있다고 생각하면 다른 부호들은 코드로는 어떻게 표현될까 궁금하셧던적이 있으리라 생각합니다. http://htmlarrows.com/ 사이트로 가보시면 각 부호/기호 등 모두가 unicode, hexcode 등 코드로 표현되어 있으니. 찾고 계신분들도 있으리라 생각되어 글을 올리네요 ^^ 도움되시길 바랍니다~

css3의 트랜스폼을 이용한 parallax 스크롤 형태의 원페이지 디자인페이지 입니다. 간단한 원페이지 형태의 회사소개 페이지나. 포트폴리오 용, 또는 이벤트형으로 사용하시면 좋은소스입니다. 라이센스는 mit라이센스이며 파일안에서도 확인하실 수 있습니다. 마크업 및 사용방법은 위 데모사이트주소로 들어가시면 확인하실수 있으며 다운도 받으실 수 있습니다.

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

한개의 배경이미지로 브라우저 화면의 크기에 맞게 꽉차서 출력이 되는 css 입니다. html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 하나의 배경이미지를 브라우저 전체화면에 꽉채우고자 할때 사용. 배경이미지의 중앙이 브라우저의 중앙에 출력합니다. 배경이미지는 큰이미지가 필요합니다. 배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다라는 조건하에 가능한한 배경 이미지를 작게 조정합니다 가로/세로 비율은 유지됩니다. 사파리, 크롬,..

Css3를 이용하여 다양한 효과를 확인하실 수 있습니다. 단 Css3이기 때문에 구버전 ie에는 제약이 있지만. 요근래에 구버전 ie에서도 css3 효과를 동작가능하도록 제공하는 js들이 많으니 찾아서 사용해보시는 것도 좋을것 같습니다 ^^ 하지만 trasition 그리고 animation은 있는지 확실히 장담을 할 수 없습니다 ㅜㅜ http://caniuse.com/ 위 사이트에서 브라우저별로 동작하는 css속성들을 확인하실 수 있으니 확인해보시는것도 좋을것 같습니다. 기본적으로 trasition과 animaition에대한 css3 속성을 대충 한번 훌터보시고 자료를 받아서 사용하시면 쉽게 적용가능하리라 생각합니다. http://tympanus.net/codrops/2013/05/30/simple-ic..

html5 기초부터 배울수 있는 사이트입니다. 초보자분들에게는 이만한 사이트도 없을것입니다. 비롯 영어로 되어있지만 좋은 정보 많이 가져가시기 바랍니다^^

ellipses는 한줄만 적용이 됩니다. 한줄 이상의 콘텐츠에서도 적용이되어 크로스 브라우징이 가능한 라이브러리 입니다. 링크를 통해서 사이트로 이동해보시면 여러가지 예제와 함께 파일다운로드를 제공하고 있습니다. 한줄이상의 컨텐츠를 Ellip한 모습 일반 텍스트로만 작성된 문서나, 마크업을 통해서 표현된 텍스트, 텍스트의 중간을 자를수도 있습니다. 기본적인 사용방법은 여느 jquery소스와 동일합니다. 헤드부분에 위와같이 스크립트를 불러온다음. 사용하기위한 각 각의 스크립트 그리고 작성글에 원하는 ID값을 붙여주시면 동작을하게 됩니다. 자세한 사용방법은 http://dotdotdot.frebsite.nl/ 에서 확인하실 수 있습니다.