JS 이벤트 처리 - 5(이미지 토글)

JS 이벤트 처리 - 5(이미지 토글)

1. 심볼즈(Symbols)에 대해 알아 보자 심볼즈(Symbols)는 문자나 기호를 의미한다. 웹 페이지에서 사용할 수 있는 다양한 문자나 기호가 있고, 이러한 문자나 기호는 특정 코드를 사용하여 웹 페이지에 표시할 수 있다.https://www.htmlsymbols.xyz/heart-symbols HTML Symbols...www.htmlsymbols.xyz ♡ ♡ ♡ 참고JavaScript에서 DOM(Document Object Model)을 통해 요소를 가져올 때 반환되는 객체 타입은 HTMLCollection, NodeList, Node 등이 있습니다. 이들은 각각 다르게 동작하며, 사용하는 메서드에 따라 달라질 수 있습니다. 1...

  • format_list_bulleted JS/JS 작업을 위한 코딩 연습
  • · 2024. 8. 1.
  • textsms
JS 이벤트 처리 - 4(반복문과동적생성)

JS 이벤트 처리 - 4(반복문과동적생성)

Flexible Box(flexbox)를 활용해서 HTML 요소를 만들어 보자 반복문을 활용한 리스트 생성 Render

  • format_list_bulleted JS/JS 작업을 위한 코딩 연습
  • · 2024. 7. 30.
  • textsms
JS 이벤트 처리 - 3(forms)

JS 이벤트 처리 - 3(forms)

1. 시나리오 코드 배송지입력 이름 : 연락처 : check 배송지입력2 ..

  • format_list_bulleted JS/JS 작업을 위한 코딩 연습
  • · 2024. 7. 30.
  • textsms
JS 이벤트 처리 - 2(addEventListener)

JS 이벤트 처리 - 2(addEventListener)

1. addEventListener() 메서드의 활용 addEventListener() 메서드의 활용 아이템 추가, 토글 기능 만들기 EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기 아이템 추가 리스트 토글 아이템 1 수정하기 삭제하기 2. 이벤트 위임(Event Delegation)이벤트 리스너를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴이다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용하다. 원리브라우저에서 이벤트는 대상 요소에서 발생하며..

  • format_list_bulleted JS/JS 작업을 위한 코딩 연습
  • · 2024. 7. 26.
  • textsms
JS 작업을 위한 코딩 연습

JS 작업을 위한 코딩 연습

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

  • format_list_bulleted JS/JS 작업을 위한 코딩 연습
  • · 2024. 7. 24.
  • textsms
JS - 점검 6(웹 페이지 렌더링 과정)

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

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

  • format_list_bulleted JS/JavaScript 핵심
  • · 2024. 7. 23.
  • textsms