목록#happycgi (1324)

웹솔루션개발 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] kcToggle : jQuery Themable Checkbox Plugin

kcToggle은 기본 브라우저 checkbox 설정을 jQuery 플러그인으로 대체합니다. 적용방법은 다음과 같습니다 첨부된 압축파일을 다운받아 원하는 웹디렉터리에 업로드후 html 웹문서에 적용을 하면 되며 아래와 같이 스크립트 호출후 아래와 같이 checkbox 태그 마지막에 kcToggle 을 붙여주면 변환되며 사용이 간편합니다 디자인 변경이 필요한 경우 첨부파일에 있는 kcToggle.css 를 수정하시면 되겠습니다
웹프로그램밍 자료실/JAVA 자료 2021. 6. 3. 09:30
[해피CGI][cgimall] Css코드 용량 줄이기 - CSS Compressor

Css코드를 경량화 시켜주는 사이트입니다. 주석까지 다 날려버리는 ㅎㅎ 소스코드창에 작성한 css를 입력후 css압축 레벨을 선택후 compress 버튼을 누르면 작업이 시작됩니다. 완료후엔 압축률을 표기해주며 하단의 compressed javascript 부분의 소스코드를 가져와 파일로 저장하시면 됩니다^^
웹프로그램밍 자료실/기타 자료 2021. 3. 17. 09:17
[해피CGI][cgimall] Sticky Photostack 스크롤시 이미지가 쌓이는 효과

스크롤을 내릴수록 마치 사진이 한두장씩 쌓이듯이 이미지가 쌓이는 효과입니다. 스크롤을 내리면 이미지가 쌓이고, 스크롤을 올리면 쌓였던 이미지가 다시 내려갑니다. 이미지의 갯수는 html에서 조정 가능하며 이미지의 주소를 입력하면 됩니다.
웹프로그램밍 자료실/기타 자료 2021. 3. 15. 09:58
[해피CGI][cgimall] Check The Strength Of A Password - password-strength.js

입력받은 문자열이 비밀번호로 사용하기에 적당한지를 몇가지 규칙에 마춰서 체크해주는 스크립트입니다. 다운로드 받은 파일의 압축을 해제하고, index.html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 비밀번호칸에 아무것도 입력하지 않은 경우 한글자씩 입력을 해보면 안전한 비밀번호가 되기 위해서 필요한 조건이 만족하면 아래에 만족시킨 항목들이 녹색으로 변경이 됩니다. 비밀번호의 유효성을 체크하는 규칙이 아주 복잡한 규칙은 아니며, 입력한 비밀번호가 최소한 소문자가 1개, 최소한 대문자가 1개, 최소한 숫자가 1개, 최소한 특수문자가 1개, 최소한 8글자에서 15글자 정도에 만족하는지 여부에 의해서 만족하면 위 그림 처럼 만족된 조건의 항목을 하나씩 체크로 표시를 해줍니다. 웹페이지에서 사용하는 방..
웹프로그램밍 자료실/JAVA 자료 2021. 2. 24. 09:45
Prev 1 2 3 4 ··· 133 Next