본문 바로가기

DOM2

01Jan2020 TIL Today I learned : Find closest element event 위치가 랜덤으로 설정된 엘리먼트들 중 클릭한 타겟 엘리먼트에서 가장 가까운 위치에 있는 엘리먼트에게 새로운 이미지를 추가하는 이벤트를 구현하려고 한다. 과제 가이드라인에 따르면, Pythagorean theorem (피타고라스의 정리)를 이용하여 대각선의 길이가 가장 짧은 엘리먼트를 구하는 과정이 필요했다. 우선, 화면에 구현된 이벤트 타겟이 어떤 것을 의미하는지 console.log(event.target)를 통해 살펴보았다. Span 이나 Div가 아닌 이미지가 찍혀서 해당 이미지의 style 을 살펴 보았더니 style 로 지정된게 없었다. 따라서 해당 이미지의 부모 엘리먼트를 살펴볼 필요가 있었다. 해당 부모 노트를 .. 2020. 1. 2.
22Dec2019 TIL Today I learned : FAKE airbnb 구현 (html css DOM) document.createElement() : 새로운 엘리먼트를 생성하는 것. 생성하고자 하는 엘리먼트의 종류를 스트링 형식으로 괄호에 입력하면 된다. ex) document.createElement('DIV') .setAttribute(속성, 값) : 엘리먼트에 원하는 속성을 부여하는 매소드. id / class 지정이나 style 지정도 가능하다. ex) let div = document.createElement('DIV') div.setAttribute("class", "user"); 부모노드.appendChild(자식노드) : 원하는 노드를 다른 노드의 자식으로 만드는 매소드. 해당 자식 노드는 이 매소드를 통.. 2019. 12. 23.