동해둘리의 IT Study

Greensock API 는 Javascript Library 중 하나로서, 웹상에서 애니메이션을 쉽게 구현할 수 있는 라이브러리 입니다. 이 라이브러리를 사용하여 시간에 따라애니메이션을 적용하는 것은 기본 기능이지만, 각각의 애니메이션에 효과음과 같은 소리를 부여하는 것은,API 가 기본적으로 제공하지 않기때문에, callback 함수를 이용하여, 별도의 Audio 라이브러리를 호출해 주는 방식으로처리가 가능합니다. HTML 파일 CSS 파일 #box { position:relative; background:red; width:200px; height:200px;} JS파일 var matrix = $("#matrix")[0];var tl = new TimelineLite();tl.to("#box", 1..

IT공부방/웹애니메이션 2016. 9. 7. 17:35

크롬환경에서 개발을 진행할 경우, 이미지나 mp3 파일등을 업데이트 했는데도과거의 이미지와 mp3 가 계속 보여지거나 Play 되는 경우가 있습니다. 위와 같이 개발자도구 화면의 Network 탭을 확인해보면 status 가 200 으로 표시되야 하는데, 그렇지 않다면 캐시된 정보를 불러온다는 뜻입니다. 이럴경우 F5 키를 누르거나 Ctrl + F5 키를 누르면 대부분 해결이 되지만, 유독, mp3 의 경우에는 잘 안되는 경우가 있습니다. 아마도, 용량이 크다보니까 그런듯 합니다만..... 이럴경우, 고육지책으로 선택한 방법은 의미없는 인자값을 붙여주는 겁니다. http://www.domain.co.kr/test.mp3 파일이 있다고 가정할때.... test.mp3 파일의 내용을 새로운 내용으로 변경해서..

IT공부방/개발환경,오픈소스 2016. 9. 7. 12:21

jQuery 파일압축/풀기 플러그인 JSZip jQuery 를 이용하여 파일을 압축하거나, 압축파일을 열거나 할때 유용하게 사용할 수 있는 플러그인 입니다. 자료는 아래 링크에서 다운로드 받을 수 있습니다. https://stuk.github.io/jszip/ 저의 경우는 zip 파일을 다운로드 받은후에, dist 폴더에 있는 jszip.js 또는 jszip.min.js 를 include 하여 사용했습니다. 기본적인 예제는 위 사이트에서 제공하는 것을 활용하시면 될듯 하구요..... 저의 경우는 서버에 있는 여러개의 파일을 Array 로 세팅한 후에, Zip 파일로 다운로드 하는 것을 구현해 봤습니다. zip파일 다운로드 GetZipFileBtn 을 클릭하면 DownloadZipFile() 함수를 호출하..

IT공부방/jQuery, ajax, java 2016. 8. 31. 15:49

blueimp jQuery Fileupload Plugin 사용시, 파일명이 중복될때 덮어씌우기 https://github.com/blueimp/jQuery-File-Upload 에서 구할 수 있는 jQuery blueimp Fileupload Plugin 을 사용하면, 파일업로드를 아주 쉽게 구현할 수 있습니다. 기본적으로 설치하여 사용하는 방법은 얼마전에 올린 아래 포스팅을 참고하시기 바랍니다.http://doolyit.tistory.com/38 이번 포스팅에서 확인할 부분은, 업로드하는 파일명이 중복되는 경우에 대한 처리입니다. 플러그인 설치후에 upload handler 가 설치되어 있는 server 폴더를 보면 UploadHandler.php 가 있는데요 (PHP 의 경우)그 파일을 보면 아래와..

IT공부방/jQuery, ajax, java 2016. 8. 30. 19:44

jQuery FileUpload Plugin 파일업로드시 업로드 위치 동적변경하기 https://github.com/blueimp/jQuery-File-Upload 에서 구할 수 있는 jQuery blueimp Fileupload Plugin 을 사용하면, 파일업로드를 아주 쉽게 구현할 수 있습니다. 기본적으로 설치하여 사용하는 방법은 얼마전에 올린 아래 포스팅을 참고하시기 바랍니다.http://doolyit.tistory.com/38 오늘 포스팅의 주제는, 파일업로드를 할때... 동적으로 파일업로드되는 위치를 변경하는 방법입니다.예를 들자면, 로그인한 사용자에 따라서 별도로 업로드 폴더를 생성해야 하는 경우 사용할 수 있겠죠.... jQuery File Upload Plugin 을 사용하는 경우, Up..

IT공부방/jQuery, ajax, java 2016. 8. 30. 16:47

Javascript 와 CSS 를 이용하여 만든 PopUp 창 띄우는 에제입니다. Javascript 와 CSS 를 이용하여 PopUp창을 띄우는 예제입니다 팝업내에 표시되는 내용입니다 본 포스팅은 아래 포스팅을 참고했습니다. http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

IT공부방/jQuery, ajax, java 2016. 8. 25. 16:07

1. 슬라이더 객체 input type = range 사용하기 HTML5 에서 제공하는 range 객체를 이용하려면 아래와 같이 사용하면 됩니다. 이때, onchange() 이벤트를 이용하면 슬라이더 객체의 값을 확인할 수 있죠 하지만, 슬라이더가 멈추었을 때에만 값을 확인할 수가 있기 때문에, 이를 실시간으로 표시하려면 아래와 같이 사용하면 된다. 0 * 덧붙임 * 0 즉, oninput event 를 이용하면 바로 적용이 가능하다. 다만, oninput event 는 chrome 에서는 동작하지만, firefox, iexplorer 에서는 동작하지 않는다.

IT공부방/HTML5, CSS 2016. 8. 24. 17:39

