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

jQuery 4.0 이 출시 되었습니다.4.0 이 되면서,IE 10 이하 브라우저 지원이 중단 되었습니다.그리고 사용되지 않는 함수는 제거 되었습니다.jQuery.isArray, jQuery.parseJSON, jQuery.trim, jQuery.type, jQuery.now, jQuery.isNumeric, jQuery.isFunction, jQuery.isWindow, jQuery.camelCase, jQuery.nodeName, jQuery.cssNumber, jQuery.cssProps, 그리고 jQuery.fx.interval.위의 함수들이 제거 되었습니다.여러 함수와 IE 10 이하 브라우저 지원 중단 되면서, 코드가 다이어트 되어,압축 시 약 19.5KB! 까지 다이어트 되었습니다.IE 10..

다양한 아이콘 셋을 제공하는 사이트 입니다. 여러 시스템 아이콘도 지원하고 있고각 나라 국기 아이콘도 제공하고 있습니다. 다양한 모양으로 지원하니 사이트를 한번 둘러보시는걸 추천 드립니다.SVZ 부터 CSS, PNG 까지 받을 수 있습니다.아이콘이 필요할때 이용해 보시기 바랍니다.

Azure Translator API (Azure AI Translator)Azure Translator API는 Microsoft Azure의 언어 AI 서비스로, 텍스트 번역을 비롯해 언어 감지, 사전(바이링구얼 딕셔너리), 음역(Transliteration), 문서 번역 등 다양한 번역 관련 기능을 클라우드 API로 제공합니다. Azure 인프라와 자연스럽게 통합되기 때문에 보안/운영/확장 측면에서 엔터프라이즈 환경에 적합합니다. 주요기술 포인트- 텍스트 번역 + 언어 감지: 입력 언어를 자동 판별하고 즉시 번역- 번역 보조 기능: 바이링구얼 딕셔너리, 음역(Transliteration) 등 제공- 문서 번역: 대량/문서 단위 번역 시나리오 지원- Custom Translation: 도메인 특화 번..

