동해둘리의 IT Study

jQuery 함수 사용방법을 알아보기 전에, jQuery 에 대하여 간략하게 정리해보면 다음과 같다. 1. 개요 1) JavaScript 라이브러리 이다 2) JavaScript 로 만들어놓은 기능(코드)의 집합이다 3) 여전히 문법은 JavaScript 기반이다 4) jQuery = CSS 의 선택자 (태그, 아이디, 클래스 등등) + JavaScript 기능 + 확장기능 2. 사용방법 1) jQuery 기능이 들어있는 코드파일이 필요하다 2) http://www.jquery.com 에서 다운로드 받거나 링크하여 사용한다. 3 jQuery 함수 1) 모든 jQuery 구문은 항상 jQuery 함수로 부터 시작된다. jQuery("#div").css("background-color", "red"); 위 ..

IT공부방/jQuery, ajax, java 2016. 7. 21. 16:58

CSS 의 transform 은 객체의 모양을 변형/이동/회전 등을 할 수 있는 속성으로서,javascript 를 이용하지 않고도 CSS 만으로 개체의 변형/이동/회전을 구현할 수 있다. 다만, 표준이 아니기 때문에 호환성을 위해서는 밴더프리픽스 (webkit, moz, ms ) 를 붙여주어각각 정의를 해주어야 다른 브라우저에서도 동작하게 된다. 프리픽스별 벤더구분은 아래와 같다. -webkit-transform // 크롬, 사파리-moz-transform // 파이어폭스-ms-transform // 익스플로러-o-transform // 오페라 위치이동의 경우 아래와 같이 정의하면 된다. -webkit-transform : translate(50px,50px); -moz-transform : transl..

IT공부방/HTML5, CSS 2016. 7. 21. 13:09

태그끼리의 위치는 inline 과 block, none, inline-block 등의 4가지로 분류할 수 있는데,DIV 태그같은 경우는 block 의 특성을 ,SPAN 태그같은 경우는 inline 의 특성을 가지게 된다. CSS 의 display 속성은 이러한 원래의 특성을 변경할 때 사용된다. 아래 포스팅에 상세히 설명되어 있다.http://mainia.tistory.com/3295 또한, display 속성은 위 4가지 이외에도 많은데.... 아래와 같이 16가지나 된다. 출처 : http://dev.epiloum.net/834 inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header..

IT공부방/HTML5, CSS 2016. 7. 21. 12:35

z-index 가 높을수록 위에 표시된다. 1. position과 z-index를 사용하지 않았을때[출처] z-index의 사용법|작성자 nsoft21 1번 2번 3번 2. position만 썼을때 [출처] z-index의 사용법|작성자 nsoft21 1번 2번 3번 3. position과 z-index 모두 썼을때 1번 2번 3번 [출처] z-index의 사용법|작성자 nsoft21[출처] z-index의 사용법|작성자 nsoft21[출처] z-index의 사용법|작성자 nsoft21 출처 : 아래포스팅 참고http://blog.naver.com/nsoft21/220241886190

IT공부방/HTML5, CSS 2016. 7. 21. 12:18

AJAX를 사용해 콘텐츠를 불러올 경우 지연시간이나 페이지 에러등을 사용자가 인지하기 어렵다. 또한 AJAX가 진행중인지 아닌지를 구분하는 것 역시 아무런 인터페이스가 없을 경우 사용성을 크게 해칠 수 있을 것이다. 만약 페이지 로딩이라도 길어진다면 아무런 반응없는 웹사이트를 보고 에러라고 생각한 뒤 이탈하려는 유저가 많아질 수 밖에 없을 것이기 때문이다. 이런 이유로 로딩중이라는 효과를 가시적으로 나타나기 위해 아이콘 및 이미지 또는 텍스트 문구를 사용할 수 있다. 아래에서는 텍스트를 사용했으나 실제로 계속해서 돌아가는 아이콘등 역시 매우 자주 사용된다. 로딩 중 문구를 출력하는 코드 구현하기 아래 코드는 현재 3개의 콘텐츠 내용을 담고있다. 방문자가 더보기 버튼을 클릭할 경우 숨겨진 로딩중이란 문구가..

IT공부방/jQuery, ajax, java 2016. 7. 21. 11:22

