본문 바로가기

전체 글

 (147)
Event types & object Event Object addEventListener를 이용해서 어떤 요소에 이벤트를 등록하면, 이벤트가 발생할 때 마다 자동으로 event object라는 것이 생성된다. event object는 우리가 이벤트 발생 시 호출하는 함수의 첫번째 parameter로 전달할 수 있다(하지 않을 수도 있다). event의 property나 method를 이용할 수 있다. const input = document.querySelector("input[type='text']"); input.addEventListener("keydown", () => console.log('key down!') ); input.addEventListener("keydown", event => console.log(event) );..
What is Event? Event | 모든 이벤트 종류 DOM Node & EventTarget The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. The root of the hierarchy is EventTarget, that is inherited by Node, and other DOM nodes inherit from it. DOM tree는 DOM을 데이터 구조인 tree로 표현한 것이다. tree의 각 branch는 모두 node로 끝나는데, node는 "event target" 이라는 상위 객체를 상속한다. EventTarget은 "Event"를..
Select & Manipulate css에서 요소를 선택하고, 해당 요소에 스타일링을 지정한 것과 같이, DOM에서도 요소(Element)를 선택하고, 그 요소가 해야할 일을 처리하는 코드를 작성할 수 있다. 이 때 DOM 요소를 선택하고 조작하는 APIs는 "document" 객체에서 제공하는 내장 메서드이고, 이것을 DOM APIs라고 부른다. +) Element | DOM에서 반환하는 하나의 JS Object를 말한다. Select Elements | document. ~ getElementById(str) | 해당하는 id를 속성 값으로 갖는 요소를 찾아 반환, 해당하는 요소가 없으면 null 반환 이 때 요소는 html의 요소가 아니라, DOM의 JS Object이다. getElementsByTagName(str) | 해당하는 ..
What is DOM? What is DOM? 윈도우 객체의 구성 | DOM, BOM, JavaScript JS의 실행 환경은 브라우저와 노드로 나뉜다. JS가 브라우저에서 실행될 때 최상위의 객체는 window 객체인데, 이 window 객체에는 "DOM"이라는 것이 있다. DOM | Document Object Model DOM은 Document Object Model의 약자인데, 단어의 뜻 그대로 document를 자바스크립트의 object로 변환 한 것을 말한다. 여기서 document는 html과 같은 웹 페이지 파일을 가리킨다. 그렇다면 document를 왜 object로 변환하는 걸까? 우리는 "브라우저"(크롬, 사파리...)라는 소프트웨어를 통해 화면에 웹 페이지를 띄운다. 그러나 브라우저는 html 자체의 문법..
Transition & Animation Transition | css 속성 값의 전환이 일어날 때 Transition의 속성값 transition은 우리가 요소의 모습을 변형할 때 이 변화의 속도와 방법을 조절해서 애니메이션을 더 부드럽게 만들어주는 속성이다. 다음의 네 가지를 속성 값으로 가질 수 있다. property | 변화가 일어날 css 속성 각각의 속성에 transition을 따로 지정하고 싶을 때에는 다음과 같이 코드를 작성 .like-button { transition: background-color 200ms ease-in 100ms, font-size 200ms ease-in-out; } duration | 변화의 지속 시간, 200~250ms를 가장 많이 사용 ms, s [timing-function] | 변화의 속도, 생..
Centering Element를 centering하는 방법 Flex box를 이용할 때 | display: flex justify-content, align-items를 이용해 아이템을 가운데로 정렬할 수 있다. body { /* 100vh가 아니면 centering 안됨 */ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } 어떤 요소를 가운데로 정렬하고 싶을 때, 그 요소를 감싸고 있는 부모 태그를 flex box로 선언하면 쉽게 정렬이 가능하다. 위의 코드는 body의 자식 태그를 가운데로 정렬할 수 있게 만들어 준다. +) height을 100% 으로 설정하면 수직 가운데 정렬이 불가능하다. 100%는..
Position Position이란? | MDN position은 element를 어떤 기준으로 위치시킬 것인지를 정할 수 있는 property이다. position의 타입에 따라 이 기준은 달라진다. 이 타입에는 static, relative, absolute, fixed, sticky가 있고, top, bottom, left, right을 함께 이용하면 각각의 "기준" 위치에서 얼마만큼 떨어져 있는 곳에 위치시킬 것인지를 최종적으로 결정할 수 있다. 따라서 top, bottom, left, right의 값을 지정하지 않으면, 아무런 일도 일어나지 않는다. +) z-index | static을 제외하고 position에 값을 적용하면, 그 요소의 z 값이 설정된다(원래 위치에서 붕 뜨게 된다). z-index 값은 정..
Box & Flex Box Box Model이란? box라는 것은 다음 그림과 같이 생겼다. html의 모든 요소는 브라우저 위에서 보여질 때, 위와 같은 box가 된다. 이 box를 이루고 있는 구성 요소에는 margin, border, padding, content이 있다. 모든 box가 이 네가지의 구성요소로 이루어져 있어서 box-model 이라고 부른다. .box { margin: 2px; border: 1px solid violet; padding: 2px; width: 50px; height: 50px; } 이런 박스 요소의 너비와 높이는 어떻게 정할 수 있을까? 박스의 가장 내부에 있는 content의 너비와 높이를 박스의 크기로 정할까? 아니면 가장 외부의 margin 까지를 박스의 크기로 정할까? 아니면 padd..

티스토리툴바