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

첨부된 파일의 압축을 풀어서 demo.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 마우스를 올려보면 해당 부분이 확대되는 효과가 나타납니다. 출처는 http://www.htmldrive.net/items/show/51/Apple-like-Retina-Effect-With-jQuery 입니다.

웹페이지 내에서 에디터에 있는 코드정리기 처럼. 코드정리와 코드비교를 할수 있는 사이트입니다. 사이트에 접속을하게 되면 상단에 여러가지 옵션을 확인할 수 있습니다. Beaufity옵션이 기본적으로 선택이되며 찾아보기 버튼을 통하여 파일을 불러와 코드를 정리할 수 있씁니다. 찾아보기를 통하여 파일을 불러오면 좌측에는 원본코드 우측에는 정리된 코드를 확인하실 수 있으며 누락된 코드나 잘못된 코드 그리고 경고 메세지를 좌측읠 X버튼에 마우스를 올리면 도움말을 확인 하실 수 있습니다. `코드 정리말고도 파일비교등 다양한 옵션을 제공하고 있으며 마우스 스크롤을 하면 여러가지 설정을 확인하실 수 있습니다.

간단한 페이지를 스크롤효과로 시원하고 동적인 페이지로 보일수 있습니다. 스크롤을 내릴수록 색상이 변하며, 투명이미지에 색상이 채워집니다. 몇가지 아이콘으로 이런 멋진 페이지를 제작할 수 있습니다. 파일을 다운받으신후 이미지와 css, 스크립트를 참고하셔서 작업해보시기 바랍니다.

* ckeditor - Table Resize - 이 플러그인은 에디터에 테이블 태그 삽입시 셀 영역의 사이즈 조절을 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/tableresize - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'tableresize'; - 에디터에 테이블 태그를 삽입한 후 셀 영역을 리사이징 할 수 있습니다.

jquery를 이용해서 제작된 다양한 효과를 가진 슬라이드 입니다. 첨부파일을 다운로드 받아서 압축을 해제한후 examples/index.html examples/multiple.html examples/numbers.html examples/thumbs.html 위 파일들을 웹브라우저로 열어보면 슬라이드 효과를 확인할수 있습니다. 다양한 애니메이션 효과를 선택할수 있네요. 한페이지에 여러개의 슬라이드를 이용하는 예제입니다. 슬라이드의 네비게이션을 숫자를 쓰거나, 작은사진을 이용하는 예제입니다. 출처는 https://skitter-slider.net/ 입니다.

디자인시 이미지보다도 가장 고민되는것이 바로 색상. PPT하나 제작하려고만해도 도대제 어떤색이 잘 어울릴지 고민하게되죠. 그래서 도움될만한 사이트를 하나 소개합니다. https://color.adobe.com/ 어도비 컬러라는 사이트 입니다. 사이트 접속시 색상선택화면이 나타나게 됩니다. 내가 원하는 색상을 선택하면 이리저리 색상배합이 바뀌게 됩니다. 그리고 편리한 기능 중 하나는 내가사진을 등록하면 해당 사진을 기준으로 색상배합을 추천해준다는것. 하지만 위에것도 다 소용없어 !난 지정된 색상배합중 선택만 해서 쓰고싶다 !! 라고하시는분들으 상단 [탐색] 페이지를 이용하면 다양한 색상배합을 만날 수 있습니다. 편리한 색상배합 사이트 어도비 컬러 ! https://color.adobe.com/

네비게이션 버튼을 클릭하면 좌우측의 슬라이드가 점점 쌓입니다. 사이트에서 소스다운로드가 가능합니다. 익스 10이상 크롬에서 정상 작동합니다. 아래와 같은 기본 옵션을 조절이 가능합니다. // default transition speed speed : 700, // default transition easing easing : 'ease-in-out', // render both piles piles : true

이미지를 이용한 기본적인 반응형 슬라이드를 구현할 수 있지만 vimeo 나 wistia 에 등록된 동영상도 슬라이드로 구현이 가능하며 여러가지 디자인을 제공합니다. flexslider.woothemes.com 에서 샘플을 확인할 수 있으며 다운로드도 가능합니다.

* ckeditor - oEmbed - 이 플러그인은 각종 동영상, 이미지, 음악 등 미디어를 삽입하는데 도움을 줍니다. - 미디어가 포함된 단축 URL을 입력하면 미디어가 자동으로 삽입 됩니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/oembed - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'oembed'; - 툴바에 추가된 아이콘을 눌러 미디어가 포함된 URL을 입력합니다. - [예] 를 누르면 아래처럼 미디어가 삽..