동해둘리의 IT Study

Bootstrap Framework 는 Front-end 웹 개발을 빠르고 편하게 하기위한 프레임워크로서, 하나의 프레임워크를 사용하여 서로다른 기종에서도 동일한 인터페이스를 구현하기위해 사용됩니다. http://getbootstrap.com/ 특히, 반응형 웹개발시 활용도가 높다. 대표적이니 기능은 다음과 같다 . 1. CSS 기능 HTML 태그들에대한 다양한 스타일을 제공하고 있으며, 가로/세로 변환에 따른 뷰의 변화또한 가능하다. 2. 컴포넌트 기능 Bootstarp 에서 제공하는 디자인이나 컴포넌트에, 사용자가 내용을 넣어서 사용하는 방식 jQuery 와 유사한 방식이며, 네비게이션바, 버튼, 리스트 등의 기능을 쉽게 만들 수 있다. 3. 자바스크립트 기능 Bootstrap 의 각 요소가 사용자와..

IT공부방/HTML5, CSS 2016. 7. 31. 14:21

1. addClass() 함수 특정한 엘리먼트에 동적으로 class 속성을 부여하는 함수 This is a heading This is a paragraph.This is another paragraph. Add a class name to the first p element 웹상에서 바로 확인하기 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_addclass 2. appendTo() 함수 지정한 엘리먼트의 끝에 지정된 엘리먼트를 붙인다. $("Hello World!").appendTo("p"); 위 코드의 경우, 페이지내의 모든 P 엘리먼트의 끝에 Hello World! 이 코드를 붙인다. 웹상에서 바로 확인하기 http://www..

IT공부방/jQuery, ajax, java 2016. 7. 30. 18:42

자료출처 : http://meju1208.blog.me/220396333278 때로는 우리가 XE를 사용하거나, 그누보드, 워드프레스등을 사용하다보면 nobody 파일 이나 디렉터리를 볼수있습니다.이 nobody 는 슈퍼유져로도 잘 지워지지 않는데요 이럴땐 웹권한을 가진 데몬이 파일을 삭제하게 해주면 간단합니다. 우리가 사용하는 웹서버에 다음 스크립트를 작성해줍니다. 해당 파일을 웹서버의 삭제할 디렉터리가 보이는 디렉터리에 작성합니다. 예를 직어sh# pwd;ll/homr/user/public_html/xe/layoutdr-x-r-x-r-- nobody deleteme-r-x-r-x-r-- nobody please_delete.html 에서 두 파일 모두 삭제하고 싶다면현재 저 파일들이 보이는 디렉터리에..

IT공부방/HTML5, CSS 2016. 7. 29. 19:32

AngularJS 는 2009년 Miško Hevery과 Adam Abrons에 의해 개발된 MVC(또는 MVW – Model View Whatever) 웹 프레임워크로, SPA(Single Page Application) 형태의 웹 애플리케이션을 빠르게 개발할 수 있도록 도와줍니다. 자료출처 : http://d2.naver.com/helloworld/1172239 ※ Front End에서 jQuery를 사용하다보면 제일 성가신 부분이 동적으로 변하는 데이터 값들에 대한 DOM처리 부분이다. AngularJS를 사용하면 좀 낳아질까...? 자료출처 : http://cafe.naver.com/jjdev/2791[출

IT공부방/jQuery, ajax, java 2016. 7. 29. 12:18

jQuery 플러그인 중에서 파일업로드를 위한 플러그인입니다.아래 사이트에 예제와 소스코드등이 제공됩니다. http://blueimp.github.io/jQuery-File-Upload/basic.html 소스코드와 예제는 GitHub 에서 다운로드 받을 수 있습니다. 다운로드 받은 후에, 압축을 해제하고... 서버의 특정위치로 업로드를 합니다.이때, 소스코드 중에서 아래와 같은 부분이 있는데, // Change this to the location of your server-side upload handler: var url = window.location.hostname === 'blueimp.github.io' ? '//jquery-file-upload.appspot.com/' : 'server/p..

IT공부방/jQuery, ajax, java 2016. 7. 28. 18:49

