CodingCredit

HTML 개념과 append와 appendChild의 차이 HTML은 무엇인지 말로 설명할 수 있도록 해보자. HTML (Hyper Text Markup Language) 하이퍼텍스트는 뭐고, 마크업 언어는 또 뭐야? 하이퍼텍스트 하이퍼텍스트는 참조(하이퍼링크)를 통해 독자가 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트이다. 기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다. 이런 하이퍼텍스트의 등장은 검색엔진과 더불어 정보습득의 새로운 장을 인류에게 가져다 주었다. 웹이라는..

DOM_엘리먼트 가운데배치 & 엔터키로 함수실행하기 엘리먼트 정 가운데에 배치하기 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute와 top,left 속성으로 해당엘리먼트의 위치를(정확히는 왼쪽위 꼭짓점을) 부모엘리먼트의 중앙에 위치시켜 놓은 뒤 transform속성을 입력해준다. transform: translate(-50%, -50%의 의미는 다음과 같다. height: 90vh; width: 90vw; margin-top: -45vh; margin-left: -45vw; 즉, 해당 엘리먼트의 너비와 높이의 50%만큼을 다시 left,top쪽으로 당겨준다. 이렇게하면 top과botto..

Remove All children 모든 자식노드를 삭제하는 방법들 const parent= document.querySelector(".parent"); while (parent.firstChild) { parent.removeChild(parent.firstChild); } const parent= document.querySelector(".parent"); while (parent.hasChildNodes()){ parent.removeChild(parent.firstChild)}; const parent= document.querySelector(".parent"); parent.querySelectorAll('*').forEach(n => n.remove());

DOM 이해하기 DOM (Document Object Model, 문서객체모델) BOM (Browser Object Model, 브라우저 객체모델) DOM을 이해하기 앞서, BOM부터 알아보자. BOM은 Browser Object Model(브라우저 객체모델)이며, 웹 브라우저와 관련된 객체들의 집합을 말한다. 이 BOM을 이용해서 브라우저저와 관련된 기능들을 구성하는데, DOM은 이 BOM 중 하나이다. BOM의 최상위 객체는 window이며, DOM은 이 window 객체의 하위 객체이기도 하다. DOM 그럼 문서객체모델은 정확히 뭘까? 문서객체는 html문서의 태그들을 JavaScript가 이용할수 있는 객체로 만든 것을 말한다. 모델은 문서객체를 인식하는 방식이라고 해석할 수 있다. 정리하면, D..

DOM 연습하기 li 하나를 생성하는 과정 const root = document.getElementById("root"); const creatLi = function () { const li = document.createElement("li"); const input = document.createElement("input"); const span = document.createElement("span"); input.type = "checkbox"; span.textContent = "음식"; //li.textContent로 하면 input이 출력되지 않는다. li.appendChild(input); li.appendChild(span); root.appendChild(li); return li;..

재귀 익숙해지기 재귀함수를 짜면서 느끼는건 어렵다는 느낌도 있지만 결국엔 익숙하지 않기 때문에 어렵다고 생각되는 것 같다는 것이다. 재귀라는 낯선 흐름을 억지로 생각하려고 하기때문에 머리가 아프다는 느낌이었다. 결국 재귀라는 것에 익숙해지는 것이 재귀를 쉽게 다룰 수 있는 방법이 될 것이라 생각한다. 재귀함수 - unpackGiftbox 문제 : 선물 상자에 대한 정보를 담은 배열과 문자열을 입력받아 조건에 맞는 선물이 있는지 여부를 리턴해야 한다. 입출력 예시 : const giftBox = ['macbook', 'mugcup', ['eyephone', 'postcard'], 'money']; let output = unpackGiftbox(giftBox, 'iphone'); console.log(ou..