728x90 반응형 분류 전체보기287 JavaScript] Coordinates (element 좌표) 출처 : https://javascript.info/coordinates elements를 이동시키기 위해서, 우리는 좌표에 익숙해져야 한다. 대부분의 JavaScript 함수들은 두 좌표 시스템 중 하나를 사용한다. Relative to the window - position:fixed와 유사하다. window top/left edge로부터 계산한다. 이러한 좌표를 clientX/clientY로 나타낸다. Relative to the document - position:absolute와 유사하다. document top/left edge로부터 계산한다. 이러한 좌표를 pageX/pageY로 나타낸다. page를 맨처음으로 스크롤할때 window의 top/left corner는 document의 top/.. 2022. 11. 17. JavaScript] Window sizes and scrolling 출처 : https://javascript.info/size-and-scroll-window browser window의 width, height를 어떻게 구할 수 있을까? document의 full width, height를 어떻게 구할 수 있을까? JavaScript로 page를 어떻게 scroll할 수 있을까? Width/height of the window window 가로세로를 알기 위해서, document.documentElement.clientWidth/clientHeight를 사용할 수 있다. window.innerWidth/innerHeight는 scrollbar를 포함한다. alert( window.innerWidth ); // window 가로 전체 alert( document.doc.. 2022. 11. 14. JavaScript] Document Styles and classes 출처 : https://javascript.info/styles-and-classes element를 style하는 방법은 2가지가 있다. 1. CSS에 class를 생성하고 추가하는 방법 : 2. 직접 style에 properties를 입력하는 방법 : JavaScript는 classes와 style properties 모두 수정이 가능하다. 우리는 1번을 선호해야 하며, 2번은 class로 다룰 수 없는 경우에만 사용해야 한다. 예를들어 element 좌표를 계산해서 JavaScript로 설정해야 하는 경우이다. let top = /* complex calculations */; let left = /* complex calculations */; elem.style.left = left; // e... 2022. 11. 14. JavaScript] document 수정 출처 : https://javascript.info/modifying-document DOM변경의 key는 live page를 생성이다. 어떻게 새로운 element를 생성하고 존재하는 page content를 수정하는지 알아보자. Example: show a message Hi there! You've read an important message. JavaScript로 동일한 div를 만들어보자. Creating an element DOM nodes를 만드는 데 2가지 함수가 있다. let div = document.createElement('div'); // 주어진 tag로 새로운 element node를 생성한다. let textNode = document.createTextNode('Here I.. 2022. 11. 11. JavaScript] HTML attributes and DOM properties 출처 : https://javascript.info/dom-attributes-and-properties 브라우저가 page를 로딩할때, HTML을 읽고 DOM objects를 생성한다. 대부분의 표준 HTML attributes는 자동으로 DOM objects의 properties가 된다. 예를들어 태그가 일때, DOM object는 body.id="page"를 갖는다. 하지만, attribute-property가 1:1 매핑되는 것은 아니다. 둘이 언제 같고 다른지 살펴보자. DOM properties 이미 많은 내장 DOM properties를 살펴보았다. 하지만 기술적으로 그 수가 제한되지 않았으며, 임의로 추가가 가능하다. DOM nodes는 일반 JavaScript Objects이므로, 수정이.. 2022. 11. 8. JavaScript] DOM Node properties 출처 : https://javascript.info/basic-dom-node-properties DOM node classes 다른 DOM nodes는 다른 properties를 갖고 있다. 예를들어 tag에 해당하는 element node는 link와 연관된 properties를 갖는다. 하지만, 공통 properties와 함수도 있다. DOM nodes의 모든 class는 하나의 hierarchy에서 나왔기 때문이다. hierarchy의 근본은 EventTarget이며 Node에 의해 상속된다. EventTarget - root 'abstract' class, 근본 추상 클래스, 따라서 모든 DOM nodes는 'events'를 지원한다. Node - 또한 추상 클래스, core tree 기능(pa.. 2022. 11. 4. 이전 1 ··· 19 20 21 22 23 24 25 ··· 48 다음 728x90 반응형