ajax 는 Asynchronous Javascript and Xml 의 약자인데, 비동기식 자바스크립트와 XML 이라고 보면된다 javascript 의 XMLHttpRequest 를 이용하여 직접 구현하여도 되지만, jQuery 를 이용하는 것이 훨씬 더 간단하게 구현할 수 있다. 가장 큰 특징은 현재 페이지에서 페이지의 이동/전환없이, 특정 이벤트를 통해 서버와 http 통신을 할 수 있다는 것이며, 이를 통해 현재 페이지의 일부분을 업데이트 할 수 있다는 것이다. function ajaxAct() { $.ajax ({ type : "GET", // GET 또는 POST url : 'updatetest.htm', // 서버측에서 가져올 페이지 data : 'a=1&b=2&c=3', // 서버측에 전달..

IT공부방/jQuery, ajax, java 2016. 7. 21. 11:19

overflow 속성은 설정된 DIV 의 영역을, 내용물이 많아서 빠져나오는 경우 옵션값이다. - 1. visible 은 기본값이며, 빠져나온채로 그냥 보여준다- 2. hidden 은 빠져나온 걸 감춘다- 3. scroll 은 빠져나올 경우 무조건 스크롤바가 생기게 한다. - 4. auto 는 빠져나오는 경우에만 스크롤바가 생기게 한다. 1. overflow:visible 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리 나라 만세 남산위에 저소나무 철갑을 두른듯 바람서리 불변함은 우리 기상 일세 가을하늘 공활한데 높고구름 없이 밝은달은 우리가슴 일편 단심 일세 이기상과 이맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑 하세 2. overflow:hidden 동해물과 백두산이 마르고 닳도록 하느님..

IT공부방/HTML5, CSS 2016. 7. 20. 12:40

CSS 코드를 보면, 아스테리크 * , 또는 마침표 . 와 # 등의 특수기호가 보이는데각각이 CSS가 적용될 대상을 지정하는 선택자이다 보통 선택자는 아래와 같이, 선택자 이름과 선언구간 두가지로 분류된다. 선택자 선언구간 body {font-size:10px; color:red; text-align:center} 선택자는 여러가지 방식으로 지정할 수 있는데 다음과 같다. 1. 태그선택자 : 특정한 태그에 CSS 를 적용할 때 사용한다. h2 { color : blue; text-align : left; } 동해둘리의 IT Story 2. 클래스 선택자 : 클래스하나를 정의한 후에, 원하는 어떤 태그에도 적용할 수 있다. 선택자 선언구간 .DefaultFont {font-size:10px; color:r..

IT공부방/HTML5, CSS 2016. 7. 20. 11:42

웹사이트 개발을 할때, 수정한 내용이 바로 적용되지 않고 캐시된 내용이 불려오는 경우가 있다. 이러할 때, 변경된 부분을 새로 불러오기위한 방법을 정리한다. 아래와 같이, 크롬의 개발자도구의 Network 탭을 살펴보면, 특정 페이지 로드시에 Status 가 304 로 나타나는 항목들이 있는데, 이것들은 캐시된 정보를 읽어온다는 뜻이다. 이럴때, 간단하게 새로고침 할 수 있는 방법은 F5 키를 누르는 것이다. 하지만, F5 키를 눌렀음에도 모든 항목이 새로고침 되는것은 아니다. 되기도 하고 안되기도 한다. 예를 들면, 페이지에서 불러오는 라이브러리 같은 것들은 F5키를 눌러도 여전히 304로 남아있기도 한다. 이럴때, 쉽게 처리하는 방법은 Ctrl + F5 키를 누르면 된다. Ctrl + F5 를 사용했..

IT공부방/개발환경,오픈소스 2016. 7. 19. 17:16

웹사이트 개발시에, 모바일 환경을 디버깅 하기위한 방법중에서, 모바일폰을 USB 로 PC와 연결하여 디버깅 하는 방법을 정리해 보고자 한다. 크롬의 확장프로그램을 이용하면 USB 디버깅이 가능하다. 1. 모바일 기기 세팅 설정 > 개발자 옵션으로 들어간다. USB 디버깅을 활성화 시킨다. 2. 모바일 기기의 USB 드라이버를 설치한다. 3. 크롬 (Chrome) 의 확장프로그램에서 ADB Pluging 을 설치한다. 메뉴 > 도구 더 보기 > 확장 프로그램 > 더 많은 확장프로그램 다운로드 adb plugin 으로 검색후, Chrome 에 추가 chrome://inspect/#devices 로 접속했하여 연결된 디바이스를 확인한다. 아래와 같이 연결이 잘 안되는 경우에는 adb 가 설치된 폴더에 가서 다..

IT공부방/개발환경,오픈소스 2016. 7. 19. 17:03

웹사이트 개발시, PC환경에서 접속을 했는지 모바일에서 접속을 했는지 확인하기 위한 javascript 코드 입니다. navigator 객체의 platform 속성을 이용하여 확인을 하게 됩니다.아래 링크는 navigator 객체의 Platform 속성에 대한 정의입니다. http://www.w3schools.com/jsref/prop_nav_platform.asp 정의에 의하면, platform 속성에 가능한 값은 아래와 같습니다. Win16 : 16비트 윈도위기반 컴퓨터Win32 : 32비트 윈도위기반 컴퓨터Win64 : 64비트 윈도위기반 컴퓨터MacIntel : 인텔CPU 를 가진 매킨토시 컴퓨터Mac : 매킨토시컴퓨터이상, 5가지 정도의 값이 PC접속시 발생가능한 속성이며 기타 속성은 무시하거나..

IT공부방/jQuery, ajax, java 2016. 7. 19. 14:55

www.w3schools.com 에 접속을 하면, 아래와 같이 웹사이트 개발과 관련된 여러가지 언어를 배울 수가 있는데, HTML 과 CSS 부터 시작하여, Javascript/jQuery/JSON 은 물론이고 PHP와 ASP 까지도 배울 수 가 있다. 특이한 접은 웹상에서 바로 테스트 할 수 있게 제공한다는 것인데, 예를 들어 PHP 를 배우기 위하여 Apache 서버나 PHP, MySQl 등을 설치하지 않고서도, 웹상에서 코드를 테스트 할 수 있다는 말이다. 두개의 윈도우로 구분되어, 좌측에서는 코드를 입력하고, 그 결과를 우측에서 바로 확인할 수 있다. 아래 링크를 클릭하면 Navigator 객체의 다양한 속성을 확인해 볼 수 있다. http://www.w3schools.com/jsref/tryit..

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

jQuery 1.2.6 코드를 살펴보면, 아래와 같은 부분이 있다. jQuery.fn = jQuery.prototype = { init: function( selector, context ) { // Make sure that a selection was provided selector = selector || document; .......... }, }; 이 코드에 나와있는 prototype 과 fn 이, jQuery 에서 하는 역할을 살펴보고자 한다. 모든 object 는 prototype 이라는 속성을 가지고 있다.이것은 단순히 다른 오브젝트들이 상속받을 수 있는 속성이라고 보면 된다. function Person(name) { this.name = name; } Person.prototype.s..

IT공부방/jQuery, ajax, java 2016. 7. 19. 13:41

최근 오픈소스가 여러 분야에서 관심을 받고 있고, 많은 개발자들이 이를 활용하여 개발기간을 단축시키는 동시에 안정성까지 확보하고 있다. 예전에는, 그누보드, 제로보드 등의 게시판 수준의 오픈소스가 있었지만, 이제는 콘텐츠 관리시스템(CMS) 수준으로 발전되어 전문적인 지식이 없는 사람들도 손쉽게 웹사이트를 개발할 정도까지 되었다. 대표적인 오픈소스 형태의 CMS 로는 XE(Xpress Engine) , 워드프레스(WordPress) , 드루팔(Drupal), 줌라(Joomla)등이 있는데, 그 중에서 Durpal 이 주목받고 있는데, 다른 CMS 에 비하여 개발자에게 최적화된 기능들이 많기 때문이다. 워드프레스는 디자이너/일반인들을 위하여 제작된 CMS 이기 때문에, 설치나 사용이 쉬우며 무수히 많은 유..

IT공부방/개발환경,오픈소스 2016. 7. 17. 16:36

버추얼박스 ( VirtualBox )는 자신의 PC에서 사용하고 있는 운영체제 이외에 별도의 OS를 구동할 수 있도록, 가상의 머신 (즉, Virtual Machine)을 만들 수 있게 해주는 소프트웨어 이다. 다운로드 및 설치방법은 아래 포스트를 참고하면 된다.http://blog.kinesis.kr/107 한대의 PC에서 다수의 운영체제를 실행하기 위한, 논리적 플랫폼으로서, 컴퓨터에 가상화를 구현하려면 버추얼머신모니터(VMM)라는 소프트웨어를 설치해야 하는데, 이 소프트웨어를 하이퍼바이저(Hypervisor) 라고 한다. ( 참고 : http://blog.naver.com/brickbot/220413523885 ) 이러한 하이퍼바이저 중의 하나가 버추얼박스(VirtualBox), VMWare 등인데..

IT공부방/개발환경,오픈소스 2016. 7. 17. 16:00

네이버에서 제공하는 나눔고딕 폰트를 웹에서 사용하기 위한 코드입니다.HTML 문서의 윗부분에 아래 코드를 넣어주면 됩니다. 간혹, 폰트가 제대로 적용이 안되는 경우가 있는데, 아래와 같이 CSS 코드를 주석으로 처리할 경우 그런 현상이 발생하기도 합니다. font 폴더에는 폰트파일을 업로드해 주시면 됩니다.

IT공부방/HTML5, CSS 2016. 7. 13. 13:54