분류 전체보기

1. HTML 요소에 이벤트 등록하기자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다.이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다.이벤트 등록에 대표적인 3가지 방식Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.Element Property : 자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록합니다.addEventListener() 메서드 : 가장 권장되는 방식으로, 여..

1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다.CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다.렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다.레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다.페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변환하여 화면에 그립니다.JavaScript와 HTML 파싱  HTML 파싱 과정:바이트 단계: HTML 문서를 네트워..

1. BOM 에 대하 알아 보자 JavaScript에서 BOM (Browser Object Model)은 웹 브라우저와 상호작용하기 위한 객체 모델입니다. BOM을 사용하면 JavaScript가 브라우저 창 및 브라우저의 기타 요소와 상호작용할 수 있습니다. BOM은 DOM(Document Object Model)과는 달리 표준화되지 않았기 때문에 브라우저마다 차이가 있을 수 있습니다. 2. Window Object 와 하위 객체들에 대해 알아 보자Window Object ├── Navigator ├── Location ├── Screen ├── History └── Document (DOM 진입점)  Window Object모든 BOM 및 DOM 요소는 window 객체의 일..

브라우저에 띄울 웹 페이지가 단순히 정보 전달만을 목적으로 하는 정적인 웹이라면 HTML, CSS로도 충분하겠지만 그 이상의 인터랙티브한 기능을 구현하고자 한다면 자바스크립트와 DOM을 반드시 사용해야 합니다. 1. DOM 이란 무엇일까? (문서 객체 모델)문서 객체 모델, 즉 DOM은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.  HTML 웹 페이지 문서 입니다  위의 HTML 코드를 기반으로 웹 페이지가 로드되면, 브라우저는..