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

SVG 코드를 Insert SVG란에 넣어 출력되는 Css코드를 이용하여 SVG를 백그라운드로 사용할 수 있도록 변환해주는 사이트입니다. Insert SVG에 svg 코드를 넣으면 아래와같이 출력이 됩니다. 아래의 ready for css의 코드부분에서 확인하실 수 있으며 preview에서 결과값도 확인할 수 있습니다. svg를 이용하여 보다 또렷한 아이콘을 출력하세요

배경 및 배경효과로 사용하기 좋은 particles.js를 소개합니다. 사이트 우측에 있는 설정으로 js의 옵션을 이것저것 확인하며 설정해볼 수 있습니다. [파티클 종류] 1) Default 2) NASA 3) Bubble 4) Snow 5) Nyan Cat 마음에 드는 파티클 종류를 선택하고 CodePen 버튼을 클릭하면 해당하는 소스를 바로 확인해보실 수 있습니다. ^^

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

상단 소스다운로드를 이용하시거나 아래 URL에서 다운받으실 수 있습니다. https://code.google.com/archive/p/jquery-tubular/downloads 유투브영상을 출력할 페이지에 스크립트 소스 3줄을 추가합니다. div 영역에 id 값 wrapper 값으로 적용을 합니다. 그 후 /js 폴더의 index.js 파일에 출력할 영상 ID 값을 적용하시면 됩니다. var options = { videoId: 'youtubeID값', start: 3 }; youtubeID값 은 youtube 사이트에서 재생화면으로 접속을 한 후 URL이나 소스공유하기시에 적용된 ID 값을 사용하시면 됩니다. ※ youtube 고유ID값이 abcd123 이라면 var options = { videoI..

Multiple CSS3 powered hover effects : CSS3 버튼 효과 또한, 데모사이트에서 아이콘, 테두리, 배경 등 여러가지 버튼 효과를 확인하실 수 있습니다.