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

[해피CGI][cgimall] 여러 토글 디자인을 사용할 수 있는 MoreToggles.css

head 사이에 css 를 추가하고 사용하면 됩니다. html 은 위처럼 사용하면 되며 class 명만 바꾸면 됩니다. 다양한 디자인이 있습니다. https://jnkkkk.github.io/MoreToggles.css/ 위의 링크에서 더 많은 디자인을 확인해 보세요.
웹프로그램밍 자료실/HTML 자료 2023. 9. 6. 09:32
[해피CGI][cgimall] 3D 타이포를 쉽게 ztext.js

3D 타이포를 쉽게 만들어 주는 js 입니다. 용량도 3.8kb 로 작은 용량입니다. js 를 추가하고, data-z-xxxx 옵션들로 옵션을 조절 하면 됩니다. https://bennettfeely.com/ztext/#options 옵션 페이지를 위의 링크에서 확인 가능합니다. 각 옵션마다 샘플 코드를 바로 볼수 있어, 적용을 쉽게 할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 9. 5. 10:00
[해피CGI][cgimall] Satisfying curly cursor (3kb of vanilla JS on canvas)

자바스크립트를 사용하여 마우스를 따라 선이 생기는 효과를 만들어 볼 수 있습니다. HTML 소스 CSS 소스 body, html { padding: 0; margin: 0; } JS 소스 const canvas = document.querySelector("canvas"); const ctx = canvas.getContext('2d'); // for intro motion let mouseMoved = false; let mouse = { x: .5 * window.innerWidth, y: .5 * window.innerHeight, tX: 0, tY: 0 } let params = { pointsNumber: 40, widthFactor: .3, mouseThreshold: .6, spring: ...
웹프로그램밍 자료실/JAVA 자료 2023. 9. 4. 09:36
[해피CGI][cgimall] Loader - Splitting.js

Splitting.js를 사용하여 로딩하는 애니메이션 입니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML 소스 Loading .... CSS 소스 .vertical-flip { width: 10rem; height: 1rem; margin-block-start: 0.5rem; background: dodgerblue; } .wrap { outline: 1px solid #efefef; outline-offset: 0.25rem; } p { opacity: 0.5; } body { display: grid; place-items: center; min-height: 100vh; background: #080808; font-family: "Open Sans", sans-serif; ..
웹프로그램밍 자료실/기타 자료 2023. 9. 1. 09:50
[해피CGI][cgimall] 다양한 아이콘 사이트 - fontello.com

https://fontello.com/ 폰텔로는 이미지 파일로 제공되는 것이 아니라 웹폰트 형식으로 제공하는 무료 아이콘 사이트입니다. 자신만의 무료 아이콘 웹폰트도 만들 수 있으며, 만든 웹폰트 묶음을 다운로드 할 수 있습니다.
웹프로그램밍 자료실/기타 자료 2023. 8. 31. 09:12
[해피CGI][cgimall] 웹디자인 벤치마킹 사이트 - www.loud.kr

www.loud.kr/ '라우드소싱'은 의뢰자와 다수의 디자이너를 연결해 주며 로고, 패키지, 캐릭터, 웹/앱, 리플렛 등 다양한 분야의 카테고리가 있습니다. 다른 사람들의 웹디자인뿐만 아니라 여러 포트폴리오를 확인해 볼 수 있어 디자인 아이디어와 영감을 얻기 좋은 사이트입니다. 또한 진행 중인 콘테스트에 참여도 가능합니다.
웹프로그램밍 자료실/기타 자료 2023. 8. 30. 09:14
[해피CGI][cgimall] Minimal Quiz/Survey Form Builder - jQuery AskedPlugin

AskedPlugin은 설문 조사, 설문 조사, 설문지 및 퀴즈에 대한 양식을 동적으로 생성할 수 있는 사용하기 쉬운 jQuery 플러그인입니다. 최신 Bootstrap 프레임워크와 완벽하게 호환되며 라디오 버튼, 텍스트, 입력 필드, 텍스트 영역 및 확인란의 다섯 가지 질문 유형 중에서 선택할 수 있습니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. json 데이터를 기반으로 위 와 같이 설문조사를 하는 화면을 만들어줍니다. js/asked-config.js 파일을 열어보면, 질문지와 선택지에 대한 데이터포맷을 확인할 수 있습니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 8. 29. 09:07
[해피CGI][cgimall] RegEx Pal - 정규식 테스트 웹사이트

정규식을 간단하게 테스트를 할 수 있는 웹사이트 regexpal.com 입니다. 시각화가 잘 되어 있어서 정규식의 결과를 즉각 확인이 가능 합니다. https://www.regexpal.com/ 페이지를 통해 정규식을 테스트를 할 수 있습니다. flags 버튼을 클릭하여 정규식 옵션 지정을 할 수 있습니다.
웹프로그램밍 자료실/기타 자료 2023. 8. 28. 09:09
[해피CGI][cgimall] Image Map Generator - image-map.net

이미지의 특정 영역에 LINK를 거는 Image Map을 쉽게 할 수 있도록 기능을 제공하는 Image Map Generator 입니다. https://www.image-map.net/ 페이지를 통해 기능을 이용 할 수 있습니다. 첫 페이지에서 PC에 있는 이미지를 직접 업로드를 하거나, 웹페이지의 이미지 링크를 입력 할 수 있습니다. 각종 영역을 선택하여 위치를 지정이 가능하고, 각 영역별로 링크주소, 타이틀, 타겟 지정이 가능 합니다. 영역 세팅이 완료가 된 이후 하단의 "Show Me The Code!" 버튼을 클릭하면 아래와 같이 소스 확인을 할 수 있습니다.
웹프로그램밍 자료실/HTML 자료 2023. 8. 25. 09:41
[해피CGI][cgimall] Minimal Accessible Responsive Table Plugin - jQuery Easy Table A11Y

Easy Table A11Y는 모바일 및 태블릿 장치와 같은 작은 화면에서 테이블 보기 경험을 향상시키도록 설계된 최소한(~1kb 축소), 액세스 가능, 반응형 테이블 jQuery 플러그인입니다. 작은 화면에서 볼 때 다중 열 테이블을 간결한 2열 형식으로 변환하여 정보를 손상시키지 않으면서 가독성을 향상시키는 방식으로 작동합니다. 다운로드 받은 파일의 압축을 해제한 뒤, dist/demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면이 크면 위 그림의 표처럼 표시가 되다가, 화면의 크기가 줄어들면, 아래 그림 처럼 표의 모양이 변경됩니다. 사용방법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2023. 8. 22. 09:18
Prev 1 ··· 52 53 54 55 56 57 58 ··· 386 Next