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

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

HTML5 기초부터 응용단계까지 다용한 소스를 볼수있는 유용한 사이트입니다.^^ 사이트에 들어가시면 각 요소별로 분류가 되어 있고 요소마다 다른 요소와 바로 연결하여 확인을 할수가 있으니 유용하게 사용하시기 바랍니다.

JMC 스크롤 컴포넌트의 이해: jindo.m.Scroll 스크롤 컴포넌트(jindo.m.Scroll)는 JMC(Jindo Mobile Component)의 컴포넌트 가운데 가장 많이 사용하는 컴포넌트입니다. 이 글에서는 스크롤 컴포넌트의 특징과 사용 방법을 소개할 것입니다. 스크롤 컴포넌트가 필요한 이유 모바일 UI의 대중화 스마트폰의 대중화로 사용자는 기존 PC에서 보던 UI화면보다 위와 아래 고정영역이 있는 일반적인 모바일 UI를 더욱 친숙하게 여기고 있다. 이런 UI를 구성하려면 많은 콘텐츠를 빠르게 스크롤할 수 있는 기능이 필수적이다. 물론, 이런 기능을 데스크톱 브라우저에서 구현하는 방법은 매우 간단하다. 바로 "position:fixed" 속성을 이용하면 위쪽 영역과 아래쪽 영역을 화면에 고..

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

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

한개의 배경이미지로 브라우저 화면의 크기에 맞게 꽉차서 출력이 되는 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; } 하나의 배경이미지를 브라우저 전체화면에 꽉채우고자 할때 사용. 배경이미지의 중앙이 브라우저의 중앙에 출력합니다. 배경이미지는 큰이미지가 필요합니다. 배경 이미지의 가로, 세로 길이 모두 엘리먼트보다 크다라는 조건하에 가능한한 배경 이미지를 작게 조정합니다 가로/세로 비율은 유지됩니다. 사파리, 크롬,..

코딩하시면서 따로 반응형, html5, css3 등 여러가지를 공부 많이들 하실것이라고 생각이되네요 ^^ 요즘은 대부분의 사이트들이 반응형으로 만들어지는터라 반응형웹만 찾기가 상당히 귀찮을수도 있는데 소개해드리는 요사이트를 방문해보시면 제작되어 있는 반응형 웹들을 카테고리별로 검색해서 사이트를 확인할 수 있습니다 ^^ RWDB라는 곳이며 반응형 웹사이트만 모아둔곳이라서 바로바로 확인이 편리합니다 ^^ 반응형 웹사이트를 제작을 준비하시고 있으신 분이라면 디자인 및 코딩 요소등 여러가지로 도움이 많이 될꺼같아요 ^^

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에대한 정보가 가득합니다. 초보들도 알기쉽게 잘 정리 되어 있는 사이트입니다.^^ 한글로 설명이 되어 있어 보시는것에도 불편이 없으실것입니다. 좋은자료 많이 챙겨가시기 바랍니다^^