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

속성을 입력하면 타워의 위치가 옮겨지고 웨이브 시작을 누르면 디펜스를 하는 플렉스 박스 디펜스 게임이며, 해당 라운드를 클리어하면 자기가 쓴 속성에 풀이가 나옵니다. 클리어를 하면 할수록 게임 난이도가 어려워지기 때문에 정확하게 이해하면서 공부할 수 있는 사이트입니다!!

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.youtube-background.js 파일을 호출합니다. 2. 배경 요소를 만들고 배경으로 사용할 Youtube, Vimeo, HTML5 비디오 영상 주소를 data-vbg 옵션에 넣습니다. 3. 그리고 youtube_background 플러그인을 호출하면 끝입니다. 4. 각종 옵션을 제공합니다. (옵션 코드는 사이트를 참고하세요.) * 모바일에서 비활성화 여부 (기본값 false) * 재생 및 음소거 버튼 표시 여부 (기본값 false) * 영상 로드 전 배경 로드 여부 (기본값 true) * 페이지 로드 시 비디오 자동 재생 여부 (기본값 true) * 페이지 로드시 비디오 음소거 여부 (기본값 true) * 비디오 반복 ..

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 loading-overlay.min.js 파일을 호출합니다. 2. 로딩 텍스트와 스피너가 포함된 로딩 오버레이를 적용할 대상 요소를 만듭니다. 3. 로딩 오버레이용 CSS를 적용합니다. 샘플 CSS 코드는 사이트를 참고하세요. 4. 로딩 오버레이를 추가하거나 제거하는 트리거를 만듭니다. 5. loadingOverlay 함수를 호출합니다. 6. 옵션을 설정할 수 있습니다. - 작동 화면 (샘플 CSS 적용)

마우스를 따라다니는 텍스트 애니메이션 효과입니다. 웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다. HTML 구조 move move move move move CSS 소스 html, body { margin: 0; padding: 0; width: 100%; height: 100vh; background: #161616; overflow: hidden; } .text { position: absolute; pointer-events: none; font-family: venn-extended, sans-serif; font-weight: 700; font-style: normal; font-size: 6em; -webkit-text-stroke: 1px #fff; /*font-weight: 50..

돋보기 클릭 시 검색 영역이 나타나는 애니메이션 효과입니다. 사이트에서 다양한 용도로 응용이 가능합니다. 구현된 화면은 사이트에서 확인하실 수 있습니다. 자세한 소스는 사이트, 첨부파일에서 확인 가능합니다.

안녕하세요 해피CGI 입니다. 오늘 소개해 드릴 자료는 Apache 에서 제공하는 JMeter 입니다. JMeter 는 사이트의 부하 테스트하는 용도로 많이 사용되는 프로그램 입니다. # 설치 방법 1. https://jmeter.apache.org/download_jmeter.cgi 에 접속하여 다운로드 받습니다. 압축 해제시 접근이 용이한 폴더에 압축해제를 권장 드립니다. 실행 하실 때 cmd 를 통해 접근해야 하기 때문에 내문서와 같은 폴더에 하시면 매우 번거롭습니다. 저는 C 드라이브에 Jmeter 폴더를 만들고 해제 했습니다. 2. Java SDK 를 설치 및 환경변수 설정 https://www.oracle.com/java/technologies/downloads/ 다운로드 받아서 설치하세요. ..

그라디언트 컬러코드를 추천하고, 실시간으로 컬러를 변경해서 매칭해 볼 수 있는 유용한 사이트를 소개합니다. 각 카드의 하단에있는 숫자를 클릭하면 색상 코드를 복사 할 슬라이드를 조정하면 특정 범위 내에서 조정도 할 수있게되어 있습니다. 또한 각 카드에 호버하면 아이콘이 표시되고 각 컬러 코드의 변경 CSS 코드의 복사 Adobe XD와 Sketch에서 사용할 수있는 소재의 다운로드 수 있습니다.

멋진 그라데이션 컬러를 알고 싶을 때 유용한 사이트를 소개 해 드립니다. 그라디언트 기본적인 색상의 목록이 포함되어 있기 때문에 빠르게 선택 색상 코드와 CSS로 구현하는 코드를 확인할 수 있습니다. 또한 직접 원하는대로 조정 한 다음 코드 출력은 물론 디자인에 사용할 소재로 다운로드 할 수 있도록도되어 있습니다.

위처럼 도메인의 앞글자만 입력하면 자동 완성을 해주는 jquery js 입니다. 위처럼 간단히 적용 되며, 자동 완성시킬 도메인을 위의 domains 부분에 적어 두시면 되겠습니다. 국내에서는 naver.com , nate.com 등을 적어 두시면 되겠습니다.

현재 4.4.1 버전으로 지속적으로 업데이트 되고 있는 차트 JS 입니다. https://www.chartjs.org/docs/latest/getting-started/ 위 링크의 스타트 설명을 따라 하다보면 쉽게 적용이 가능합니다. 다양한 차트와 여러 애니메이션 효과도 줄 수 있으니 차트가 필요하시다면 사용을 추천 드립니다.