Web APIs

브라우저는 Global Object인 Window라는 객체가 있고, 이를 크게 세가지의 객체로 분류할 수 있다.DOMdocumentBOMnavigatorlocationfetchstorageJavaScriptArrayMapDateDOM과 관련된 설명은 추후에 알아보자.

모니터 사이즈이다.window.screen.width window.screen.height 브라우저와 탭, 주소창을 포함한 크기브라우저의 전체 사이즈라고 생각하면 된다.window.outerWidth window.outerHeught탭, 주소창을 제외한 스크롤 영역을

Element.getBoundingClientRect() 은 브라우저 위에 존재하는 요소의 위치 및 넓이, 높이 값들을 가지고 있는 DOMRect 객체를 반환한다. 여기서 중요한 점은 엘리먼트의 bottom과 right는 css에서의 bottom과 right와 다르다는

window 창에 있는 document를 지정된 크기만큼 스크롤한다.window.scrollBy(0, 100);특정 좌표로 스크롤한다.window.scrollTo(0, 100); y축이 100px 인 곳으로 스크롤 엘리먼트의 위치로 스크롤한다.element.scro

파싱은 텍스트 문서를 읽어서 파스 트리 ( DOM tree, CSSOM tree ) 로 생성하는 과정을 의미한다.렌더링은 파싱된 것을 브라우저에 시각적으로 출력하는 것을 말한다.브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하

HTML 요소는 렌더링 엔진에 의해 파싱 되어 DOM을 구성하는 요소인 노드 객체 로 변환된다. 이때 HTML 요소의 어트리뷰트는 어트리뷰트 노드로, HTML 요소의 텍스트 콘텐츠는 텍스트 노드로 변환된다.DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수

렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나가다. 그러다가 CSS를 로드하는 link태그나 style태그를 만나면 잠시 중단하고 CSSOM을 생성한 후 다시 DOM 생성을 재개한다.CSS 파싱도 HTML 파싱과 동일하다. HTML이

앞서 살펴보았던 브라우저 렌더링 과정을 크게 두 개의 구성으로 나눠볼 수 있다.constructionDOM / CSSOMRender treeoperationlayout : 요소의 위치와 크기를 계산하는 것paint : 레이어 작업이 수행되는 것composition :

HTML의 구조나 내용 또는 스타일 등을 동적으로 조작하려면 먼저 요소 노드를 취득해야 한다. 텍스트 노드는 요소 노드의 자식 노드이고, 어트리뷰트 노드는 요소 노드와 연결되어 있기 때문에 텐스트 노드나 어트리뷰트 노트를 조작하고자 할 때도 마찬가지다.요소 노드를 취득

쉽게 말해서 사용자가 HTML 요소에 일으키는 행위라고 생각하면 된다. 브라우저를 클릭하거나 키보드를 누르거나 페이지를 스크롤하거나 비디오를 실행시키는 등, 여러가지 이벤트가 존재한다. 관련 설명은 MDN 사이트에 자세히 나와있으니 참고하면 되겠다.이벤트란? : mdn

event.preventDefault() 는 HTML 태그의 기본 이벤트를 막아주는 메서드이다.a 태그를 눌렀을 때, 링크로 이동하지 않게 할 경우form 안의 내용을 submit 이벤트로 보낼 때, 새로고침이 실행되지 않게 할 경우submit 의 경우에는 제출과 동시

ul 태그 안에 li 태그들이 나열되어 있는 코드가 있다고 생각해보자. selected 라는 클래스를 선택자로 지정해 배경색을 노란색으로 스타일링하고, li 가 클릭되면 selected 클래스를 추가해서 배경색을 바꾸는 작업을 할 것이다.해당 코드는 li 태그들을 qu