동해둘리의 IT Study

jQuery 함수 중에서, Prepend() 함수는 특정 엘리먼트 바로 앞에 원하는 엘리먼트를 넣는 함수이다 $("button").click(function(){ $("p").prepend("Prepended text"); }); This is a paragraph. 예를 들어, 위와같이 코딩했을경우, 태그 바로 앞쪽에 Prepended text 가 삽입되게 됩니다. 온라인에서 바로 확인하려면 아래 링크를 클릭하시면 됩니다. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_prepend

IT공부방/jQuery, ajax, java 2016. 9. 14. 16:32

jQuery 플러그인 중에서, Audio / Video 재생시 사용할 수 있는 플러그인이 jPlayer 입니다 가장 큰 장점은 Internet Explorer 5 버전에서조차 실행할 수 있다는 것입니다. 아래 코드는 jPlayer 가 제공하는 샘플코드 중에서, 불필요한 부분은 제거하고, 가장 단순한 형태로 편집한 jPlayer 샘플입니다 playstopmutemax volume repeat Update RequiredTo play the media you will need to either update your browser to a recent version or update your Flash plugin. jPlayer 를 다운로드 받은후에 압축을 해제해보면, example 폴더나 dist 폴더 등..

IT공부방/jQuery, ajax, java 2016. 9. 12. 10:28

HTML5 또는 그 이하 HTML 에서 제공하는 태그/엘리먼트의 브라우저 버젼별 지원여부를 확인할 수 있는 사이트를 소개합니다. caniuse.com 이라는 사이트 입니다. 이 사이트에 접속하여 아래 Can I use 뒤에 있는 입력란에 태그를 넣으면 지원되는 브라우저 버전을 확인할 수 있습니다. 예를 들어, audio 태그를 입력한 후 확인해 보면, 아래와 같이 Internet explprer 6/7/8 버전에서는 지원되지 않는다는 것을 알 수 있습니다. 반면, textarea 태그의 경우 초창기부터 지원되던 태그이기 때문에Explorer 모든 버젼에서 지원되는 것을 확인할 수 있습니다.

IT공부방/개발환경,오픈소스 2016. 9. 11. 18:07

HTML5 에서 제공되는 Audio 태그의 함수및 속성값에 대해 알아보겠습니다 w3schools.com 에서 검색해보면 아래와 같이 속성이 몇개 없습니다 하지만 위 속성 이외에도 제어관련된 속성이 몇가지 더 있는데요, 다음과 같습니다. currentTime : 현재 재생중인 위치의 시간값defaultPlaybackRate : 기본 재생 속도playbackRate : 현재 재생 속도volume : 볼륨 사용할 수 있는 함수는 다음과 같다 load() : 지정된 소스를 로드한다(음악/영상)canPlayType() : 재생 가능한지 확인한다play() : 오디오/비디오를 재생한다pause() : 오디오/비디오를 멈춘다 이때, reload() 함수는 제공되지 않는데, Reload 를 하려면 해당 객체의 src ..

IT공부방/HTML5, CSS 2016. 9. 11. 17:54

Audio 엘리먼트의 play 후에, 재생이 종료되었을 때의 이벤트는 onended 이벤트 입니다. 코드내에서 직접 사용할 때에는 아래와 같이 사용하면 됩니다 이벤트 리스너를 이용하여 사용할 때에는 다음과 같이 사용하면 됩니다 function UserFunction(){alert("music ended");} var obTarget = document.getElementById("audio_id");obTarget .addEventListener("ended", function(){ UserFunction(); }); 저의 경우는 코드내에서 사용할때는 onended 이기 때문에 이벤트리스너를 이용할때도 아래와 같이 코딩하는 실수를 자주 범하는 편이라서, 여러분들은 혼동하지 마시기 바랍니다. obTarge..

IT공부방/HTML5, CSS 2016. 9. 9. 14:12

jQuery UI 에서 제공하는 resizable 함수를 이용하면 아래와 같이 쉽게 이미지 크기변경 코드를 작성할 수 있습니다. 이미지를 둘러싸는 DIV 를 만든후에 그 안에 image 를 100% 로 설정한 후 넣어주면 됩니다.DIV 주변(이미지주변)에 마우스가 위치하면 커서가 크기변경용 커서로 변경이 되며,클릭 후 드래그 하면, 이미지 크기를 변경할 수 있다.

IT공부방/jQuery, ajax, java 2016. 9. 8. 16:54

이미지를 퍼센트 %로 줄여서 보여주는게 아니라, jQuery 를 이용하여 이미지의 크기를 실제로 줄여버리는 코드참고 http://www.jqueryscript.net/demo/Dynamic-Image-Resizing-Plugin-with-jQuery/example/

IT공부방/jQuery, ajax, java 2016. 9. 8. 16:36

JavaScript 에서 문자열내의 특정 문자를 변환하고자 할 때, replace() 함수를 사용하게 되는데, javascript 의 replace() 함수는 문자열내에서 처음 발견되는 문자만 변환하게 됩니다. 1 2 3 4 5 var sOriginText = " 동해바다 서해바다 남해바다 "; var sConvertedText = sOriginText.replace("바다","산"); alert(sConvertedText ); cs 위 코드를 실행하게되면 결과값이 동해산 서해산 남해산 이렇게 나오는 것이 아니라 동해산 서해바다 남해바다 와 같이, 처음 발견되는 동해바다의 '바다' 만 '산' 으로 바꾸게 됩니다. 문자열 전체의 문자를 바꾸고 싶은경우 아래와 같이 코딩하면 가능합니다. 1 2 3 4 5 6..

IT공부방/jQuery, ajax, java 2016. 9. 8. 14:02

CSS 를 이용하여 폰트를 설정할 때에, 폰트명이 혼동되는 경우가 있는데요 예를 들어서 아래와 같은 폰트일 경우, 공백이 있는지 없는지 혼동될 때가 있습니다. font-family:Times New Roman; font-family:TimesNewRoman; 아래 링크를 클릭하여 확인해 보면, 웹상에서 바로 확인하여 코드를 복사해서 사용할 수 있습니다... http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-family

IT공부방/HTML5, CSS 2016. 9. 8. 12:45

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