contentWindow property는 frame 이나 iframe 에 의해 생성된 Window 객체를 말한다 이를 통하여 생성된 frame 에 접근하고, 해당 윈도우에 포함된 document 에 접근가능하며, 또한, document 내의 각 element 에도 접근할 수 있다. [출처] Frame/IFrame contentWindow Property / frame 접근방법 - contentWindow|작성자 용남짱 a페이지 내에 ifrmae 이 있고, 그 iframe 에 b.html 페이지가 로드된 경우, 아래와 같이 접근이 가능하다. document.getElementById('iframe_id').contentWindow.document .getElementById("element_id") 또는..

IT공부방/HTML5, CSS 2016. 7. 28. 09:53

어도비(Adobe) 사에서 폰갭을 인수한 이후 몇가지 변화가 있었는데, 개발자를 좀 더 편하게 해주기 위한 배려가 보인다. 우선 www.phonegap.com 에 접속을 하면 아래와 같은 사이트가 보이게된다. 폰갭을 이용한 하이브리드앱 개발은, 크게 아래의 3가지 툴로 나누어 볼 수 있다. 우선, Desktop 환경에서 폰갭용 어플리케이션을 개발할때 사용하는 PhoneGap Desktop App 가 있다. 다운로드 한 이후에 설치하고, 실행시키면 아래와 같은 프로그램이 모습을 보인다.메뉴구성은 너무 단순하며, +/- 버튼을 클릭하여 폰갭프로젝트 를 추가하거나 삭제할 수 있도록 되어있다. 아래의 예제용 폰캡프로젝트를 다운로드 한 후에 + 버튼을 이용하여 폰갭 데스크탑에서 열고,> 버튼을 이용하여 실행시키면..

IT공부방/하이브리드앱 2016. 7. 26. 19:39

웹페이지 내의 각 엘리먼트에 움직임을 줄 수 있는 jQuery plugin 을 소개합니다. 위 사이트에서 보듯이 GSGD 에서 개발하여 오픈소스로 제공하며, CDN 도 제공하고 있습니다. 아래 코드가 기능데모 코드입니다. 그대로 복사해서 테스트 해보셔도 되고, 첨부파일 다운로드 받아서 example 폴더에 있는 example.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 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 6..

IT공부방/jQuery, ajax, java 2016. 7. 26. 12:46

불펌방지 등을 이유로 하여, 마우스 오른쪽 클릭을 방지하기 위한 코드 본 포스팅은 다음 포스트를 참고 했음 http://blog.naver.com/ez4ez/45934195 mouseban.js 파일 아래의 captureEvents() 에 적용할 수 있는 EVENT 리스트는 다음과 같다. document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP); Event.ABORTEvent.BLUREvent.CHANGEEvent.CLICKEvent.DBCLICKEvent.DRAGDROPEvent.ERROREvent.FOCUSEvent.KEYDOWNEvent.KEYPRESSEvent.KEYUPEvent.LOADEvent.MOUSEDOWNEvent.MOUSEMOVEEvent.MOU..

IT공부방/HTML5, CSS 2016. 7. 25. 15:39

1. addEventListener 함수 선택된 엘리먼트에 이벤트리스너 를 부착한다. 아래 코드의 경우 click 이벤트가 발생하기를 기다리다가 , 해당 이벤트 발생시 해당함수 실행한다. 1 element.addEventListener("click", function(){ alert("Hello World!"); }); cs 위 코드는 외부 함수로 설정해서 코딩할 수 도 있다. 1 2 3 4 5 element.addEventListener("click", myFunction); function myFunction() { alert ("Hello World!"); } Colored by Color Scripter cs 또한, 여라가지 이벤트에 대한 리스너 설정도 가능하다 1 2 3 4 5 element.a..

IT공부방/HTML5, CSS 2016. 7. 25. 15:33

