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

원본 부분에 HTML, CSS, JS 코딩한 부분을 입력해줍니다.입력 후 변환 버튼을 클릭해줍니다.변환 버튼을 클릭하면 압축한 코드들이 나옵니다.압축된 코드를 복사하여 교체해주시면 되겠습니다.CSS, JS 도 동일한 방법으로 코드를 압축할 수 있습니다.[CSS][JS]html, js, css 코드를 압축된 코드로 변환하면 웹페이지의 로딩 거리를 줄이고, 서버의 부하를 감소시키며, 웹사이트의 전체적인 효율성을 높일 수 있습니다.

16진수 색상코드나 RGB 색상코드가 아닌 CSS에 지정된 색상명을 확인하고 조합 사용이 가능한 handy colors 정리된 정보입니다. 색상 편집기를 실행할 필요없이, css로 지정된 색상명을 바로 입력하여 사용이 가능하며, 본연의 색상을 조합하여 사용이 가능하네요. 또한 여러 테마별 색상 팔레트도 제공하여, 컨셉에 따른 색상 조합을 선택해서 CSS에 지정된 색상명으로 사용이 가능하네요. 색상명으로 구성하는걸 선호하면 좋은 자료네요.^^

순수 css로 만든 로딩 아이콘 애니메이션 효과입니다. css로 만든 로딩바 애니메이션으로 다양한 효과를 선택해서 쓰면 됩니다.

다음 슬라이드로 넘기게 되면 차트로 되어있는 다음 이미지가 확대 되면서 배경이 바뀌게됩니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML "Lossless Youths" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesentium nisi. Id laboriosam ipsam enim. Read More "Estrange Bond" Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore fuga voluptatum, iure corporis inventore praesen..

스프라이트 시트를 css로사용하여 움직이는 이미지 제작입니다. 소스다운로드 또는 데모페이지를 통해 확인해 보실 수 있습니다. HTML CSS .hi { width: 50px; height: 72px; background-image: url("http://s.cdpn.io/79/sprite-steps.png"); -webkit-animation: play .8s steps(10) infinite; -moz-animation: play .8s steps(10) infinite; -ms-animation: play .8s steps(10) infinite; -o-animation: play .8s steps(10) infinite; animation: play .8s steps(10) infinite; } @..

스크롤시 원하는 문구에 하이라이트가 텍스트 앞에서 뒤로 자동으로 적용됩니다. 원하는 문구에 mark 태그를 삽입합니다. 관련 css 소스입니다. mark 태그에 적용이 됩니다. animation-timeline을 이용하여 시작시점을 정할수 있습니다. 해당 사이트 또는 첨부파일에서 관련소스를 다운로드 받아 소스 확인이 가능합니다.

출처 : https://css-tricks.com/fluid-width-video/ CSS만으로 아이프레임 높이를 가로값에 맞춰 자동으로 늘어날 수 있는 코드입니다. 자바스크립트를 사용하지 않고 아이프레임 높이를 조절할 수 있습니다. padding-bottom 부분을 수정하시면 높이를 조절할 수 있습니다. HTML CSS 소스다운로드를 통해 확인해 보실 수 있습니다.

한개 또는 다중으로 범위를 선택하는 디자인 소스 입니다. html 소스 css 로 쉽게 디자인 변경이 가능합니다. 해당 사이트 또는 첨부파일을 다운로드 받아서 전체 소스를 확인할 수 있습니다. 해당 사이트에서는 디자인 변경을 미리 해볼수 있습니다.

CSS 만으로 별점 선택하는 코드입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. [HTML 소스] Pure CSS Star Rating Widget [CSS 소스] @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); fieldset, label { margin: 0; padding: 0; } body{ margin: 20px; } h1 { font-size: 1.5em; margin: 10px; } /****** Style Star Rating Widget *****/ .rating { border: none; float: left; } .rating > input { display: none; ..

css 만으로 웨이브 에니메이션 효과를 만들수 있습니다. 홈페이지의 랜딩 페이지에서 유용하게 사용이 가능합니다, 반응형이라 모바일 기기에서도 해상도에 맞게 잘 작동합니다. 해당 사이트에서 css 소스 확인이 가능합니다. 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.