12장 문서 객체 모델과 이벤트 다루기
12.1 문서 객체 모델 이해하기
DOM 트리: 나무를 뒤집어 놓인 형태의 자료구조인 트리구조를 가짐
노드 타입 살펴보기
문서노드: 최상위 document객체의 노드 타입
요소노드: h1,p태그와 같은 요소의 노드 타입
속성노드: href,src와 같은 속성의 노드 타입
텍스트 노드: 텍스트에 해당하는 노드 타입
주석노드: 주석에 해당하는 노드 타입
메서드로 노드 선택하기
속성값과 태그명 사용하기 - get 메소드
css 선택자 사용하기 - query 메소드
12.3 노드 조작하기
콘텐츠 조작하기
textContent : 요소 노드의 모든 텍스트에 접근
interText :요소 노드의 텍스트중 웹 브라우저에 표시되는 테그트에 접근
innerHTML :요소 노드의 텍스트중 HTML 태그를 포함한 텍스트에만 접근
스타일 조작하기
<노드>.style.<css 속성명> =<속성값>;
데이터속성 조작하기
data-*속성 : HYML문법에서 사용할수 있는 속성외에 사용자가 원하는 속성을 추가할수 있게한 사용한 정의 속성
12.4 노드 추가/삭제
DOM트리에 새로운 노드를 생성하는 작업을 해야함
노드 삭제하기
<부모 노드>.removeChild(<자식 노드>)
12.5 폼 조작하기
폼 요소의 시작은 항상 form
forms :모든 form 태그의 노드정도를 HTMLcollection객체에 담아 반환가능
체크박스 다루기: 체크박스도 value속성으로 값을 가져올수 있음
라디오버튼 다루기: 여러개의 항복중 하나만 선택하게 할떄 사용하는 폼 요소
콤보박스 다루기: 여러 항목에서 하나를 선택하는 형태의 폼요소
파일 업로드 요소 다루기 : input태그의 type속성값을 file로 지정하면 표시되는 요소
12.6 이벤트 다루기
마우스 이벤트
키보드 이벤트
포커스 이벤트
폼 이벤트
리소스 이벤트
이벤트 등록: 이벤트가 발생할때 어떤 작업을 할지 자바스크립트 코드로 작성하는것
인라인 방식으로 이벤트 등록하기
:HTML태그에 속성으로 이벤트를 등록하는 방법
프로퍼티 리스너: 요소 노드에 직접 속성으로 이벤트를 등록하는 방법
이벤트 등록 메소드로 이벤트 등록하기
<노드>.addEventListener("<이벤트 타입>",<이벤트 함수>));
12.7 이벤트 객체와 this
이벤트 객체 사용하기: 이벤트가 발생하면 실행되는 함수에는 내부적으로 이벤트 객체가 매개변수로 전달
이벤트 취소하기: 기본으로 이벤트가 적용되어 있음.-> preventDefault()메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할수 있음
this 키워드 사용하기
: 함수내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가르킬수 있음
13장 HTML + CSS + 자바스크립트로 완성하는 최종 프로젝트
13.2 헤더 영역 만들기
헤더 영역의 배경이 검은색으로 보이지만 실제로는 검은색이 아님. 메인 영역 코드 때문에 검은색으로 보임
13.3 메인영역 만들기
메인영역의 기준은 웹 페이지를 만드는 사람마다 다를수 있었음.
13.4 섹션 영역 만들기 -About Me
13.5 섹션 영역 만들기 - What I Do
제목있고, 본문을 단순하게 수평방향으로 3단 분리해 표현한것이 전부
13.6 배경영역
div class="bg"></div
13.7 섹션 영역 만들기 -PortFolio
HTML코드 작성하기
13.8 섹션 영역 만들기 - Contact With Me
섹션영역이므로 section 태그로 영역을 구분하고 세부 레이아웃을 설계하면됌
13.9 반응형 코드 적용하기
기준점 설정하기
미디어 쿼리: 미디어 쿼리는 해상도를 기준으로 서로 다른 css를 적용하때 사용(기준되는 해상도 정해야함)
13.10 자바스크립트 적용하기
텍스트 삭제: 뒤에서부터 요소를 추출해 한 글자씩 줄어드는것처럼 표현하면 됌
