브라우저는 HTML 문서를 로드한 후, 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데, 이것을 DOM tree라 한다. 문서 노드(Document Node) 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다. ​ 요소 노드(Element Node) 요소 노드는 HTML 엘리먼트를 표현한다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. ex) document.getElementById(id) -> id 어트리뷰트 값으로..

window 객체 Window 객체는 자바스크립트의 최상위객체이자 전역객체이면서 모든 객체가 소속된 객체이다. 아래의 사진을 보면 DOM, BOM, JavaScript가 최상위 객체인 Window 객체 밑에 소속이 되어있다. 이 객체들은 서로 계층적인 관계로 구조화 되어있다. JSC (Javascript core) 자바스크립트 언어의 자체에 정의되어 있는 객체들. Object, Array, function 등.. DOM(Document Object Model) : 문서 객체 모델 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면, 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 여기서 브라우저가 웹 문서를 이해할 수 있도록 문서를 객체로 구성되게 한 것을 DOM이라고 한다..

이벤트(event) 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM 요소와 관련이 있다. ​ 이벤트가 발생하면 그에 맞는 반응을 하여야 한다. 이를 위해 이벤트는 일반적으로 함수에 연결되며 그 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. ​ 이 함수를 이벤트 핸들러라 하며 이벤트에 대응하는 처리를 기술한다. 이벤트의 종류 대표적인 이벤트를 소개한다. 자세한 사항은 Event referenceVisit Website을 참조 바란다. ​ UI Event Event Description load 웹페이지나 스크립트의 로드가 완료되었을 때 unload 웹페이지가 언로..

자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생 이벤트 설명 load 웹 페이지의 로드가 완료되었을 때 unload 웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 ) error 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우 resize 브라우저의 창 크기를 조정했을 때 scroll 사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다. 이벤트 설명 keydown 사용자가 키를 처음 눌렀을 때 keyup 키를 땔 때 keypress 사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생 이벤트 설명 click 사용자가 동일한 요소 위..

width 속성 - https://www.daleseo.com/css-width/ [CSS] width 속성과 너비 결정 매커니즘 Engineering Blog by Dale Seo www.daleseo.com display : flex - https://studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect E..

회원 기본 정보 아이디: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인: 메일주소: 예) id@domain.com 이름: 개인 신상 정보 주민등록번호: 예) 1234561234567 생일: 년 1 2 3 4 5 6 7 8 9 10 11 12 월 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 이하 생략 일 관심분야: 컴퓨터&nbsp인터넷&nbsp여행&nbsp영화감상&nbsp음악감상 자기소개: JS 정규표현식 예외처리 회원 기본 정보 아이디: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호: 4~12자의 영문 대소문자와 숫자로만 입력 비밀번호확인: 메일주소: 예) id@domain.com 이름: 개인 신상 정..