이벤트 기초Event는 무언가 일어났다는 신호입니다. 이벤트의 종류마우스 이벤트click - 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 발생contextmenu - 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생mouseover - 마우스 커서를 요소 위로 움직였을 때 발생mouseout - 마우스 커서가 요소 밖으로 움직였을 때 발생mousedown - 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때 발생mouseup - 요소 위에서 마우스 왼쪽 버튼을 뗄때 발생 폼 요소 이벤트submit - 사용자가 form을 제출할 때 발생focus - 사용자가 input과 같은 요소에 포커스할 때 발생 키보드 이벤트keydown - 사용자가 키보드 버튼을 누를 때 발생keyup - 사용자가 키보드 버튼을 뗄 때..

ClassName과 ClassList아주 오래전 자바스크립트엔 class 같은 예약어는 객체의 프로퍼티가 될 수 없다는 제약 사항이 있었습니다. 지금은 이런 제약사항이 사라졌지만, 과거엔 class 프로퍼티를 사용할 수 없었기 때문에 className이 도입되게 되었습니다. className무언가를 대입하면 클래스 문자열 전체가 바뀝니다.classList속성값 전체를 바꾸는게 아니라 클래스 하나만 추가하거나 제거합니다.ex) elem.classList.add - (추가)      elem.classList.toggle - (class가 존재할 경우, class 제거, 그렇지 않은 경우 추가)      elem.classList.contains("class") - class 존재 여부에 따라 true/fa..

브라우저 환경과 다양한 명세서 브라우저는 최상단의 window라는 루트 객체로 이루어져있습니다. 문서 객체 모델(DOM)문서 객체 모델(Document Object Model)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타냅니다.  DOM의 주요 개념1. 트리 구조DOM은 문서를 트리 형태의 계층적 구조로 표현합니다.HTML 문서 구조 예) Hello, World! This is a paragraph. 위 문서는 DOM 트리로 표현하면 다음과 같은 구조를 가집니다.Document├── html ├── head │ └── title │ └── "Example" └── body ├── h1 │ └── "Hello, World!..