자바스크립트 이벤트 핸들러, 이벤트 리스너    1. 이벤트(Event)- 이벤트(event)는 무언가 일어났다는 신호입니다. 모든 DOM 노드는 이런 신호를 만들어 냅니다.   (이벤트는 DOM에만 한정되진 않습니다.)- 웹페이지에 있는 기능을 이용하기 위해서 마우스나 키보드를 조작하여 기능을 실행한다.- 바로 이러한 행위들을 이벤트라고 부릅니다. 2. 이벤트 종류1) 마우스 이벤트click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 이벤트 발생 contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 이벤트 발생mousedown과 mouseup – 요소 위에서 마우..

DOM이란? Virtual DOM이란? 사용하는 이유는?      Virtual DOM이란? 사용하는 이유는?Virtual DOM 공부하기 전에 DOM부터 알아보자. DOM DOM은 Document Object Model의 약자임. 한국어로는 문서 객체 모델. 간단하게 설명하면 웹 페이지에 나오는 HTML문서 전체를 객체로 표현한 것으로 생각하면 될것같음. 이때의 각 객체를 노드(Node)라는 용어로 표현하고 각 노드는 HTML 요소들과 연관되어 있고 DOM노드로 이루어진 트리를 만듬, 태그는 요소 노드, 문자는 텍스트 노드로 구분됨. DOM 트리   웹 페이지나 웹 앱에 있는 HTML 요소들의 계층 구조를 나무에 비유해서 DOM 트리라고 표현함. 각 노드 간의 관계는 부모, 자식, 형제라는 용어로 표현..

얕은 복사 Shallow Copy , 깊은 복사 Deep Copy 란?    자바스크립트에서 값은 원시값과 참조값이 있습니다. 원시값- Number- String- Boolean- Null- Undefined 참조값- Object- Symbol 원시값은 값을 복사 할 때 복사된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다const a = 1;let b = a;b = 2console.log(a); //1console.log(b); //2 하지만 참조값은 변수가 객체의 주소를 가리키는 값이기 때문에 복사된 값(주소)이 같은 값을 가리킨다. const a = {number: 1};let b = a;b.number = 2console.log(a); // {numb..

CSS 배경(background) 속성정리   background 속성  https://developer.mozilla.org/ko/docs/Web/CSS/background background - CSS: Cascading Style Sheets | MDNCSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.developer.mozilla.org  background는 아래 다양한 속성을 가집니다.background-color배경 색background-image배경 이미지background-repeat배경 이미지 반복 여부background-position배경 이미지 위치background-size배경 이미지 크기background-ori..

display속성 block, inline, inline-block 정리  1. display: block;: block 요소의 의미는, 이 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없다는 뜻입니다.블록 속성을 가지고 있는 태그는 기본적으로 너비 100% 속성을 가지고 있습니다.화면의 가로 폭을 100%로 완전히 차지하기 때문에, 다음 요소가 양 옆으로 붙을 공간이 없어서 자연히 줄 넘김이 된다.따라서 display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 완전히 차지합니다.예를 들어서 p, li, div, h1 등이 모두 block 요소에 해당하는 태그들입니다.  inline 요소와 다르게 margin, pedding, w..

[CSS] Position 속성   https://developer.mozilla.org/en-US/docs/Web/CSS/position position - CSS: Cascading Style Sheets | MDNThe position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.developer.mozilla.org    CSS position 속성 : CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다.position 속성은..

HTML 링크, 미디어 태그 (이미지, 오디오, 비디오)     https://developer.mozilla.org/ko/docs/Web/HTML/Element/a - HTML: Hypertext Markup Language | MDN" data-og-description="HTML 요소(앵커 요소)는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. 안의 콘텐츠는 링크 목적지" data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla.org/ko/docs/Web/HTML/Element/a" data-og-url="..

HTML 태그 종류 및 개념정리  https://www.w3schools.com/html/html_forms.asp HTML FormsW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com   : 입력 양식 전체를 감싸는 태그폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송해주기도 하며 이밖에 ..

HTML 테이블 태그   https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table: The Table element - HTML: HyperText Markup Language | MDN" data-og-description="The HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data." data-og-host="developer.mozilla.org" data-og-source-url="https://developer.mozilla..