알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)

bootstrap 부트스트랩은 동적인 웹 사이트 및 웹 응용 개발을 위한 프론트엔드 프레임워크로, 입력 창, 버튼, 네비게이션 및 기타 구성물, 각종 레이아웃 등을 HTML 및 CSS 기반의 디자인 템플릿으로 제공하며 추가적인 자바스크립트 확장들도 포함한다.[네이버 지식백과] 부트스트랩 [Bootstrap] (두산백과) 위 설명에서 보듯이 html,css,javascipt 를 이용해 개발자의 개발을 도와주는 프래임 워크 입니다. 개발자가 직접 디자인 와 반응형 웹을 위한 코딩 그리고 서버쪽 코딩 클라이언트 코딩 너무 일이 많기때문에 그러한 어려움을 해결하기 위해서 나오는것이 프래임 워크 입니다. 그리고 bootstrap 은 많이 사용되고 훌륭한 open source 기반 프레임 워크 입니다. 차근 차근 ..

JSON 이란? JSON (JavaScript Object Notation)은 경량의 DATA-교환 형식이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. 정의 되어 있다. 쉽게 말하면 데이터를 교환하는 문자열 약속 같은것이다 좀더 짧게 말하면 변수 데이터를 주고 받기를 목적으로한 프로토콜이다. 그리고 이 프로토콜을 사용하기 위해서 파싱이라는것을 하는데 프로그램에서 파싱이란 데이터를 조립해 원하는 데이터를 빼내는 프로그램을 하는것을 말한다. ECMAscript 5(자바스크립트 표준) 에서는 JSON 파서 를 집어 넣어 놨다. 프로토콜 데이터에서 파싱하여 프로토콜 데이터를 쉽게 사용할수 있도록 해주는 라이브러리 이다. 예를 들면 실제 데이터는 이런식으로 통신이 되는데 JS..

javascript+django(csrf) 통신하기 polls/templates/test7.html {% csrf_token %} {% csrf_token %} xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var data = ''; xhr.send(data); } 을 넣어 적어 줍니다. polls/views.py from django.shortcuts import get_object_or_404, render # Create your views here. from django.http import HttpResponseRedirect,HttpResponse from .models import Question,Choi..

HTMLCollection HTMLCollection은 리턴 결과가 복수인 경우에 사용하게 되는 객체다. 정도로 정의가 되지만 코드를 보면 좀더 직관적입니다. 예를들면 HTML CSS JavaScript 위와 같은 html 코드가 있을때var lis = document.getElementsByTagName('li'); 이렇게 문서에서 tag 을 선택하게 되면 lis 변수에는 총3개의 태그 변수를 리스트 형식으로 리턴 받게 됩니다. 이러한 것을 HTMLCollection 형태라고 합니다. 그리고 HTMLCollection 형태가 가지는 구조는 HTMLCollection interface HTMLCollection { readonly attribute unsigned long length; Node item..

HTMLElement javascript or Jquery 를 사용할때에 선택한 html 속성에 대해 정확히 알아야 제어를 할수가 있습니다. www.w3.org html 표준을 만드는 단체에서 그 속성을 서술해 놨고 우리는 찾아서 사용하기만 하면됩니다. 자 일단 예제 코드를 보면서 이해도를 높이도록 하겠습니다. HTML CSS JavaScript 이제 크롬으로 실행을 시켜 결과값을 보겠습니다. 위와 같이 2가지 타입이 로그로 나오는군요 .HTMLLIElementHTMLCollection속성을 보는 페이지를 링크 시켜 놨습니다. 이중에 1개만더 좀더 상세한 예제를 보겠습니다. opentutorials HTML CSS JavaScript 결과값은 HTMLLIElementHTMLAnchroElementHTML..

ajax+django(csrf) 통신하기 ajax는 http의 post or get 을 이용한 통신을 합니다. 우선 test할 html 파일은 django 서버에 탬플릿 폴더에 있어야 합니다. 브라우저 들이 정책상 ajax의 데이터를 서버와 같은 곳에서 호출해야 하기 때문 예를 들면 post 로 데이터를 보낼 서버의 IP 주소가 와 포트가 10.23.10.232:8888 이라고 합니다. 그때 ajax에서 url:'/polls/searchData/' 이러한 속성을 설정하는데 여기에서 url 은 http://10.23.10.232:8888/polls/searchData 을 의미하지만 다른 웹서버(예를들면 10.23.10.230:8888)에 똑같은 내용의 웹서버가 있어 http://10.23.10.230:88..

에니메이션 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인 효과를 줄 수 있다.jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다. target » Run Hello! 에니메이션은 직접 예제코드를 실행 하시는편이 가장 이해하기 쉽고 좋을것 같습니다.

폼 이벤트 간단하게 폼이벤트에 대해서 다뤄 보겠습니다. 이벤트에 대한 좀더 상세한 내용은 jQuery 폼 API 문서 : http://api.jquery.com/category/forms/ 에 더 많은 API 와 이벤트 들이 소개 되어 있습니다. (.focus(), .blur(), .change(), .select()) .focus input 태그에 포커스가 되었을때 발생 합니다..blur 포커스가 해제 될때 사용 됩니다 ..change input 태그 값이 변경 될때 사용 됩니다. - function(e) 함수에 e 라는 변수를 줬는데 이것은 현재 $("input") 와 같습니다. - $(e.target) 은 $(this) 와 같습니다. .select input 태그 안에 문자열이 선택 될때 발생 합니..

엘리먼트 제어 jQuery는 엘리먼트를 제어하는 일관되고 풍부한 기능들을 제공한다.http://api.jquery.com/category/manipulation/ 이제 부터 예제로 학습 하겠습니다. 자식으로 삽입 (.append(), .appendTo(), .html(), .prepend(), .prependTo(), .text()) I would like to say: 그리고 크롬 개발자 도구(F12) 로 보면 자식으로 해당 내용이 추가 되었습니다. 형제로 삽입 (.after(), .before(), .insertAfter(), .insertBefore()) I would like to say: 부모로 감싸기(.unwrap(), .wrap(), .wrapAll(), .wrapInner()) Span T..

이벤트란? 시스템에서 일어나는 사건을 의미javascript나 jQuery에게 이벤트란 브라우져에서 일어나는 사건을 의미한다. (클릭, 마우스 이동, 타이핑, 페이지 로딩등)이벤트가 발생했을 때 작동할 로직을 시스템에게 알려두면 이벤트가 발생했을 때 시스템이 그 로직을 호출한다. jQuery의 이벤트 크로스브라우징의 문제를 해결해줌(호환성 문제 해결)on으로 이벤트 핸들러를 설치하고,off 로 제거trigger로 이벤트 핸들러를 강제로 실행click, ready와 같이 다양한 이벤트 헬퍼(helper)를 제공함on를 이용하면 현재 존재 하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있음 $(document).on('ready', 문서 준비가 완료 되면 function() 을 실행 합니다. $('#cli..