주말공부

• 뷰 포트의 크기 가져오기
  clientWidth, heigt (스크롤 크기는 포함하지 않는다.)
  window.innerheight width (스크롤 크기 포함.)
• 스크롤 한 거리 구하기
  scrollLeft, scrollTop (x,y 축으로 스크롤 한 거리)
• 특정 위치로 스크롤하기
  window.scrollBy(x,y)
• 특정 거리로 스크롤하기
  window.scrollBy(dx,dy)

HTML form

• form 입력 데이터를 웹 서버에 보내고 서버는 그 데이터를 처리, 사용자에게 반환 또는 DB에 저장한다.
• 사용자 입력을 받는 UI로 사용.
• form은 method, action attribute를 가진다.

Css 제어하기
1. style 속성 값 수정
2. class add or remove or toggle

classList 프로퍼티

• add('클래스) 추가
• remove('클래스') 제거
• toggle('클래스') 토글 추가 또는 삭제
• contains('클래스') 확인 (true, false)

이벤트 처리
addEventListner만 사용하자.
이벤트가 발생하면 실행되는 함수 = 이벤트 처리기 또는 이벤트 리스너

target.addEventListener(type,listener,usecapture)

• target : 이벤트 리스너를 등록할 DOM 노드
• type: 이벤트 타입 문자열 ('click','change'등..)
• listener : 이벤트 처리 callback 함수
• usecapture : 캡처링 options (true,false)

addEventListener의 장점

• 이벤트 리스너 여러개 등록 가능
• 버블링, 캡처링 조작 쉬움
• 이벤트 전파 용이