DeepL APIDeepL API는 DeepL의 신경망 기반 번역(Neural Machine Translation)을 서비스/제품에 쉽게 붙일 수 있도록 제공되는 REST API입니다. 문맥을 고려한 자연스러운 번역 품질을 강점으로 하며, 웹/앱 다국어화, 고객지원 번역, 문서 자동 번역 등 “번역 품질”이 중요한 시나리오에서 많이 사용됩니다.주요 기술 포인트- REST API 기반: HTTP로 간단히 연동(번역/문서 번역/텍스트 개선 등 기능 제공)- 문서 번역 지원: 문서 형식을 가능한 유지하며 번역(문서 업로드/다운로드 워크플로)- 용어집(Glossary) & 커스터마이징: 조직/도메인 고정 용어를 일관되게 반영- 보안/데이터 처리 정책: API Pro 기준 “최대 데이터 보안(번역/개선 후 즉시 ..

# 설명Draggable은 모듈식 드래그 앤 드롭 라이브러리로, 작은 기능부터 시작하여 필요한 기능을 추가해 나갈 수 있습니다. 가장 기본적인 기능인 드래그 앤 드롭, 빠른 DOM 재정렬, 접근성 있는 마크업, 그리고 다양한 이벤트 처리 기능을 제공합니다. 네이티브 드래그, 마우스, 터치 및 포스 터치 이벤트와 호환됩니다.드래그 가능한 이벤트의 수명 주기에 연결하여 드래그 동작을 확장할 수 있습니다.끌어당길 수 있는 대상에 센서를 추가하여 끌어당김 감지 기능을 확장할 수 있습니다.이 라이브러리는 ES6를 우선적으로 대상으로 합니다.# 라이센스MIT License# 사용방법압축파일에 보시면 test.html 파일이 있습니다. 많은 기능들 중 Sortable, Swappable 기능만 데모로 구현해 두었습니..

# 설명Propeller.js 는 마우스를 이용하여 요소를 회전시키는 JavaScript 라이브러리 입니다. 관성 회전과 단계적 회전을 지원하며, 터치 기기와도 호환 됩니다. # 라이센스MIT License# 사용방법 압축파일에 보시면 index.html 파일을 이용하면 바로 작동되는 걸 확인할 수 있습니다. # 옵션 설정 - angle: 초기 회전 각도를 설정합니다.- inertia: 가장 중요한 옵션으로, 0과 1 사이의 숫자로 설정합니다. 0은 마우스를 뗐을 때 회전이 즉시 멈추는 것을 의미하며, 1은 무한히 회전함을 의미합니다. (이 데모에서는 0.99를 사용합니다.)- speed: 초기 회전 속도입니다. 실행 중(Runtime)에 속도 값을 변경하는 용도로도 사용할 수 있습니다.- minima..

Coze 코딩 없이 다양한 AI 모델로 스마트한 AI 챗봇을 제작 관리하는 플랫폼입니다즉 내가 가진 PDF나 텍스트 파일(지식 베이스)을 업로드하면, 우리 회사나 서비스에 특화된 전문 상담 챗봇을 만들 수 있습니다.코즈(Coze)의 주요 포인트* 노코드(No-code): 프로그래밍 지식이 없어도 드래그 앤 드롭으로 챗봇 제작 가능* 강력한 모델: GPT-4, Claude 3.5 등 최신 LLM을 무료 또는 저렴하게 활용* 멀티 배포: 만든 봇을 디스코드, 텔레그램, 슬랙 등에 클릭 한 번으로 연결* 확장성: 60개 이상의 플러그인과 워크플로우로 뉴스 검색, 이미지 생성 등 수행 구독료는 기본 무료인데 하루 10크레딧을 제공합니다.AI 모델 호출에 따라 크레딧이 소비되는데.유료 모델은 비싸서 유료 구독을..

Gauth 인공지능을 기반으로 학생들의 숙제는 돕는 온라인 도구입니다.Gauth AI의 핵심 기능- 스캔 및 문제 해결: 수학, 과학, 물리 등 복잡한 수식이 포함된 문제를 사진으로 찍으면 AI가 텍스트와 기호를 인식하여 즉시 해답을 제시합니다.- 단계별 설명 (Step-by-Step): 단순히 정답만 알려주는 것이 아니라, 어떤 원리로 해당 결론에 도달했는지 논리적인 과정을 단계별로 설명해 줍니다.- 다양한 과목 지원: 초기에는 수학 중심이었으나 현재는 화학, 생물, 사회, 영어 등 광범위한 교과목에 대한 질의응답이 가능합니다. 구독료는기본 무료로 쓸 수 있으며, 유료 구독시 1개월 약 1.5만원이며, 분기 단위, 연간 단위로 결제하면더욱 저렴하고 많은 혜택을 이용할 수 있습니다.유료 구독시 주요혜택에..

스크롤 위치에 따라 body 배경색이 패널 색상으로 자연스럽게 바뀌는 효과입니다.패널 위치 감지 + body 클래스 교체 + CSS transition입니다.구조가 단순하고 색상 추가가 쉽습니다.패널 높이가 달라도 정상적으로 동작합니다.HTMLCSSJS

화면에 **커서 전용 DOM(.cursor)**을 띄워두고, 마우스 위치를 CSS 변수 --mx, --my로 전달해 커서가 따라오도록 구성한 예제입니다.링크/버튼에 마우스를 올리면 body:has(...) 선택자로 상태를 감지해 커서 크기·표시 텍스트(예: “View”)·아이콘 표시가 자동 전환됩니다.사용 방법은 간단합니다. 페이지에 .cursor 마크업을 포함하고, 커서 상태를 바꾸고 싶은 요소에 cursor-read, cursor-icon 같은 클래스를 붙이면 됩니다.또한 JS는 mousemove 이벤트로 좌표를 받고, 약간의 지연(부드러운 추적)을 적용해 --mx/--my를 갱신합니다.참고로 :has()는 브라우저 지원 범위가 있으니(구형 환경) 운영 적용 전 호환성 체크를 권장합니다.HTML 구조..