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

데모사이트로 가시면 HTML 및 CSS소스가 공개가되어 있습니다. 긁어서 사용하시면 위와같은 효과를 바로 확인하실 수 있습니다. 설명에서도 사용방법이 나와있으며 링크2번을 클릭하시면 더 자세한 설명과 다른 형태의 로딩바로 확인하실 수 있습니다.~~

탭 클릭시 하단 이미지 영역이 페이드 아웃 되면서 다음 이미지가 슬라이드 됩니다. css에서 슬라이드 되는 속도 조절이 가능합니다. 스크립트에서 페이드 아웃을 조절할 수 있습니다. 해당사이트 또는 첨부파일을 다운로드 받아서 소스를 직접 확인할 수 있습니다.

파일을 업로드하면 해당 파일의 파일명이 출력 됩니다. css로 디자인 되어 있습니다. 실제 인풋은 css로 안보이게 처리 되었습니다. 초기문구인 select your file! 을 파일업로드후 파일명으로 변경하는 소스입니다. 해당사이트 또는 첨부파일을 다운로드 받아 소스를 직접 확인할 수 있습니다.

Textillate.js는 멋진 라이브러리를 결합하여 모든 텍스트에 CSS3 애니메이션을 적용하기 위한 사용하기 쉬운 플러그인입니다. 애니메이션 효과는 텍스트가 들어올때, 나갈때 두가지 타임으로 구분되어 설정이 가능하며, 설정값은 약 30가지 이상입니다. 메인 슬라이드나 광고영역에 손쉽게 사용이 가능하며, 밋밋한 사이트에 생기가 생겨보이네요.

부드러운 아코디언 효과의 이미지 슬라이드 밋밋한 이미지 슬라이드 대신 가볍고 쓸만합니다, 슬라이드 이미지는 배경이미지로 호출 출력하며, 크기는 CSS, 선택시 효과 애니메이션도 제어가 가능합니다.

Diceware는 jQuery 기반의 높은 엔트로피이지만 일반 주사위를 사용하여 Diceware 단어 목록에서 단어를 무작위로 선택하는 기억하기 쉬운 암호 생성기입니다. 작동방식은 아래와 같습니다. 비밀번호 생성기는 https://world.std.com/~reinhold/diceware.html 의 제안을 기반으로 하며, 가상 주사위는 5번 역할을 하고 5자리 숫자는 단어 조회 테이블에 사용됩니다. 4개의 주사위를 굴리면 인간이 기억하기 쉽지만 해독하기 어려운 엔트로피가 높은 4개의 무작위 단어가 제공됩니다. 데모페이지에 접속을 해서, 주사위를 굴릴 회수를 선택한뒤에 Roll Dice 를 눌러보면 아래의 그림 처럼 웹페이지에 주사위를 굴리는 화면이 표시가 됩니다. 정해놓은 회수만큼 주사위를 굴리고 나면..

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 toaster.js 플러그인을 링크합니다. 2. 기본 토스트 메시지를 표시할 수 있습니다. 3. ERROR 메시지를 표시할 수 있습니다. 4. 시간 초과 후 토스트 메시지를 자동으로 해제할지 여부를 결정할 수 있습니다. (기본값 : true) 5. 토스트 메시지의 배경색을 지정할 수 있습니다. 6. 토스트 메시지의 위치를 설정합니다. right-top (기본값) right-bottom left-top left-bottom center 7. 토스트 메시지를 클릭했을 때 이벤트를 설정할 수 있습니다. - 작동 예제

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.dynamicWidth.js 플러그인을 링크합니다. 2. 크기를 조정하려는 요소에 dynamicWidth() 메서드를 호출합니다. 3. 크기 조정 가능한 요소의 최소 너비를 설정할 수 있습니다. (기본값 : 0) 4. 크기 조정 가능한 요소의 오른쪽 패딩을 추가합니다. (기본값 : 3px) - 작동 예제

첨부파일을 다운로드 받아서, 압축을 해제하면 나오는 index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 화면에 이미지가 표시가 됩니다. 이미지들을 마우스로 클릭을 해보면, 위 화면처럼 lightbox를 이용해서 클릭한 이미지를 화면에 표시해주게 됩니다. 사용방법은 아래와 같습니다. 탐색하기 쉬운 라이트박스 팝업 에 콘텐츠를 표시하는 기능 이 있으며 이미지, YouTube 동영상, Vimeo 동영상 및 HTML5 동영상을 포함한 다양한 콘텐츠를 지원합니다. 자신의 포트폴리오, 갤러리 및 프로젝트를 우아한 방식으로 선보이고자 하는 사진작가, 아티스트 및 웹/모바일 개발자에게 이상적입니다.

Google 관리 콘솔 도구상자에서 제공하는 Dig (DNS조회) 입니다. 특정 도메인에 대한 A레코드부터 CNAME , MX레코드등의 다양한 정보 확인이 가능합니다. https://toolbox.googleapps.com/apps/dig/ 페이지로 접속하여 도메인을 입력하여 조회가 가능 합니다.