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

메뉴를 선택하면 선택된 상태로 따라다니는 드롭다운 메뉴입니다.활용도가 높아 다양한 사이트에서 사용 가능합니다.HTML 구조  Observe the platform icon's motion direction when there is up and down  hover on options.               Select a platform                                                        CodePen      CodePen                                Dribbble      Dribbble                                Behance      Behance                         ..

297가지의 언어의 소스코드를 하이라이팅 처리가 가능한 플러그인 Prismjs 입니다.소스 다운로드는 아래 페이지에서 할 수 있습니다.https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript 원하는 스킨과 언어를 선택하여 하단에 JS와 CSS 다운로드 버튼을 클릭하여 다운로드 하시면 됩니다.샘플은 아래 페이지를 확인 해주세요 (okaidia 스킨)https://prismjs.com/index.html?theme=prism-okaidia 다른 스킨의 샘플은 홈페이지에서 오른쪽 테마를 클릭하면 보실수가 있습니다.

다양한 브라우저를 지원하는 심플한 클립보드에 텍스트를 복사하는 플러그인 Clibboardjs 입니다.사용방법이 어렵지 않아 웹디자이너분들도 활용을 할 수 있습니다.사용방법은 https://clipboardjs.com/ 페이지에서 샘플과 함께 확인이 가능 합니다.npm install 필요없이 ZIP 파일을 다운로드 받아서 압축을 풀고 업로드 하여 진행 하시면 됩니다.

- 작동 원리이 플러그인은 간단한 API를 통해 HTML 구성 요소 로딩을 처리합니다. 서버에서 구성 요소를 가져와 대상 컨테이너에 주입합니다. 로딩 프로세스 동안 구성 요소의 최종 레이아웃과 일치하는 스켈레톤 화면을 표시합니다.플러그인은 템플릿 변수를 통한 동적 데이터 주입을 지원합니다. 로드된 구성 요소 내에서 콘텐츠를 채우기 위해 데이터 객체를 전달할 수 있습니다. 이는 사용자별 콘텐츠, 동적 텍스트 또는 HTML 템플릿에 삽입해야 하는 모든 가변 데이터에 적합합니다.스켈레톤 로더는 실제 구성 요소 페치 시간 동안만 실행됩니다. 이는 인위적인 지연이 아닌 실제 로딩 상태를 반영하는 자연스러운 로딩 경험을 만들어냅니다.- 라이센스MIT- 사용 방법1. 최신 jQuery 라이브러리를 로드한 후 필요한 ..

- 설명SignPad는 HTML5 캔버스를 사용하여 디지털 서명 패드를 만드는 가볍고 터치 기능이 있는 jQuery 플러그인입니다. 온라인 계약, 사용자 계약 또는 디지털 포기서에 이상적입니다. 사용자는 문서를 인쇄, 서명 및 스캔하는 대신 화면에서 직접 서명할 수 있습니다.이 서명 패드 플러그인은 사용자가 전자적으로 문서에 서명할 수 있게 하고 실행 취소 및 지우기 기능을 지원합니다. PNG 이미지(base64)로 서명을 캡처하여 사용자 ID와 타임스탬프가 있는 JSON 형식으로 서버로 전송합니다.- 라이센스MIT- 사용 방법1. jQuery 라이브러리를 불러옵니다.2. jQuery 라이브러리 뒤에 signpad.js 스크립트를 포함합니다.3. 서명 패드를 렌더링할 빈 div 요소를 만듭니다.4. 기본..

Zebra  Accordion 은 가볍고, 여러 브라우저에서 사용 가능하며, 사용자 정의가 쉬운 jQuery 아코디언 플러그인으로, 대규모 콘텐츠 그룹을 효과적으로 구성하는 데 유용합니다.# 특징 CSS를 통해 높은 수준의 사용자 정의 가능모든 탭은 확장/축소될 수 있습니다마우스를 올리면 탭이 확장될 수 있습니다.브라우저 창 크기에 맞게 자동 스크롤ARIA 속성을 통해 접근 가능가볍고 사용하기 편리함 # 사용방법 1. Css2. HTML3. JavaScript# 옵션정보https://github.com/stefangabos/Zebra_Accordion 사이트에는 속성과 이벤트에 대한 안내가 되어 있습니다. 활용하여 사용하시려면 참고 바랍니다.

Three Dots 는 3개의 점으로 구성된 20개의 멋진 애니메이션 Loading Spinners 입니다.코드는 CSS/CSS3 로만 구성되어 있습니다. 샘플코드 경로 three-dots-master > three-dots-master > docs 입니다.docs 에 보면 index.html 이 있습니다. index.html 파일을 통해 아래와 같은 Spinner 를 확인할 수 있습니다. 구조는 생각보다 심플 합니다. dot-carousel spinner 를 사용하고 싶다면?HTML 코드와 CSS 만 가져가서 사용하시면 됩니다.위처럼 사용하시면 아래처럼 spinner 가 출력 됩니다. 물론 spinner display 처리는 간단한 스크립트를 활용하여 처리하시면 됩니다.

PDF, 웹사이트, YouTube 동영상, 오디오 파일, Google 문서 또는 Google 슬라이드를 업로드하면 NotebookLM이 이를 요약하고 여러 주제를 흥미롭게 연결해 줍니다. 이 모든 작업은 Gemini 1.5의 멀티모달 이해 기능을 통해 수행됩니다.라고 안내 되어있습니다. 여러 내용을 요약하고 이를 이해하기 쉽게 설명해줍니다.제가 키움페이 결제연동 메뉴얼 PDF 를 업로드 해보니 요약과 추천 질문들을 생성해주었습니다.오디오 생성도 가능한데, 영어만 되는 듯 합니다.질문을 하면 PDF 를 기반으로 답을 줍니다.현재는 PDF 하나 뿐인데, 여러 강의 대용량 PDF 여러개를 대상으로 한다면,요약과 설명을 쉽게 할 수 있을 걸로 보입니다.아직 유료화 얘기는 없고, 제한 항목에 대한 애기도 없었습니..

위의 이미지를 보면 쉽게 이해가 가능한데, 특별히 js 를 쓰지 않고, html data 속성으로 js 기능을 사용할수 있습니다.data-check-field 에 field5 를 주면 field5 값을 가진 name 은 모두 checked 가 됩니다.이렇게 사용 가능하게 해주는 jquery js 입니다.https://cdn.jsdelivr.net/gh/scintilla0/jquery.databind@latest/jquery.databind.min.jsCDN 을 사용하셔도 되고, github 에서 js 를 다운로드 받으셔서 사용하셔도 됩니다.https://www.jqueryscript.net/demo/easy-data-binding/그리고 위의 데모 사이트를 보시고, 활용하시면 되겠습니다.

AI를 이용하여 텍스트 또는 이미지를 바탕으로 UI 디자인을 제작해주는 서비스 Galileo AI무료 회원가입 후 접속하면 사용자들이 제작한 사례를 확인할 수 있다.무료버전이 있는 150개의 무료 크레딧이 제공되며,  텍스트 기준으로 개당 20크레딧 정도가 소모된다.초기 구성에 대한 시간을 줄이고, 초기 컨셉 구성에 시간 투자를 줄이는데는 좋은 서비스 인거 같다.생성 후 피그마에 붙여서 바로 추가 편집이 가능하며, 완전하진 않지만 코드로도 확인이 가능하다.프롬프트에 입력하는 설명이 명확하고 정확하면 더 좋은 결과물이 나옵니다.