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

마우스를 따라다니는 텍스트 애니메이션 효과입니다. 웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다. 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/ 위 링크의 스타트 설명을 따라 하다보면 쉽게 적용이 가능합니다. 다양한 차트와 여러 애니메이션 효과도 줄 수 있으니 차트가 필요하시다면 사용을 추천 드립니다.

다양한 목소리를 제공하는 TTS 제공 사이트 CLOVA Dubbing 입니다. https://clovadubbing.naver.com/ 무료로 5개 프로젝트까지 개설이 가능 합니다. 프로젝트 개설시에는 아래와 같은 인터페이스로 노출이 됩니다. 동영상이나 PDF 이미지를 추가 하여, 더빙 및 효과음을 추가 가능 합니다. 더빙내용은 Text로 입력을 하면 되고, 목소리를 선택 하여 미리듣기 혹은 더빙추가를 할 수 있습니다. 추가된 더빙을 적절한 위치에 드래그해서 배치를 하여 이용을 할 수 있겠습니다. 완성된 파일은 다운로드 기능을 이용해서 다운로드 하여 사용이 가능 합니다.

Line, Area, Bar 등의 다양한 차트를 지원하는 차트를 손쉽게 구현 할 수 있는 TOAST UI Chart 입니다. https://ui.toast.com/tui-chart 지원되는 차트는 아래 이미지를 참고 하시면 되겠습니다. 한국어 메뉴얼은 아래 페이지를 통해 접속 하시면 되고, 각 차트별로 메뉴얼을 볼 수 있습니다. https://github.com/nhn/tui.chart/blob/main/docs/ko/README.md 최신버전 및 버전별 소스 다운로드는 https://github.com/nhn/tui.chart/releases 페이지에서 제공 됩니다.

kslider는 이미지를 우아한 방식으로 표현하기 위해 만들어진 초소형, 완전 반응형, 사용하기 쉬운 jQuery 기반 슬라이더입니다. 화면 크기에 따라 높이/너비를 자동으로 조정합니다. 호버링 시 탐색 화살표를 자동으로 표시하거나 숨깁니다. Auto는 img의 속성에서 이미지 캡션을 만듭니다.alt 특정 속도로 이미지 간에 자동 전환됩니다. 회전목마와 같은 무한 루프. 와 같은 기능이 있습니다. 사용방법은 아래와 같습니다.