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

위 스크린샷을 보시면 쉽게 이해가 가실 것입니다.URL 형태, 이메일 형태 체크는 위처럼만 주면 체크 됩니다.복잡한 형태로는 위처럼도 가능합니다.jpg, png, gif 만 가능하고 최소 2개 이상 파일 업로드 해야 하면 최대 이미지 크기는 512kb 를 넘지 않도록 하며,각 메세지까지 input file 에서 지정가능합니다.폼 필수 체크 및 제한을 주고 싶을때 아주 유용한 jquery 소스 입니다.

Liquid Glass CSS는 HTML 요소에 애플 스타일의 굴절되는 액체 유리 효과와 액체 왜곡 효과를 적용하는 경량 JavaScript/CSS 라이브러리입니다.# 라이센스MIT# 무엇을 할 수 있나?배경이 굴절되는 듯한 리퀴드/글래스 효과가 있는 카드, 버튼, 오버레이 등 현대적인 UI 스타일을 쉽게 구현할 수 있습니다.# Liquid Glass 디자인이란?Liquid Glass는 Glassmorphism(반투명 블러 기반 UI)에서 더 발전한 개념으로, 실시간 굴절·반사 효과와 깊이감을 주는 첨단 인터페이스 스타일입니다. Apple도 iOS 26부터 Liquid Glass 스타일을 도입했습니다. # 특징 - SVG 변위 필터 : 유기적인 "액체" 굴절 효과를 만들기 위해 feTurbulence사..

picknplace.js는 기존의 드래그 앤 드롭 방식을 두 단계 선택 및 배치 상호 작용 패턴으로 대체하는 JavaScript 라이브러리입니다. 표준 HTML5 드래그 앤 드롭 API는 모바일 기기 에서 제어하기가 매우 어렵다는 단점이 있습니다 . 항목을 이동하려다가 실수로 페이지를 스크롤하는 경우가 종종 발생합니다. Picknplace.js는 상호작용 모델을 변경하여 이 문제를 해결합니다. 사용자는 먼저 항목을 "선택"(잠금)하고, 원하는 위치로 스크롤하거나 이동한 다음 "배치"합니다. 이렇게 하면 의도적인 조작이 보장되고 UI가 실수로 이동하는 것을 방지할 수 있습니다.라이센스는 MIT 입니다. # 특징2단계 상호작용 모델 : 선택과 배치를 분리합니다.시각적 피드백 : 아이템 선택 모드 동안 가..

- 소개IO Select는 일반 select 요소를 Tailwind CSS로 스타일링된 검색 가능한 태그 입력란으로 변환하는 경량 jQuery 사용자 지정 select 플러그인입니다.- 특징- 다중 선택(태그로 표시됨)- 다크 모드- 접근성(ARIA 속성, 키보드 탐색)- 모바일 친화적 - 라이센스MIT- 사용 방법1. IO Select를 설치하고 jQuery 프로젝트에 임포트하세요.2. 또는 jQuery와 TailwindCSS가 설치된 문서에 'io-select.js' 스크립트를 직접 로드하세요. 3. 기존 선택 요소에 플러그인을 초기화합니다. 4. 가능한 모든 플러그인 옵션:placeholder: 선택 항목이 없을 때 표시되는 텍스트searchPlaceholder: 검색 입력란에 들어갈 자리 표시자..

- 소개SlimTable은 표준 테이블을 정렬 및 페이지네이션이 가능한 테이블로 바꿔주는 경량(압축 시 약 2kb) jQuery 플러그인입니다.- 특징- 다중 열 정렬 및 페이지네이션.- 사용자 지정 클래스가 적용되고 x번째 열에 정렬 기능이 비활성화된 테이블입니다.- 한 페이지에 여러 개의 표가 있습니다.- Ajax 요청을 통해 테이블 ​​콘텐츠를 가져옵니다. - 라이센스MIT- 사용 방법1. CDN에서 최신 버전의 jQuery 라이브러리를 포함시키세요.2. jQuery 라이브러리 다음에 jQuery SlimTable 플러그인을 포함시키세요. 3. 대상 HTML 테이블에서 플러그인을 호출합니다.4. 모든 기본 플러그인 설정은 다음과 같습니다.- 작동 화면

그리드 레이아웃 코드를 생성해 줍니다.우측 패널에서 원하는 행과 열을 입력하고 간격을 입력하면 좌측에 레이아웃을 미리보기로 확인할 수 있습니다.코드보기 버튼을 클릭하면 그리드 레이아웃 CSS 와 HTML 소스를 볼 수 있고 복사가 가능합니다.

원래 문장을 문자 배열로 쪼갠 뒤, setTimeout을 글자 수만큼 여러 개 예약해서 한 글자씩 이어붙여 출력하는 방법입니다.htmlcssjs첨부파일을 다운로드 하거나 해당 사이트에서 소스를 바로 확인할 수 있습니다.

이 예제는 콘텐츠 요소들을 원형 레이아웃 구조로 배치한 인포그래픽 UI 디자인입니다.각 항목이 원을 중심으로 균형 있게 분포되어 구조적인 정보 전달에 적합합니다.마우스 오버 시 강조 효과가 적용되어 인터랙션이 필요한 홈페이지 섹션에도 활용 가능합니다.회사 소개, 서비스 단계 설명, 프로세스 안내 등 다양한 웹 인포그래픽 활용에 적합한 예제입니다. HTML 구조- var n = 10ul(style=`--n:${n}`) - for (var i = 0; i li=i - }CSS 소스@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Roboto:ital,wdth,wght@0,75..100,100..900;..

CSS-Doodle과 SVG를 이용해 정적인 기하학 패턴을 구현한 코드입니다.SVG로 정의된 원형 도형을 패턴으로 등록하고, 이를 반복 배치하여 고전적인 타일 느낌을 만듭니다.HTML과 CSS만으로 패턴 배경을 제작할 수 있다는 점을 보여주는 실습용 예제입니다.웹 배경, 디자인 레퍼런스, 패턴 실험 등 다양한 용도로 활용할 수 있습니다. HTML 구조https://esm.sh/css-doodle"> CSS 소스html, body { margin: 0;} css-doodle:not(:defined) { display: none;}

ChatPDF는 인공지능(AI)을 활용하여 PDF 문서와 대화할 수 있게 해주는 도구입니다. 쉽게 말해, 수십 페이지짜리 서류를 일일이 읽지 않아도 AI에게 질문을 던져 필요한 정보만 빠르게 뽑아낼 수 있는 서비스입니다.주요 기능은자동요약, 질문하면 답변 받기, 출처 표시, 다국어 지원, 영문 문서를 한국어로 질문해도 답변 가능 등다양한 기능을 제공합니다.학생, 연구원, 직장인 등 다양한 분야에 활용이 가능하겠어요.플랜은 기본 무료로 이용하실 수 있으나, 유료 플랜시 파일용량이 더 커지고, 페이지 수도 늘어 납니다. 또한 질문수 등도 늘어나구요.유료 플랜은 월 14,900원입니다.논문, 책, 학술 기사, 보고서 등 분석이나, 요약 등 활용하기 좋아요.