❓ 웹 페이지 생명주기웹 페이지의 생명주기는 HTML 문서를 로드하여 DOM 을 생성하고, 리소스(이미지, 스타일 시트 등)를 불러와 화면을 완성한 후, 페이지를 떠날 때까지 이어지는 일련의 과정을 의미한다. 🌱 주요 생명주기 단계HTML 로드 시작: 브라우저가 HTML 문서를 다운로드하고 파싱 시작DOM 생성: HTML 파싱이 완료되고 DOM(Document Object Model) 트리가 완성됨.리소스 로드: CSS, 이미지, JS 등 외부 리소스가 로드됨.페이지 인터랙션: 페이지가 사용자와 상호작용을 시작함.페이지 언마운트: 사용자가 페이지를 떠나거나 브라우저 탭이 닫히면서 페이지가 언마운트됨. 🔍 생명주기 단계별 주요 이벤트1️⃣ DOM 생성: DOMContentLoadedDOMContentL..
JavaScript
❓ 웹에서 이벤트를 사용하는 이유1️⃣ 이벤트란 무엇이고 왜 사용할까?웹 사이트가 처음 등장했을 때, 그 목적은 단순히 정보를 보여주는 것이었다. 하지만 시간이 지나면서 사용자와 상호작용하는 웹 애플리케이션의 수요가 높아졌다. 사용자는 단순히 글이나 이미지를 보기만 하는 것이 아니라, 직접 버튼을 클릭하거나, 스크롤을 움직이고, 데이터를 입력하는 등의 다양한 행동을 통해 웹과 상호작용하기를 원했다. 그래서 등장한 것이 "이벤트" 이다. 이벤트는 웹 페이지에서 사용자의 행동을 감지하고 그에 반응하는 메커니즘이다. 버튼을 클릭하거나 텍스트를 입력하는 등의 상호작용을 통해 웹 페이지가 즉각적으로 반응하도록 만들어준다. 예를 들어, 버튼을 클릭하면 팝업 창이 열리거나, 입력 필드에 값을 넣으면 실시간으로 해당 ..
📌 offsetHight / offsetWidth: 요소의 전체 크기offsetHeight: 요소의 전체 높이를 반환한다. 패딩과 보더를 포함한 높이로, 스크롤 바와 마진은 제외된다.offsetWidth: 요소의 전체 너비를 반환한다. 마찬가지로 패딩과 보더를 포함한 너비로, 스크롤 바와 마진은 제외된다. ✅ 예시const element = document.getElementById('target');console.log(element.offsetHeight); // 요소의 전체 높이 (패딩, 보더 포함)console.log(element.offsetWidth); // 요소의 전체 너비 (패딩, 보더 포함) 활용 예시전체 크기 계산 후 레이아웃 조정: 페이지 내에서 특정 요소의 전체 크기를 계산하고,..
❓ DOM 이란?DOM 은 Document Objct Model 의 약자로, 문서 객체 모델이라고 한다.DOM 은 웹 페이지를 구성하는 HTML 이나 XML 문서를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할을 한다.그리고 이렇게 변환된 구조를 통해 자바스크립트와 같은 프로그래밍 언어가 웹 페이지의 내용을 동적으로 바꾸거나 추가하거나 삭제할 수 있도록 도와준다. ++) 동적으로 바꾼다는 의미는? (동적 웹페이지)웹 페이지는 일반적으로 정적인 페이지로 시작된다.사용자가 웹 페이지를 열었을 때 그 페이지의 내용은 고정되어 있다는 뜻이다.동적으로 바꾼다는 것은 웹 페이지의 내용을 사용자와의 상호작용이나 다른 이벤트에 따라 실시간으로 수정할 수 있다는 의미이다. (버튼 조작, 양식 제출 등...) 이렇게 동..