JavaScript 에서 소숫점 이하자리까지 계산하는 경우, 오류가 생기는 경우가 있습니다. 아래와 같은 경우 인데요 1 2 3 4 5 6 7 8 9 var fVal_1 = "0.6"; var fVal_2 = "0.3"; var fResult = parseFloat(fVal_1) + parseFloat(fVal_2); alert(fResult); // 0.899999999999 로 표시됨 cs 위의 경우 fResult 값은 0.9 가 정답이지만, 0.8999999999999 로 표시되는 것이다. 이때, 아래와 같이 toFixed() 함수를 이용해주면 됩니다. 1 2 3 4 5 6 fResult = fResult.toFixed(2); alert(fResult); // 0.90 으로 표시됨 Colored b..

IT공부방/jQuery, ajax, java 2016. 8. 23. 12:44

1. createElement() HTML DOM Element 를 동적으로 생성하기위해 사용하는 함수입니다. This is a paragraph. This is another paragraph. var para = document.createElement("p"); var node = document.createTextNode("This is new."); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); 2. removeChild() HTML DOM Element 를 동적으로 삭제하기 위해 사용하는 함수입니다. This is a paragraph. This is another ..

IT공부방/HTML5, CSS 2016. 8. 19. 16:30

* ajax 로 폼데이터 서버전송 후 파일생성 및 DB저장, serialize() ajax 로 폼데이터를 전송한 후 DB에 저장하는 방법은 serialize() 를 이용하여 많이 사용하는데요, 저는, 해당 데이터를 서버로 전송하여 파일로 생성하는 코드를 만들어 보았습니다. ajax_save.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 $.ajax({ type : "POST" , async : true , url : "save_todb.php", dataType : "html" , timeout : 30000 , cache : false , data : $("#sav..

IT공부방/jQuery, ajax, java 2016. 8. 9. 11:32

향후, 참고를 위해 좋은 자료가 있는 포스팅을 기록으로 남김니다. 자료출처 : http://cafe.naver.com/jjdev/1714 [step1] mysql database:ksmart member table [step2] nodejs server 코드 // mysql dbms연결var mysql = require('mysql');var client = mysql.createConnection({ user:'root', password:'java1234', database:'ksmart'});var http = require('http');var express = require('express');var app = express();app.use(express.static('public'));app..

IT공부방/jQuery, ajax, java 2016. 8. 5. 17:28

1. CSS 의 z-Index This is a heading 위와 같이 코딩되어 있을경우, 태그의 내용이 태그 위에 올라가 보이게 된다. 왜냐하면 img 태그의 z-index CSS속성을 -1 로 세팅했기 때문이다. 2. Javascript 의 z-index document.getElementById("img1").style.zIndex = "1"; zIndex 는 위와같이 DOM 엘리먼트의 속성이다. CSS 와는 다소 다르다. 아래 링크 참조 http://www.w3schools.com/jsref/prop_style_zindex.asp

IT공부방/HTML5, CSS 2016. 8. 2. 12:15

jQuery UI 가 제공하는 상호작용(Interaction) 기능은 다음과 같다. draggable / droppable / resizable / selectable / sortable 그 중에서 이번 포스팅에서 살펴볼 기능은 Draggable 입니다. 아래 코드와 같이 $( "#draggable" ).draggable(); 이렇게만 넣어주면 바로 drag 가 가능한 상태가 됩니다. jQuery UI Draggable - Default functionality #draggable { width: 150px; height: 150px; padding: 0.5em; } $( function() { $( "#draggable" ).draggable(); } ); Drag me around

IT공부방/jQuery, ajax, java 2016. 8. 2. 11:37

1. Bootstrap components Bootstrap (부트스트랩)에서 제공하는 기능을 이용하여 Button 을 사용하는 경우, 아래와 같이 사용하게 된다. 1 cs 이때, 버튼에 추가적인 기능을 넣을 수 있는데 대표적인 것이 GlyphsIcon (상형아이콘) 이다 다음과 같이 다양한 아이콘이 제공되는데, 이것을 버튼에도 넣을 수 있다. 아래와 같이 사용하면 된다. 1 2 3 4 5 6 7 Star Colored by Color Scripter cs 버튼의 크기는 다음과 같이 조절할 수 있다 1 2 3 4 5 Large Default Medium Small XSmall cs

IT공부방/HTML5, CSS 2016. 8. 2. 10:49

1. IFrame Object IFrame Object 는 HTML 의 엘리먼트를 나타내는 것이다. 아래와 같이 getElementById() 함수를 이용하여 접근할 수 있다. var x = document.getElementById("myFrame"); 아래와 같이 생성하여 특정 DIV 에 넣을 수도 있다. var x = document.createElement("IFRAME"); 2. IFrame 속성 contentDocument : IFrame 에 의해 생성된 document 객체이다. contentWindow : IFrame 에 의해 생성된 window 객체이다 기타 속성과 예제는 다음 링크를 참고하면 된다. http://www.w3schools.com/jsref/dom_obj_frame.asp ..

IT공부방/HTML5, CSS 2016. 8. 2. 10:15

1. draggable 속성 drag & drop 을 가능하게 하려면, 해당 엘리먼트에 draggable 속성을 주어야한다. 2. ondragstart 이벤트 drag 가 시작될 경우에 발생하는 이벤트로서, 보통 drag 되는 엘리먼트의 id 값을 전달하는 함수를 실행하게된다. function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); // text 라는 임의의 변수에 drag 되는 엘리먼트의 id 값을 세팅한다. } 3. ondrop 이벤트 drop 이 실행됐을 때 발생하는 이벤트가 ondrop 이벤트이다.보통, drag 에서 전달한 drag가 일어난 엘리먼트의 아이디를 받는 함수를 호출하게 된다. function drop(ev) { ev.p..

IT공부방/HTML5, CSS 2016. 8. 1. 11:14