Bootstrap 개요 트위터에서 시작된 오픈 소스 프론트엔드 트레임워크. 시작은 디자이너 한명과 트위터의 한 개발자였지만 지금은 트위터에서 주도적으로 개발하고 있지는 않다. 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인과 기능을 CSS와 JavaScript로 만들어 놓은 것이며, 초창기에는 웹 디자이너나 개발자 사이에서 웹 디자인의 혁명이라고 불릴 정도로 폭발적인 반응을 얻었던 프레임워크이다. 부트 스트랩 사용하기 위한 사전 작업 1. cdn 서비스 사용하거나 2. 직접 부트스트랩 서버에서 사용 1번을 하기 위해서는 인터넷에서 가져오면 된다. Choose a Bootstrap Version (3, 4 or 5) (w3schools.com) W3Schools Free Online Web ..

1. XML 읽기(기본동작코드) function loadDoc() { //XMLHttpRequest 생성 var xhttp = new XMLHttpRequest(); //응답이 왔을때의 콜백 함수 정의. 응답이 왔어? 그럼 뭘할거냐를 정해줌 xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_info.txt", true); xhttp.send(); } - this.readyState == 4 :정상완료 ( 응답이 왔으면) - this..

다음과 같이 키보드 방향키에 따라 캐릭터가 움직있게 하는 기능을 수행하고자 한다. keydown은 다음과 같이 작동한다.(w3school를 통한 예시) Enter your name: Enter your name in the input field above. It will change background color on keydown and keyup. 다음과 같은 $("변수").keydown(function(){~ 방법으로 풀면 되겠다. 1. 에서 테두리 지정 및 캐릭터 삽입 (캐릭터 크기 : width/height = 200px, 테두리 크기 : width/height = 600px, 2. 변수 지정 let bob = $('#bob'); const GAME_WIDTH = 600; const GAME_H..

JQuery는 DOM작업을 쉽게 처리할 수 있도록 도와주는 라이브러리다. 때문에 자바스크립트 문법이나 라이브러리를 대체하는 프로그래밍 언어는 아니다. 어떤부분에서 쉽게 처리되는지 문법적인 차이를 살펴보자. 1. 변수 선언 // 기존 js 방식 $jsTitle = document.getElementById('title'); console.log($jsTitle); // jquery 방식 $title = $('#title'); console.log($title); 자바스크립트에서는 getElement를 통해 가져온 반면 ,제이쿼리의 경우는 변수를 바로 가져올 수 있는 것을 확인할 수 있다. HTML에 다음과 같은 id의 버튼이 있다고 가정해보자. 클릭1 그러면 JQuery에서 2, 3번과 같이 적용해볼 수 ..

JQuery로 체크박스 전체 선택, 전체 해제, 그리고 선택한 체크박스에 해당하는 값을 얻어오는 것을 구현하겠다. 1. html로 테이블을 구성한다. 팁 : table>tr*7>td*3 를 입력하고 엔터를 누르면 7열 3행의 테이블이 자동완성된다.) 확인 제목 글쓴시간 1111 11:11:11 2222 11:11:11 3333 11:11:11 4444 11:11:11 5555 11:11:11 6666 11:11:11 전체 체크박스읜 id는 'all'이고 개별적인 체크박스들의 name은 'chk'로 설정한다. 2. 전체 선택/ 해제 에 대한 자바스크립트 작성(JQuery 식대로 function 구성) $('#all').click(function () { if ($("#all").is(":checked"))..

제이쿼리(JQuery) : HTML 이벤트 처리 등 다양한 기능을 부여하는 오픈소스 기반의 자바스크립트 라이브러리 JQuery에 대해 잘 정리해준 글을 포스팅하고 정리는 스킵하겠다. 해당 글에서 개념, 장단점, 상황 등을 알 수 있다. 가장 큰 특징 : 호환성이 가장 큰 장점, 변화하는 기술이기 때문에 현재 가장 인기 있지만 하향세 中이라는 점. 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 (samsungsds.com) 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래 www.samsungsds.com CDN : content delivery nerwork의 약자로, 라이브러리를 가져와 사용..