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

다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 화면이 나오는데, 공의 개수와 최대 숫자, 보너스 공의 개수, 보너스 번호 등등을 임의로 지정을 한 뒤, GENERATE NUMBERS 버튼을 누르면 버튼 아래의 흰 공간에 공들이 표시가 되고, 공의 중간에 표시되는 번호들이 뱅글뱅글 돌다가 무작위로 번호가 지정이 됩니다. 로또 복권 번호 랜덤 생성기 이긴 하지만, 공의 숫자가 뱅뱅 도는 효과와, 공들의 번호가 중복이 되지 않는것, 공의 개수 및 숫자의 범위 조절 등의 몇가지 옵션의 조절이 가능한 걸 이용을 하면, 로또 복권 번호 생성기 라고는 하지만, 비슷한 다른 용도로도 쓰일 수도 있을것 같네요.

스크린샷을 넣고 원하는 사이즈 / 목업 색상 등을 선택하여 휴대폰 목업 이미지를 간편하게 생성할수 있는 사이트 입니다. 휴대폰 목업에 스크린샷 이미지를 쉽게 생성하고 싶을때 사용하시면 좋은 사이트 입니다.

옛날 PC 통신때 쓰이던 폰트 모양입니다. 사용권은 위와 같습니다. 레트로한 사이트를 구상중이시라면 한번 사용해 보시기 바랍니다.

첨부파일을 다운로드 받은후 압축을 해제한 뒤, Example/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 데모 사이트보다 몇몇가지 기능이 더 있네요. 데모용 화면을 열어보면, 위와 같은 버튼들이 표시가 됩니다. 각각의 버튼들을 클릭을 해보면 화면 좌측 상단에 아래의 그림과 같이 growl-style(으르렁거리는 스타일? 포효하는 스타일?) 의 경고창이 표시가 됩니다. 제작자는, 으르렁거리는 스타일이라고 표현을 했지만, 실제로 보면, 스리슬쩍 나타났다 아래로 스르륵 떨어지는 스타일로 보이네요. 시간이 지나면 경고창은 아래로 슬라이드되면서 떨어져서 없어집니다. 경고창이 표시되는 위치를 조절하는 옵션과, 경고창이 표시되는 시간을 초 단위로 조절하는 옵션이 있습니다. 그 외에는 경고창이 ..

Css를 이용하여 애니메이션 효과를 이용한 버튼과 텍스트 형태의 버튼을 제공하고 있습니다. CSS kine hover animations for links 버튼을 클릭하시면 버튼형태가 아닌 텍스트형태의 버튼을 확인하실 수 있습니다. https://tympanus.net/codrops/2021/02/17/ideas-for-css-button-hover-animations/ 페이지에서 데모 및 소스를 다운로드 받으실 수 있으니 참고 해주세요 ^^

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 password-builder.jquery.js 파일을 로드합니다. 2. 비밀번호를 출력할 객체를 만들고 플러그인을 호출합니다. 3. 비밀번호에 포함될 문자를 지정할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 아이콘 디자인 파일을 로드합니다. 그리고 Jquery 라이브러리와 dRawr 라이브러리를 로드합니다. 2. HTML5 canvas 객체를 생성합니다. 3. dRawr 플러그인을 호출하고, 그리기 모드를 활성화합니다. 4. 사이즈 조절 및 각종 옵션과 기능들은 사이트 상세 내용을 참고하세요. - 작동 예제

탭메뉴 애니메이션 2번째 버전입니다. 클릭스 위 이미지와같이 텍스트가 출력됨과 동시에 위치가 변합니다. 파일내에 html, js, css가 포함되어 있습니다.^^

* Thumbnails Preview Slider jquery 로 만든 썸네일 미리보기 이미지 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 마크업 구조는 아래와 같습니다 썸네일에 대한 항목을 보유할 기본 컨테이너 목록으로 구성됩니다 ts_thumbnails 클래스가 있으며 점 위로 마우스를 가져가면 축소판을 볼 수 있는 작은 보유하게 됩니다 tspreview_wrapper 클래스가 있는 div 내부에 있는 썸네일 목록은 다음과 같은 구조를 갖습니다 썸네일 주요 스크립트 호출은 아래와 같습니다 이외에 html 및 css , js 는 샘플파일의 index.html 파일을 참조하시면 도움이 되실겁니다 브라우저로 실행시 아래와 같은 화면을 확인할 수 있습니다

* juqery 3D Wall Gallery 3D 효과가 있는 jquery 갤러리 - 이미지를 가리키면 설명을 볼 수 있습니다 - 상단의 jQuery UI 슬라이더를 사용하여 이미지를 슬라이드합니다 - 마우스 휠을 사용하여 이미지를 스크롤 합니다 - 하단의 썸네일 미리보기를 사용하여 이미지 선택 - URL에 있는 이미지에 대한 해시 앵커를 사용하여 직접 가져올 수 있습니다 * 적용방법 첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다 적용하고자 하는 웹문서에 css 파일을 호출합니다 아래와 같이 이미지 태그와 앵커를 각각 지정해줍니다 아래와 같이 각 앵커 이미지에 맞는 썸네일 이미지도 지정해줍니다 그리고 하단에 제공되는 js 파일 및 jquery 파일을 호출합니다 적용된 화면은 아래와 같습니다..