1. resize 함수 브라우저의 윈도우 크기가 변할때 마다 호출되는 함수 $(window).resize(function(){ $('span').text(x += 1); }); 아래에, 테스트 URL 이 있음 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_resize 보통, 페이지가 로드될때 onload 함수가 먼저 실행되므로, onload 함수에서 원하는 페이지 크기를 설정하고 resize 함수에도 같은 페이지 크기를 설정해 놓으면, 로드되는 순간부터 윈도우 크기가 변하는 모든 순간에도, 원하는 페이지 크기가 유지되게 된다. 아래 코드는, 로드되는 페이지가 화면에 꽉차가 할때 사용되는 코드이다. 이때, CSS 에서 marign 과..

IT공부방/jQuery, ajax, java 2016. 7. 25. 14:59

동적으로 HTML 의 DOM 엘리먼트를 생성하고 조절하는 함수이다. 예를 들면 다음과 같은 함수들이다.. 1. createElement, appendChild, createTextNode 함수 동적으로 HTML DOM 엘리먼트를 생성하는 함수 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Colored by Color Scripter cs HTML DOM 엘리먼트와 연관된 함수 리스트는 다음과 같다. Property / Method Description document.activeElement Returns the currently focused element in the document document.addEventListener() Attaches an event handler t..

IT공부방/HTML5, CSS 2016. 7. 25. 10:48

http://www.jplayer.org/ jPlayer 는 JavaScript 로 작성된 무료오픈소스(MIT License) 이다. jPlayer는 아주 쉽고 빠르게 웹페이지내에 Audio 와Video 를 넣을 수 있으며, Cross Platform 을 지원한다. 아래 링크를 통해 바로 확인해 볼 수 있다. http://jsfiddle.net/jPlayer/XLNCY/ 몇가지 특징적인 것은 다음과 같다. 1. 배우기 쉬우며, 쉽게 배치할 수 있다2. 자신의 취향에 맞게 커스터마이징 가능하며, HTML과 CSS 를 이용하여 스킨변경이 가능하다.3. 14KB 밖에 안되기 때문에 가볍다4. 무료이자 오픈소스이며 라이센스 제한이 없다5. 활동적이고 커가는 커뮤니티가 도움을 제공한다.6. 유명한 Platform..

IT공부방/jQuery, ajax, java 2016. 7. 23. 10:51

1. preventDefault 함수 해당 엘리먼트에 발생한 이벤트로 인해 동작하는 URL 오픈을 중지시킨다. $("a").click(function(e){ e.preventDefault(); this.GoToProcess() }); 위의경우, a 엘리먼트가 Click 된 경우 a 태그로 인해 링크하게될 URL 을 열지 않도록 처리하는 기능을 한다. 그 대신에, 특정 동작을 진행하고자 할때 preventDefault() 사용한 후,그 뒤에 하고자하는 동작을 코딩하면 된다. 2. bind 함수 해당 엘리먼트에 이벤트 핸들러 기능을 부여한다. $("p").bind("click", function(){ alert("The paragraph was clicked."); }); 위의 경우, p 엘리먼트에 clic..

IT공부방/jQuery, ajax, java 2016. 7. 22. 18:58

1. offset 함수 jQuery 의 offset 함수는 대상이 시작되는 x좌표와 y좌표 값을 리턴한다. 2. width 함수 대상 엘리먼트의 폭을 반환한다. $("button").click(function(){ alert($("div").width()); }); 3. mouseenter 함수 / mouseleave 함수 마우스포인터가 해당 객체위로 올라왔을 경우에 호출된다. 바로 확인하려면 아래 링크 클릭!!!http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave 4. click 함수 해당객체에 마우스클릭이 일어났을 때 호출된다. 바로 확인하려면 아래링크 클릭!!!http://www.w3school..

IT공부방/jQuery, ajax, java 2016. 7. 22. 17:51

1. word-break 출처 : http://itrooms.tistory.com/190 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 keep-all : 단어 단위로 줄넘김을 해준다.break-all : 한 글자 단위로 줄넘김을 해준다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 2. float , clear 속성 출처 : http://mainia.tistory.com/3119 float 을 이용하여 배치를 할때, 컨테이너 안에 float 이 적용된 태그가 있을 경우, 그 태그의 높이값이 반영이 안되기 때문에, 다음에 오는 태그가 컨테이..

IT공부방/HTML5, CSS 2016. 7. 21. 17:40