🔥 CSS position relative와 absolute의 비교 css position property 중에서 가장 헷갈리는 relative와 absolute를 비교해봅니다. 저는 이 두가지가 상당히 헷갈렸습니다. 가장 큰 이유는 static에 대한 이해가 없었기 때문인 것 같습니다. static은 position의 default값입니다. top/right/bottom/left 값을 무시합니다. static상태를 움직이게 하는 position이 relative입니다. absolute는 static한 상태 자체를 없애버립니다. relative 을 갖고 있는 부모에 대해 absolute한 좌표 값을 가집니다. absolute을 주면, 해당 css property는 유령이 됩니다. 본인의 고유자리를 잃고 ..

this와 call(), apply(), bind() this는 javascript의 이해하기 어려운 내용 중 하나입니다. 저 또한 this를 이해하지 못하였을 때, this에 대한 두려움이 많았습니다. 하지만 단 한번 제대로 이해를 하고 나니 오히려 js가 더 재밌게 느껴졌습니다. this에 대해 이해를 아직 잘모르신다면 반드시 짚고 넘어가도록 권하고 싶습니다. Content 크게 아래와 같은 내용으로 나눠서 설명하였습니다. call()에 대한 이해 apply()에 대한 이해 bind()에 대한 이해 function에서의 this class에서의 this Description this란 MDN에서 이렇게 설명한다. the value of this is determined by how a function..

Proclaim tistory에서는 hash link가 지원되지 않는 것 같습니다. 따라서 hash link로 편하게 이동하기 위해서 gist에 같은 내용을 올려두었습니다. DOM Manipulation(DOM 조작하기) and Javascript DOM의 element를 선택하고 조작하는 방법을 알아본다. document의 Node 및 Element의 method에 대해 알아보고, 간단한 예제로 실습해봅니다. 1. dom element를 선택하기 getElementById getElementsByClassName getElementsByTagName querySelector querySelectorAll 2. 선택한 element의 인접 element(혹은 node)를 선택하기 parentNode pa..

Proclaim 이 글의 코드는 참고자료에서 인용한 것임을 미리 알려드립니다. 글이 매우 길기 때문에,시리즈(DOM Series)로 분할하였습니다. DOM 시리즈와 관련된 모든 링크는 이 페이지에 올릴 예정입니다. DOM(Document Object Model) in Javascript DOM이란 Document Object Model으로 HTML document의 standard API이다. Web Page는 HTML로 나타나는 Document이고, 그것을 바꿀 수 있게 해주는 것이 DOM이라고 보면 된다. 우리는 아래와 같은 것들을 DOM에 접근하여 바꿀 수 있다. HTML elements HTML attributes CSS styles HTML events 위와 같은 것들을 add(create), ..

들어가기에 앞서.. 본 내용은 한번 읽고 이해하기 쉽지 않습니다. 다소 어려운 내용임을 감안하고 읽어주시기 바랍니다. javascript engine의 동작순서로 다소 추상적인 내용으로 다가올 수 있습니다. 이 글은 내용은 최대한 짧게 용어위주로 요약한 글입니다. 이해가 되지 않는다면 키워드별로 검색을 해서 상세하게 이해하시는 것을 권장하고 싶습니다. ❔ Execution context(EC)는 javascript 코드가 실행되는 방식입니다. (javascript engine이 동작하는 방식) 먼저 아래에서 다룰 term(용어)부터 정리해보겠습니다. (영문과 한국어를 자주 섞어쓰는 이유는, 두가지 언어가 어떻게 호환되는지 알아야 구글링이 원활하기 때문입니다. 불편하더라도 양해부탁드립니다.) === 실행되..

❔ Hoisting은 Javascript의 기본동작(default behavior)이기 때문에 이해가 필요하다. Hoist의 사전적 의미(구글사전) "raise (something) by means of ropes and pulleys. (로프나 풀리로 어떤것을 올리는 행위)" 이런 이미지이다. 🔎 w3school 내용 : Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function). JavaScript Hoisting JavaScript Hoisting Hoisting is Jav..