개발일기

2024/12/20 검색 결과

해당 글 3건

JS 이벤트 처리 - 2(addEventListener)

💡 학습 목표addEventListener() 메서드의 활용이벤트 위임(Event Delegation)와 버블링(Bubbling)  addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기 2. 이벤트 위임(Event Delegation)이벤트 리스너 를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴입니다. 이 패턴은 주..

JavaScript 2024. 12. 20. 16:20

JS 이벤트 처리 - 1 (기본)

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

JavaScript 2024. 12. 20. 16:19

JS - 점검 6(웹 페이지 렌더링 과정)

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

JavaScript 2024. 12. 20. 16:17