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

CSS만 사용하여 이미지가 자동으로 올라가는 효과입니다. HTML 소스 https://images.unsplash.com/photo-1658250845157-403299ba4564?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1113&q=80' alt=''> https://images.unsplash.com/photo-1674909072480-ad551618b63e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=627&q=80' alt=''> https://images.unsplash..

별도의 JS, GIF없이 SVG아이콘으로 애니메이션 Loading Button을 만들 수 있는 소스입니다. Font Awesome과 같은 아이콘 라이브러리를 추가하고 아이콘을 HTML 버튼에 추가합니다. CSS로 버튼 모양을 만들어 줍니다. https://www.w3schools.com/howto/howto_css_loading_buttons.asp 해당 사이트를 참고하시면 로딩 버튼을 생성하는 방법을 자세히 확인할 수 있습니다.

스크립트 없이 CSS 만으로 드롭다운 효과를 줄 수 있는 소스입니다. 위와 같이 소스를 생성했을 경우 요소 위로 마우스를 이동할 때 나타나는 드롭다운 상자가 만들어 집니다. https://www.w3schools.com/css/css_dropdowns.asp 해당 사이트를 참고하시면 드롭다운 메뉴, 오른쪽 정렬된 드롭다운 콘텐츠, 드롭다운 이미지를 자세히 확인할 수 있습니다.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 maxlength.js 플러그인을 링크합니다. 2. 플러그인을 적용하려면 입력 필드에 data-max-length 옵션을 추가하면 됩니다. 3. 자릿수 제한 외에도 다양한 옵션을 사용할 수 있습니다. data-disable-autofill: 부분 자동 채우기를 비활성화합니다. data-disable-auto-comma: 쉼표 자동 완성을 비활성화합니다. data-disable-smart-minus: 스마트 마이너스 구성을 비활성화합니다. data-disable-init-refresh: 초기 새로 고침을 비활성화합니다. data-enable-highlight-minus: 기본 빨간색 또는 할당된 16진수 색상으로 음수 값 강조 표시를 활성화합..

- 라이센스 MIT - 사용 방법 1. QR코드를 생성할 컨테이너를 생성합니다. 2. jQuery 라이브러리와 jQuery.qrcode 플러그인을 로드합니다. 3. QR 코드 컨테이너에서 함수를 호출하고 내용을 정의합니다. 4. QR 코드에 라벨을 추가할 수 있습니다. 5. QR 코드에 로고 이미지를 추가할 수 있습니다. 6. 추가로 사용할 수 있는 옵션의 기본 값입니다. - 결과 예제

a11y Accordion은 웹 페이지 내 콘텐츠 확장 및 축소를 위한 고급, 액세스 가능, 필터링 및 구성 가능한 jQuery 아코디언 플러그인입니다. 아래와 같은 특징들이 있습니다. 아코디언 헤더 사이를 전환하는 Tab 키입니다. Enter 키를 눌러 현재 아코디언 패널을 열거나 닫습니다. 검색 상자를 사용하여 아코디언 머리글/패널/바닥글 콘텐츠를 필터링합니다. 맞춤형 스타일링. Light & Dark 테마가 포함되어 있습니다. 사용자 정의 액세스 가능 레이블. 시맨틱 마크업. HTML 정렬되지 않은 목록을 기반으로 합니다. 중첩된 아코디언도 지원됩니다. 다운로드 받은 파일의 압축을 해제한뒤 index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 일반 적인 아코디언 메뉴에, 입력박스..

티커뉴스 등으로 활용이 가능한 jQuery - Easy ticker plugin 입니다. 사용법은 홈페이지 ( https://www.aakashweb.com/jquery-plugins/easy-ticker/ )하단에서 확인이 가능 합니다. https://www.aakashweb.com/demos/jquery-easy-ticker/ 페이지에서 다양한 티커 기능을 데모체험이 가능합니다. (2페이지까지 제공)

가볍게 사용 가능한 이미지 슬라이드 기능을 제공하는 jCarousel 입니다. 사용법은 https://sorgalla.com/jcarousel/docs/ 페이지를 통해 확인이 가능 합니다. https://sorgalla.com/jcarousel/examples/ 페이지를 통해, 데모 확인을 해보시고 설치 여부를 판단 하시면 되겠습니다.^^

스크롤시 스크롤 모션효과를 확인할 수 있는자료입니다. 압축파일내에 HTML, Css로 작동하시는 것을 확인할 수 있습니다. 자료원본 출처는 아래의 링크에서 확인하실 수 있습니다. 그누보드 - 스크롤다운시 모션효과 > 퍼블리셔팁 (sir.kr)

고양이 이미지와 데이터 모음 API인 Cat API를 소개합니다. - 사이트에 접속하여 IMAGES/SEARCH 버튼을 클릭하면 각종 고양이 사진을 얻을 수 있습니다. - 이미지 호출 및 저장을 위해서는 API 키 발급이 필요합니다. - 무료 서비스를 사용하게 되면, 월 1만건은 사용할 수 있기 때문에 상업적 이용이나 큰 기업에서 사용하시는 것이 아니라면 문제없이 이용이 가능합니다. - 위 메뉴에서 '무료 가입'을 클릭한 후 이메일과 앱 설명, 사용할 예정인 프로젝트 유형을 선택 후 '가입하기'를 클릭하시면 입력한 이메일로 API 키가 발급됩니다. - 사이트 상단의 DOCUMENTATION 메뉴에 접속하시면 해당 API를 호출하기 위한 방법이 상세히 설명되어 있습니다. https://developers...