본문 바로가기

분류 전체보기144

1일 1쿼리 수량 가격 상품이름 카테고리 추가 후 출력 추가 출력 결과 2023. 10. 6.
JS 이벤트 처리 - 2(addEvnetListener) 학습 목표 1. addEventListener() 메서드의 활용 2. 이벤트 위임(Event Delegation)와 버블링(Bubbling) css 초기화 코드 - reset.css ... 생략 CSS 파일을 HTML에 추가 1. addEventListener() 메서드의 활용 시나리오 코드 - 1 2. 이벤트 위임(Event Delegation) 이벤트 리스너를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴입니다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용합니다. 원리 브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(bubbling)됩니다. 이벤트 위임을 사용하면, 상위 요소에서 하위 요소에서 발생한 이벤트를 감지할.. 2023. 10. 5.
JS 이벤트 처리 - 1 (기본) 학습 목표 1. HTML 요소에 이벤트 등록하기 2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D ) 1. HTML 요소에 이벤트 등록하기 자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다. 이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다. 이벤트 등록에 대표적인 3가지 방식 Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다. Element Property : 자바스크립트에서.. 2023. 10. 5.
JS - 점검 6(웹 페이지 렌더링 과정) 학습 목표 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 2. 연습 문제 - 오류 해결 1. 웹 브라우저가 웹 페이지를 렌더링하는 과정에 대해 알아보자 웹 페이지를 렌더링하는 과정은 대체로 다음의 순서로 이루어집니다 HTML 파싱 (Parsing): 브라우저가 HTML 문서를 받아들이면, 이를 파싱하여 DOM Tree를 생성합니다. CSS 파싱 (Parsing): 브라우저가 CSS를 파싱하여 CSSOM Tree를 생성합니다. 렌더 트리 (Render Tree) 생성: DOM Tree와 CSSOM Tree를 결합하여 렌더 트리를 생성합니다. 레이아웃 (Layout): 렌더 트리를 기반으로, 각 요소의 크기와 위치를 계산합니다. 페인팅 (Painting): 렌더 트리를 기반으로, 픽셀로 변.. 2023. 10. 5.

티스토리툴바