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

위 상태에서 배경색상 및 폰트 색상을 변경할 수 있으며 아래와 같이 대문자, 소문자로 나뉘어 등록할 경우 같은 글자지만 전혀 다른 문자로 표현되어 출력됩니다. 위 아이콘은 다운로드도 받을 수 있습니다. 신기하고 재미있긴한데 어떻게 이용할지 고민이되네요.^^ 이런 시스템도 있구나하고 한번 구경해보시기 바랍니다.

무료 아이콘 및 백터이미지, 음원 파일등 다양한 콘텐츠를 무료로 이용이 가능한 icons8 입니다. 원하는 아이콘을 검색하면 위 화면처럼 종류별로 아이콘을 확인할 수 있으며, 검색된 아이콘에서 style 로 내가 원하는 리소스를 비교적 정확하게 검색할 수 있습니다. 검색된 아이콘은 클릭시 다운로드 및 소스를 이용하여 SVG 형태로 이용도 가능합니다. 이렇게 편리하게 이용이 가능한 무료 아이콘 사이트인데 모든것이 무료냐? 그건 아닙니다.^^ icons8 이미지를 무료로 이용을 하시는 경우 적용할 홈페이지내에 해당 사이트의 출처를 표시해두셔야 문제가 되지 않는다고 합니다. 이외에도 모바일, 오프소스 상에서도 이용시 출처를 남겨야 합니다. 또한 무료버전일 경우 받을 수 있는 형태가 PNG, ico 파일 2가지..

화면을 스크롤하면 텍스트가 우측으로 이동되며 이미지를 가로지르는 듯한 효과를 보여줍니다. 홈페이지, 첨부파일을 확인하시면 사용된 소스를 확인하실 수 있습니다. [html] 기본 html 소스에서 배경이미지와, 동일한 텍스트 2개를 만들어 줍니다. [style] position, overflow, z-index 스타일을 설정하여 지나가는 텍스트 > 이미지 > 이미지 안 텍스트 가 출력되도록 조정합니다. [script] 스크롤시 텍스트를 이동해주는 스크립트 소스입니다. 본 소스를 상단이 아닌 html 하단에 추가하셔야 작동됩니다. 소스를 참고하셔서 응용하여 다양하게 적용해보세요 ^^

CSS만으로 화살표 아이콘을 만들어 볼 수 있습니다. 홈페이지, 첨부파일에서 3가지의 화살표 스타일을 확인할 수 있으며 적용해서 사용해보세요 ^^ 화살표 모양은 border 스타일로 표현되었으며, 전체적인 색상은 *에 지정된 color 값으로 변경하실 수 있습니다. [첫번째 스타일] - 기본 style 소스 [두번째 스타일] - 기본 style 소스 [세번째 스타일] - 기본 style 소스

Jquery stop()메서드는 현재 실행중인 애니메이션(모션)을 필요에 의해서 정지를 시킬때 사용하때 주로 사용이 됩니다. $(선택자 ).stop( stopAll, goToEnd ); 첫번째 인수는 대기열에 등록되어 있는 모든 모션을 중지할지를 선택하는 옵션입니다. 기본은 false이며 두번재 인수는 현재 실행되고 있는 모션을 중지할지를 여부를 선택합니다. 기본은 false입니다. 자세한 예제는 링크를 통해서 확인하실 수 있습니다. https://www.w3schools.com/jquery/jquery_stop.asp

그림판이 웹에 그대로 구현 되어있습니다. 여러 기능으로는 - 이미지 URL 주소로 이미지 열기를 지원 - 그려진 그림 이미지 공유 사이트인 imgur 에 업로드 하기 - 여러 테마 기능 - 무한 실행 취소 / 다시 실행 기능 등 기본 그림판보단 여러 기능이 있습니다. 다양한 테마가 지원되니 경험해 보시기 바랍니다. https://github.com/1j01/jspaint 소스코드는 위의 링크에서 확인 가능합니다.

모바일웹에서 숫자를 입력받기 위해서 좌/우로 슬라이드를 이용한 숫자 입력폼입니다. 다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 좌,우로 스와이프를 이용해서 원하는 숫자를 선택할수 있고, 주변을 클릭하는 경우 원하는 숫자값을 직접 입력하는게 가능합니다. 사용하기 위한 방법은 위 설명을 참고해서 이용하는게 가능합니다. 숫자의 범위를 지정하거나, 어떤 단위로 증차감이 될런지를 지정하고, 사용자가 어떤 숫자를 선택했는지에 대한 콜백을 받아서 처리하는게 가능하네요.

* Typography Motion Effect - 글자와 이미지를 버튼클릭시 애니메이션 효과를 적용하여 보여줄 수 있습니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하고 폴더와 파일확인후 적용할 웹루트 디렉터리에 업로드 합니다 적용할 html 문서에 제공된 css 및 js 를 호출합니다 텍스트 및 이미지에 대한 애니메이션 효과를 버튼으로 교차하여 보여줄수 있게 class 선언 및 보여줘야될 문자와 이미지 태그를 삽입합니다 첨부된 압축파일안에 샘플 파일이 있으며 dist/index.html 파일을 참조하여 사이트에 적용하시면 좋을것으로 생각됩니다

* Magnetic Buttons - 호버 애니메이션이있는 작은 마그네틱 버튼입니다 마우스 포인터를 따라가면서 호버 애니메이션 효과를 보여줍니다 * License - MIT LICENSE * 사용방법 첨부된 압축파일을 해제하여 폴더와 파일 확인후 이용할 웹루트 디렉터리에 업로드 합니다 적용할 문서에 아래와 같이 css와 js 를 선언합니다 각 태그 영역의 class 선언 및 button 을 출력하게끔 코드를 삽입하고 원형 호버 애니메이션 효과를 넣기 위한 태그를 삽입합니다 적용시 아래와 같은 효과를 얻을 수 있으며 첨부된 파일 dist/index.html 파일에서도 샘플코들르 확인하실 수 있습니다

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 sp.stickyHeader.js 파일, sp.stickyHeader.css 파일을 링크합니다. 2. 다음과 같이 헤더 요소를 만듭니다. 3. 헤더 요소에 플러그인을 연결합니다. 4. 헤더 요소를 고정하기 위해 페이지가 얼마나 아래오 스크롤되는지 결정합니다. (기본값:300) 5. 고정된 헤더 요소에 추가 CSS 클래스를 추가합니다. 6. 모바일 장치에서 고정 헤더를 비활성화할지 여부를 결정합니다. (기본값:true) - 작동 예제