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

입력폼을 이용해서 데이터를 입력받을수 있으며 추가 데이터를 입력받기 위해서 동적으로 테이블(입력폼)을 생성하고, 드래그앤드랍으로 순서를 조절할 수 있는 간단한 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어 보면 확인이 가능합니다. 우측의 +,- 와 끌어서 이동하는 아이콘을 이용해서 제어가 가능합니다. 사용하기 위한 방법은 1. jquery 와 필요한 라이브러리를 load 합니다. 2. 정렬순서를 조절하기 위해서 jquery ui 를 load 합니다. 3. 기본적인 HTML 태그의 구조는 아래와 같습니다. 4. 동적으로 테이블을 제어하기 위한 JS 코드를 추가합니다. 5. 테이블을 제어하기 위해서 줄수 있는 옵션들은 아래와 같습니다. 6...

SSG(Show Story Gallery)는 jQuery 와 CSS3로 만들었습니다. 여러개의 이미지를 갤러리 형태로 보여주고 클릭하면 스토리 갤러리 형태로 보여주는 플로그인 입니다. 사용법 안내 입니다. 1.CSS 와 jQuery 를 호출합니다. 2. 플로그인을 호출 합니다. 3. 컨텐츠를 작성 합니다. Also image caption don't include me into SSG 컨텐츠 내용 중 BigImage1.jpg 와 같은 이미지 파일명을 원하시는 이미지 파일로 교체하시면 됩니다. 첨부된 압축 파일을 해제하시면 index.html 파일이 존재하며 index.html 파일을 브라우저로 호출하시면 보다 깔끔한 상태의 데모를 확인할 수 있습니다. ^^ 라이센스는 GNU GPL-3.0 license ..

마우스 오버시 기사 본문글이 출력됩니다. 마우스 오버시 해당 영역을 보이게 처리하고 있습니다. 해당 사이트의 전체 소스를 확인할 수 있습니다.

마우스 오버시 더 많은 상품 정보를 볼 수 있습니다. 상세보기버튼을 클릭하면 여러장의 상품 사진을 슬라이드 형태로 볼 수 있습니다.

그라디언트 css를 이용하셔 다양한 underline 스타일을 만들어 볼 수 있습니다. 사이트에 가보시면 12종의 underline을 확인 하실 수 있으며 소스를 수정하여 다양하게 응용하여 사용하실 수 있습니다. 밑줄과 사용된 css는 아래와 같습니다. 1. Standard Rainbow 2. Energetic Rainbow 3. This One is Tapered! 4. This One Grows! 5. Double Underline 6. Rare Triple Underline 7. Graph Paper 8. Blue Weave 9. Shades of Green 10. Shades of Purple 11. Purple and Orange 12. Yellow to Orange

웹에서 멋진 프리젠테이션을 무료로 제작할 수 있는 기능을 제공하는 Reveal JS 입니다. https://revealjs.com/ 페이지에 접속하여 사용법을 확인 할 수 있습니다. 소스의 설치는 기본 설치와 전체 설치 두가지로 분리가 되어 있는데, 일부 기능을 이용하기 위해서는 전체 설치 방식으로 서버내에 소스가 설치 되어야 합니다. https://revealjs.com/installation/ 해당 Reveal JS 에서는 프리젠테이션을 위한 다양한 기능을 제공하고 있습니다. https://revealjs.com/ 페이지에서 확인을 할 수 있습니다.

* Intro.js 소개 - 사이트의 단계별,섹션별로 가이드가 가능하며 멘트나 이미지를 부각 시켜 수 있는 플러그인 * 라이센스 - GNU AGPLv3 * 사용방법 기본제공되는 css 를 상단에 선언합니다 아래와 같이 단계별 가이드를 하여 내용을 부각시키기 위한 버튼을 만들어 줍니다 스크립트로 시작하여 data-step 옵션과 같이 몇단계에서 보여줄지 지정할 수 있습니다 마지막으로 intro.js 의 호출 부분으로 구성은 마무리 됩니다 위와 같이 단계별 tooltip 기능을 보여줌으로써 사이트의 차트 플로우나 내용이 복잡한 부분에 있어서 쉽게 설명해 줄 수 있을것으로 생각됩니다

다양한 PNG 이미지를 제공해주는 사이트이며, 대부분 일러스트 관련 PNG 로 무료라이센스라고 기본적으론 명시되어있습니다. 작가가 별도로 기부한 형태의 이미지라서 라이센스가 무료라고 명시되어있는듯한데요. 하지만 이미지 출처에 대한 부분은 각각의 작가별로 혹은 이미지 별로 다르게 되어있을 확률이 있습니다. 이미지 다운받을시 사용범위 및 라이센스에 대해 한번더 확인후 다운받으시길 권장드립니다.

Icon Hover Effect 에서는 css를 이용한 9가지의 hover 효과를 확인할 수 있습니다. 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용하여 색상을 쉽게 변경하고 스타일을 주고 있습니다. 효과를 주는 기본 소스는 아래와 같습니다. 홈페이지에서 소스를 다운 받아 사용해보시거나 데모사이트에서 구현된 아이콘 hover효과를 확인하시고 참고 하실 수 있습니다.

사이트에 대한 텍스트와 이미지정보를 자세하게 알려주는 크롬 확장프로그램입니다. 설치를 하면 브라우저 상단에 peeper아이콘이 생깁니다. 이제 확인하고 싶은 사이트에 이동하여 아이콘을 누르면 아래와같이 별도의 창이 뜨고 사이트에 대한 기본정보가 먼저 노출이 됩니다. . 이제 확인하고 싶은 요소를 브라우저에서 클릭하면 별도의 창에서 폰트 및 이미지에 대한 정보가 노출이 됩니다. 크롬 뿐많이 아닌 웨일브라우저에서도 설치가 잘되니 참고하세요 ^^ ​​