목록#해피CGI (1226)

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

[해피CGI][cgimall]Tab Style Testimonial Slider Example

index.html 파일을 웹브라우저로 열어보면 아래와 같은 데모를 확인을 해볼수 있습니다. 흑백사진으로 사람이 표시가 되고 사진을 클릭을 해보면 사진이 컬러로 변경이 됩니다. 사진 아래의 설명문구가 해당 사진에 맞는 내용으로 조절이 됩니다. 다른 사진을 선택해보면 아래의 그림 처럼 선택한 사진과, 해당 사진에 대한 설명문구로 변경이 됩니다. 사용하는 방법은 아래와 같습니다. 탭메뉴를 이용해서, 각 탭에 해당하는 컨텐츠를 표시하는 기능의 유형입니다. 회원관리, 신청자관리, 접수자관리 등등 각각의 평가를 하거나, 각각의 평가점수를 보기 위한 화면을 구성할 때에 활용을 해볼만 한 UI인 듯 하네요. 꼭 사람이 아니더라도, 사과, 바나나, 수박 등의 과일 사진이나, 강아지, 고양이, 거북이 등의 동물 등등의 ..
카테고리 없음 2022. 2. 21. 09:45
[해피CGI][cgimall]jq-signature - 전자서명을 웹페이지에 장착

온라인상에서 (웹페이지) 전자 서명을 받을 상황이 필요하신 경우 이용이 가능한 Jq-ignature 입니다. 가볍게 구동되어 좋지만 서명하는 공간에서 마우스가 벗어났다가, 다시 서명공간으로 접근시에 마우스가 클릭이 된 형태로 서명이 이어지게 되는 불편함이 있습니다. 데모는 http://bencentra.github.io/jq-signature/ 페이지에서 확인이 가능하고, 페이지 하단에서 서명을 한뒤에 Save Signature 버튼을 클릭하여 이미지 생성을 확인 할 수 있습니다. 해당 페이지에는 이용하는 방법도 같이 기재 되어 있습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 2. 15. 09:11
[해피CGI][cgimall]SK 에서 공개한 무료 폰트 suit

SK 에서 공개한 무료 폰트 입니다. 많은 프로덕트에서 사용자의 환경과 무관하게 동일한 시각적 경험을 제공하기 위해 본고딕―노토산스를 선택합니다. 라고 설명 되어있습니다. 웹폰트로도 제공하니 웹에서도 사용해보면 좋을것 같습니다.
웹프로그램밍 자료실/기타 자료 2022. 2. 14. 09:50
[해피CGI][cgimall]컬러픽커 입니다

3가지 색상을 바로보고 비교할수 있는 컬러픽커 입니다. 데모 링크를 통해서 바로 확인이 가능하며 하단의 Export 버튼을 클릭하여 자료를 다운 받으실 수 있습니다^^
웹프로그램밍 자료실/JAVA 자료 2022. 2. 10. 09:26
[해피CGI][cgimall]CSS Hover Effects 마우스 호버시 다양한 슬라이드 효과

마우스 호버시 다양한 효과를 한번에 확인 할 수 있습니다. SLIDE IN : 왼쪽에서 오른쪽으로 슬라이드 SLIDE UP : 아래쪽에 위로 슬라이드 SLIDE DOWN DELAY : 위에서 아래쪽으로 슬라이드 ( 아이콘은 출력시간 딜레이 효과 ) ROTATE : 꼭지점을 기준으로 회전하면서 출력 SCALE : 아이콘의 크기 변경 FLIP : 좌우 뒤집기 SKEW : 비스듬한 모양으로 변형 CORNER : 꼭지점에서 슬라이드 효과별 css 를 확인할 수 있습니다.
웹프로그램밍 자료실/HTML 자료 2022. 1. 27. 09:08
[해피CGI][cgimall]Jquery ui material design datepicker - codepen

Jquery ui를 이용한 달력입니다. 데모사이트로 이동을하면 오른쪽 하단에 Export 버튼을 확인하실 수 있습니다. 클릭하여 자료를 받아보시면 html,css,js 파일로 구성이되어 있습니다. Export가 되지 않는다면 회원가입 후 진행하시면 됩니다^^
웹프로그램밍 자료실/JAVA 자료 2022. 1. 13. 09:18
[해피CGI][cgimall] 텍스트의 차이점 비교 JQuery 플러그인

- 라이센스 MIT - 사용 방법 1. 2개의 TEXTAREA를 이용하여 비교할 텍스트를 각각 입력합니다. 2. 차이점 비교 버튼을 추가합니다. 3. 비교 결과가 출력될 요소를 추가합니다. 4. 상단에 Jquery 라이브러리와 app.js 파일을 링크합니다. 5. CSS를 통해 비교 결과 화면을 꾸밀 수 있습니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2021. 1. 11. 09:37
[해피CGI][cgimall] Collection of Button Hover Effects 마우스 오버시 효과가 나타나는 버튼들

마우스 오버시 애니메이션 효과가 나타나는 버튼 5개 입니다. 자바스크립트를 사용하지 않고 CSS만으로 구현하였습니다. 홈페이지에 포인트를 주고 싶을때 여러가지 효과를 낼 수 있습니다. CSS에서 효과를 수정 가능합니다. 예를들어 첫번재 버튼에 마우스 오버시 나타나는 효과를 변경하려면 이 부분을 수정하면 됩니다.
웹프로그램밍 자료실/기타 자료 2021. 1. 8. 09:05
[해피CGI][cgimall] Fullscreen drag-slider with parallax 드래그로 넘기는 풀 스크린 슬라이더

자바스크립트와 css를 이용하여 제작된 풀스크린 슬라이더입니다. 페이저와 마우스 드래그를 통해 슬라이드를 넘길수 있습니다. HTML을 통해 슬라이드 갯수를 조정할 수 있고. CSS를통해 배경이미지, 오버레이된 빗금 도형의 색깔 등을 변경 가능합니다. Javascript로는 애니메이션과 관련된 속성들을 변경할수 있습니다. 풀스크린 홈페이지를 제작시 유용하게 쓰일만한 슬라이더 입니다. 자바스크립트의 autoSlideDelay 부분 숫자를 조정해 각각의 슬라이드가 보여지는 시간을 설정할 수 있습니다. 6000은 6초입니다.
웹프로그램밍 자료실/JAVA 자료 2021. 1. 7. 09:08
[해피CGI][cgimall] 마우스오버 이벤트 슬라이등 패널 자바스크립트

제품 소개, 메뉴 소개 등에 활용가능한 마우스오버 이벤트 슬라이등 패털 자바스크립트 html 소스 편집을 통해 좌우 개수 조절이 가능하며, 이벤트성 홈페이지, 제품 혹은 메뉴 소개를 위한 홈페이지에 사용하면 좋을것 같은 효과와 구성입니다. 해당 영역에 마우스 오버시, 해당 영역에 이미지 영역에 좌우로 커지고, 영역을 클릭시, 해당 영역의 설명 레이어가 전체 출력됩니다. 소스도 비교적 간단하여, 여러 부분에 활용이 가능하네요.
웹프로그램밍 자료실/JAVA 자료 2021. 1. 6. 09:11
Prev 1 2 3 4 ··· 123 Next