whatisthis?

제이쿼리(jQuery) write less, do more 이라는 모토로 만들어진 오픈소스 기반의 자바스크립트 라이브러리. 쉽게 element를 찾고 조작할 수 있고, 브라우저의 호환성이 뛰어나다. 또한 메소드 체이닝 등 짧고, 유지관리가 용이한 코드를 지원한다. 장점 IE8,9를 지원한다. 모든 브라우저에서 호환 가능. 코드가 보기 좋다. (디자인을 위해) 플러그인을 지원한다. (다양한 기능 추가 가능) 애니메이션, AJAX도 간단히 사용 가능. 단점 무겁다. 바닐라 자바스크립트보다 10배~100배정도 느리다. 모듈화가 안되어있다. 예> $(document).ready(function(){ alert("Hello World!"); $("#blackBox").hide(); }); window.onload..

실행 컨텍스트(Execution Context) javaScript. (18) 실행 컨텍스트 실행 컨텍스트 (Execution Context) 실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. var name = 'zero'; // 전역변수.. mywebproject.tistory.com - 지난번에 업로드했던 실행 컨텍스트 포스팅은 var을 기준으로 한 설명이였다. 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김. 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨. 컨텍스트 생성 후 함수가 실행되는데..

원칙적으로, 자바스크립트로 CSS를 조작하는것은 지양하는 것이 맞다. 그러나, CSS만으로는 처리할 수 없을 때, (예 - 리액트같은 프레임워크를 쓰거나, 스크롤 문제 해결시) 어쩔 수 없이 js로 CSS를 조작해야 하는 경우가 발생한다. - 태그의 CSS를 변경 document.querySelector('선택자').style.display = 'inline-block'; 여기서 주의할 점은 -가 들어간 속성(예>background-color)은 -를 빼고 뒤의 문자를 대문자로 바꿔준다. (자바스크립트는 캐멀케이스 이므로) +) 처음부터 -가 붙은 CSS속성 (예> -webkit) 또한 -를 제거하고 w를 대문자로 바꿈. - 자바스크립트에서는 '-'가 빼기 연산자로 인식됨. - 태그의 css 속성을 읽어..

1. 뒤에 나오는 CSS가 우선순위가 높다. 2. 우선순위가 같다면 개수가 많은 것이 먼저 실행. (부모-자식 관계가 많은 경우) !important ∨ inline style attribute ∨ id ∨ class, 다른 속성(attribute), 가상클래스(:) ∨ tag element, 가상요소(::) !important 우선순위를 무시하고 꼭 적용시킬 속성은 속성 값(value) 뒤에 !important 키워드를 붙인다. .content{ color: black !important } - 우선순위 뿐만 아니라 디자이너와 개발자간 소통시 '중요한 속성임'을 나타냄. +) !important와 inline style attribute는 보통은 사용을 제한한다. ref. CSS 적용 ..

정렬 (align) 텍스트나 태그를 왼쪽 / 가운데 / 오른쪽에 배치하는 작업. - 보통 가운데 정렬이나 오른쪽 정렬 등 특수 형태를 많이 사용함. 부모 태그에 text-align을 사용하면? > 자식 태그들이 정렬된다. #parent { text-align: center; } 가로 정렬은 쉽지만, 세로로 가운데 정렬을 하는 것이 어렵다. 보통은 vertical-align: middle 속성을 시도하지만, vertical-align은 다른 태그를 기준으로 수직 정렬이 되는 것이라서옆에 다른 태그가 있어야만 그 태그에 맞춰서 세로 정렬이 된다. @css display: flex; align-items: center; 가장 쉬운 방법은 flex를 이용하여 align-items를 center로 설정하는 것이다..

CSS 포지션(Position) 모든 태그들은 position: static이라는 디폴트 상태를 갖는다. 차례대로 왼쪽>오른쪽, 위>아래로 쌓인다. position static default relative static을 픽셀만큼 이동시킴 (top,right,bottom,left 속성 有) absolute static이 아닌 포지션의 조상을 기준으로 정렬 (없을시 body) fixed 스크롤을 내려도 위치 고정되게 relative 태그의 위치를 살짝 변경하고 싶을 때, position: relative를 사용한다.이제 top, right, bottom, left 속성을 사용할 수 있다. relative는 각 방향을 기준으로 태그 안쪽 방향 으로 이동한다.(바깥쪽으로 이동하고 싶다면? 음수의 값을 주자.)..

CSS part 1 - (1) 박스 모델(Box Model) content > padding > border > margin 순으로 바깥으로 뻗어나간다. 또한 각 값은 left, right, top, bottom으로 나눠져서 값을 따로 지정해줄 수 있다. 예> border-right : 20px; img cr : https://www.geeksfo.. mywebproject.tistory.com 이전에 업로드한 CSS의 박스 모델에 대한 개정판 포스팅입니다. HTML 태그들은 모두 박스모델(Box-model)을 가지고 있다. 브라우저에서 개발자도구를 켜서 Elements 탭에서 아무 태그나 눌러보면 position, margin, border, padding, content 순으로 나오게 된다. 이것이 ..

HTML/DOM. Form Data 보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Lan.. mywebproject.tistory.com formData에 이미지를 담고 싶다면 formData.append('img', document.getElementById('파일 인풋').files[0]) 과 같이 해주고, 서버로 formData 자체를 보내면 된다. (파일이 여러개라면? > 반복문을 사용해서 append를 해줌. 단, 키값은 같아야함.) 키값이 같아야 여러 파일이 같은 키로 업로..

보통은 AJAX로 폼(form) 전송을 할 일이 거의 없다. 주로 JSON구조 (key-value)값 데이터를 전송함. But. 이미지를 AJAX로 업로드 할때 폼 전송이 필요함. >> input type="file" ___ - HTML: Hypertext Markup Language | MDN file 유형의 요소에는 저장 장치의 파일을 하나 혹은 여러 개 선택할 수 있습니다. 그 후, 양식을 제출해 서버로 전송하거나, File API를 사용한 JavaScript 코드로 조작할 수 있습니다. developer.mozilla.org 파일 입력 칸의 value 특성은 선택한 파일의 경로를 나타내는 DOMString을 담습니다. 사용자가 여러 개의 파일을 선택한 경우 value는 파일 목록의 첫 번째 파일을..

index.html undo redo pencil app.js (function($) { var tool; var canvas = $('paint'); var ctx = canvas.getContext('2d'); var history = { redo_list: [], undo_list: [], saveState: function(canvas, list, keep_redo) { keep_redo = keep_redo || false; if(!keep_redo) { this.redo_list = []; } (list || this.undo_list).push(canvas.toDataURL()); }, undo: function(canvas, ctx) { this.restoreState(canvas, ctx..