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

다양한 프로그래밍 언어를 배울수 있는 사이트입니다. 이제 처음 시작하시는 분들이나 다른 언어를 배우면 좀 더 도움이 되겠다고 생각되시는 분들에게 좋은 사이트입니다. 자기가 배우길 원하는 카테고리를 클릭하면 아래와같이 파트별 목록이 나오며 시작하기를 눌러 시작할 수 있습니다. 시작하기를 누르면 동영상으로 강의를 확인할 수 있으며 하단에는 강의에대한 설명들이 있으며 강의에 대한 궁금증이 있다면 질문란에 질문을하여 답변도 받으실 수 있습니다. 새롭게 프로그래밍 언어를 시작하시는 분들께 추천해드립니다 ^^

웹페이지에 여러가지 유형의 그래프를 생성해내는 자바스크립트 플러그인입니다. 다운로드 받은 파일의 압축을 풀면 아래 그림과 같은 폴더 구조가 나옵니다. examples 폴더 안에는 위 그림과 같이 각 그래프를 위한 예제들이 있습니다. 각 예제폴더마다 html 문서가 하나씩 있고 그 문서를 웹브라우저로 열어서 보면 어떤 그래프인지는 아래 그림처럼 같이 확인이 됩니다. 그래프를 위한 데이터들은 정리해서 아래 그림 처럼 JSON 포맷으로 작성하면 되나 보네요. 데모는 http://mbostock.github.io/protovis/ex/ 여러가지 그래프형태를 볼수 있으며 하나씩 클릭해보면 http://mbostock.github.io/protovis/ex/bullet.html 어떤 그래프이며, 어떤 소스코드로 작..

게시판이나 블로그에 프로그램 소스코드를 포스팅 하는 경우 소스코드의 Tab 이나 공백을 그대로 옮겨주고 색깔도 입혀줍니다. http://daver.kr/tools/geshi/ 지원하는 프로그램 언어도 아주 다양합니다. 게시판이나 블로그 포스팅에서 소스코드를 이쁘게 올리고 싶으실 때 사용하시면 아주 유용할 것 같습니다.

설정이 제대로 분리 레이어 PSD 파일로 제공됩니다. 각 아이콘은 4 효과가 있습니다 (내부 및 외부 그림자, 그라디언트 오버레이 그림자) 내비게이션, 구름, 기술, 음악 플레이어 아이콘이 모두 포함되어 있으며 모두 개인 및 상업적 사용을위한 무료입니다. (원본 제공사이트 인용)

HTML5를 이용한 Music player (html5 를 이용한 음악 플레이어) Aplayer 는 MIT 라이센스를 지향 합니다. Aplayer 는 Html + JavaScript 로 구성 되어 있습니다. var ap = new APlayer({ element: document.getElementById('aplayer1'), music: { title: 'Preparation', author: 'Hans Zimmer/Richard Harvey', url: 'Preparation.mp3', } }); API를 제공하기 때문에 관련 기능 체크 및 사용법을 찾기가 편리하네요. APlayer 에서 제공하는 기능 중 많이들 쓰시는 기능은 거의 다 있네요. ap.play() // Resume play ap.pl..

4가지 형태의 슬라이딩되는 배경이미지 해당사이트에서 소스를 다운로드 받으실수 있습니다.

기본 사용 기능 어떤 사이즈의 이미지이든 리스트에 출력될때 보여지는 이미지의 중심점을 손쉽게 맞출수있습니다. 상세안내 화면의 왼쪽편에 있는 설정창을 이용하여 리스트에 출력되는 이미지의 중심점을 설정할 수 있습니다. mode를 outside로 변경할경우 출력사이즈에 맞게 꽉찬 이미지를 보여주고 inside일경우 세로사진은 세로길이에 맞게 가로사진은 가로길이에 맞게 여백이 포함되며 출력됩니다. Hor. align 을 수정할 경우에는 현재 보여지는 사이즈에서 가로기준으로 이미지의 중심을 어느쪽으로 할것이냐를 선택할 수 있고, vert. align 은 세로기준으로 중심의 위치를 설정할 수 있습니다. 설정된 내용은 바로 아래 결과코드로 확인할 수 있습니다. 설정하기 전 리스트 출력 Hor. align을 cente..

html 을 처음 다뤄보시거나 html 편집기를 이용해본적이 없으신분들은 가장 간단하게 이용하여 즉시 확인할 수 있는 웹편집기 html-online 을 추천해드립니다. 별도 에디터 없이 홈페이지만 접속해도 에디터를 위지윅으로 위지윅을 에디터로 볼 수 있는 화면을 확인할 수 있어, 어떤 방식으로 코딩이 진행되는지를 한눈에 확인할 수 있습니다. 위처럼 좌측 위지윅에디터와 우측 html 편집기로 호환되어 있으며, html 편집기를 이용하여 코드 작성시 에디터상에 즉시 반영이 되며, 에디터로 편집하여도 html 편집기에 즉시 반영됩니다. 위와같은 코드를 적용하면 위와같이 코드가 즉시 반영되어 어떤 내용을 입력하고 있는지를 바로 확인할 수 있습니다.^^

간략설명 Scrollocue는 키보드 키를 이용하여 세로로 긴 페이지의 컨텐츠들을 스크롤하여 확인하도록 해주는 jQuery 플러그인 입니다. 첨부파일내 파일구성 README.md index.html main.css normalize.css jquery-2.0.3.js scrollocue.js 지원되는 브라우저 Internet Explorer 9 이상 Crome FireFox Safari Opera 소스해석 index.html 1. 첨부파일내에 있는 CSS 파일 및 JS 파일들을 링크 걸어 줍니다. 2. 페이지내에 출력할 컨텐츠들을 , 과 같은 태그로 감싸줍니다. 3. 출력한 컨텐츠 전체를 1개의 DIV 태그로 묶어 준 뒤 ID 값을 지정합니다. 4. DIV 밖에서 아래와 같이 플러그인을 호출해 줍니다. ..

http://www.jeasyui.com/ 사이트 접속후 Demo 메뉴을 클릭하시면 아래와 같은 jqurey 소스를 종류별로 확인할 수 있습니다. 원하시는 jqurey 소스를 클릭하시면 1개의 소스에 파생되는 몇가지 다른형태의 모양을 가진 소스를 확인할 수 있으며, 선택된 소스별로 하단에 소스코드를 확인하실 수 있습니다. 위 내용을 토대로 원하는대로 디자인을 입혀 사이트에 반영 하시거나 고급자분들은 응용하실 수 있습니다.^^