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

모바일 홈페이지 코딩과 반응형웹 코딩시 최적화되어 있는 툴입니다. 모바일 디바이스별로 선택하여 기기와 데스크탑 화면을 동시에 볼수 있는부분이 장점입니다. 먼저 위 사이트 링크를 클릭하시거나 아래의 링크를 통해서 실행파일을 먼저 다운로드 받으셔야 됩니다. 실행파일을 다운로드 받으시고 실행시키시면 윈도우 실행창에 아래와같은 아이콘이 생성됩니다. 위 아이콘을 눌러 실행을하면 아래와같은 화면이 뜨고 주소창에 주소를 입력하시면 모바일기기기와 pc화면이 분리되어 있는 화면을 확인하실 수 있습니다. 좌측의 휴대폰기종을 선택하여 디바이스를 변경할 수 있으며 변경시에는 ctrl-r을 이용하거나 새로고침을하여 적용을 시켜줘야 하는점이 좀 번거로울수도 있습니다. 실제 휴대폰을 들고 확인해본바 글꼴랜더링 이외에는 모든부분이 ..

페이스북이나 각종 SNS 웹페이지에서 주로 보여지고 있는 둥근 프로필 이미지를 포토샵없이 CSS만으로 가능한데요, 바로 border-radius 를 이용하면 됩니다.. 만약 이미지 크기가 100px * 100px 라면 img { width: 100px; height:100px; border-radius: 50px; /* 이미지 반크기만큼 반경을 잡기*/ } 2. 레이어에 백그라운드 이미지 깔고 border-radius 사용 #radius-box { width: 100px; height: 100px; background-image:url("배경이미지경로"); border-radius: 150px; /* 레이어 반크기만큼 반경을 잡기*/ display: table-cell; vertical-align: mi..

1. 사이에 메타태그 삽입 2. 수동으로 전화번호/SMS/이메일 등 링크 걸기 전화걸기 SMS문자 보내기 메일보내기

사이트 제작시 요즘에는 커서모양에 관심있으신 분들이 많습니다. 상단의 데모링크를 통해서 확인하실 수 있습니다. 커서형태별로 적용가능 브라우저 그리고 각 형태별 영역에 올리면 커서모양을 확인하실 수 있습니다. 다양한 커서형태 (약 36가지)를 확인하실 수 있으며. 사이트의 컨셉에 맞게 커서를 적용하실 수 있습니다. 이미지에서는 보이지 않지만. 사이트에 접속해보시면 이미지 영역에 마우스를 올리시면 각 코드에 따른 커서 형태를 확인하실 수 있습니다.

HTML을 입력하면 HTML구조에 맞춰 css를 컨버팅 해주는 사이트를 소개해드립니다. 코딩시 구조가 복잡해질수록 css구조가 복잡해지지만 위 컨버팅 사이트를 이용하면 보다 편하게 이용이 가능한거 같습니다. 간단히 예제로 html코드를 작성해보니 우측에 css영역에 html을 입력한 계층구조로 컨버팅되는 이미지를 확인하실 수 있습니다. 체크박스를 통하여 필요없는 클래스 또는 아이디명을 삭제할 수 있으며 사이트 방문필요없이 아래의 태그를 복사하셔서 아이프레임으로 퍼가기도 가능합니다 ^^ 코딩을 주업이신 퍼블리셔 분들꼐 도움이 되었으면 좋겠네요~~^^

html과 css 만을 이용하여 만든 썸네일 오버레이 효과입니다. 마우스를 오버하시면 오버레이된 박스쉐도우가 점점 얇아지면서 썸네일이 보이는 효과입니다. 해당 사이트에서 html, css 소스코드를 확인할 수 있습니다. css를 수정하여 투명도 색상등을 자유롭게 수정이 가능합니다.

자바스크립트 도움없이 애니메이션 효과를 만들 때 사용합니다. 즉 변화가 부드러운 애니메이션을 의미합니다. delay, property, duration, timing-function 의 4가지 속성을 가지고 있으며 property에서 지정한 속성의 값이 변경 될 때 자연스럽게 표현됩니다. transition속성 transition-property : 속성 transition-duration : 지속시간. transitin-timing-function: 지정시간동안 트랜지션 속도 사용예) 해피CGI a { text-decoration:none; } a.footer { padding:10px 20px; background:#0c4da2; } a.footer:hover{ background:#3baee7; }..

위와 같은 디자인 작업시 파란 박스 리스트에 float:left로 정렬을 시키고 오른쪽이나 왼쪽에 마진이나 패딩값을 주고, 마지막 또는 첫 박스에 해당 마진이나 패딩을 없애주는 방법을 주로 사용합니다.

Pure CSS Image Hover Effect Library 쉽게 확장이 가능한 이미지 마우스 오버 효과입니다. 총 44가지 효과가 있으며 무료로 소스를 다운로드 받으실수 있습니다. 사이트 상단의 free 버튼을 클릭하시면 css 소스를 다운로드 받으실수 있습니다. 효과별로 css 가 정리되어 있습니다.

이미지를 마우스로 클릭하면 해당 이미지가 확대됩니다. 닫기 버튼을 클릭하면 원래의 크기로 돌아갑니다. 해당 사이트에서 htm, css 소스를 확인할수 있고 사이트에 소스에 대한 자세한 설명이 되어있습니다.