CodingCredit

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..

정렬과 재귀 정렬 정렬은 배열에만 적용되는 개념이라고 할 수 있다. 그 이유는, 배열과 객체의 가장 큰 차이인 순서때문이다. 배열에서만 순서라는 값이 적용되므로 정렬을 한다는 의미는 배열을 사용한다는 의미와 같다. array.sort var items = [ { name: 'Edward', value: 21 }, { name: 'Sharpe', value: 37 }, { name: 'And', value: 45 }, { name: 'The', value: -12 }, { name: 'Magnetic', value: 13 }, { name: 'Zeros', value: 37 } ]; // value 기준으로 정렬 items.sort(function (a, b) { if (a.value > b.value) ..