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

code block에 highlight js와 line-number를 적용해봅니다. highlight js : code block의 스킨 : 저는 atom-one-dark를 씁니다. highlight-line-number : code block 왼쪽에 line number를 표시해줌 이 글을 쓰는 이유는 제가 삽질한 것을 공유드리기 위해서입니다. 아래 4단계를 따라해주시면 됩니다. 1. Syntax Highlight 플러그인 해제하기 이게 발단이었습니다. line number를 적용하고 싶다면, 이걸 해제하고 highlight js를 설치해야합니다, 블로그 중에서 이걸 켠 상태에서도 되는 분들이 있던데, 안되는 경우 저처럼 해제를 해주세요. 2. Highlight js 설치 Highlight js로 가셔..

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(용어)부터 정리해보겠습니다. (영문과 한국어를 자주 섞어쓰는 이유는, 두가지 언어가 어떻게 호환되는지 알아야 구글링이 원활하기 때문입니다. 불편하더라도 양해부탁드립니다.) === 실행되..