1. 스타일 다루기
1) 내부 스타일 : HTML 파일 내 style태그로 명영
2) 외부 스타일 : CSS파일을 따로 저장하여 불러오기
3) 인라인 스타일 : 태그안에 짧게 작성
- 정적 : 변경 후 문서를 재실행해야 한다.
- 동적 : 웹 문서 실행 상태에서 자바스크립트를 이용하여 스타일 다루는 방법
JS
-
sytle 속성으로 접근할 수 있는 스타일 속성은 인라인 속성으로만 접근할 수 있다.
-
내,외부 스타일 속성은 window.getComputedStyle()메서드로 사용해야 한다.
-
자바스크립트에서는 스타일 속성이름 중 font-size와 같이 두 개의 단어로 된 속성은 카멜 표기법으로 접근해야 한다. (fontSize)
-
여러 스타일 속성 값 변경할 때 스타일 개수만큼 작성해야 한다.
-
숫자+단위(px, em, rem 등)값을 갖는 경우 단위가 반드시 포함된 문자열로 설정해줘양 한다.
2. 속성 다루기
- 일반 속성 : id, class, tag, href, src 등
- 사용자 정의 속성 : setAttribute()~
https://velog.io/@gga01075/HTML%ED%83%9C%EA%B7%B8%EC%97%90-%EB%82%98%EB%A7%8C%EC%9D%98-%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%86%8D%EC%84%B1-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-ppec05qv
3. 이벤트 다루기
이벤트란 웹페이지 내에서 클라이언트, 즉 사용자가 마우스를 클릭하거나 키보드를 치는 행위를 뜻한다.
1) 마우스로 버튼 클릭
2) MouseEvent 객체 생성 (웹 브라우저)
3) 어떤 MouseEvent인지 확인 후 해당하는 이벤트 리스너 실행 (보통 함수단위로 구성되어 있음)
- 크게 4가지로 분류 (마우스 이벤트, 키보드 이벤트, 태그요소 고유 이벤트, 사용자 정의 이벤트)
이벤트 흐름은 크게 3단계에 걸쳐 발생한다. 반드시 알고 있어야 한다.
(캡처 단계 - 타깃 단계 - 버블 단계)
1. 캡쳐 단계(capturing) : document에서 시작~ 타깃 전 태그까지 가는 단계
2. 타깃 단계 : 타깃 태그에 머무르는 단계
3. 버블 단계(bubbling) : 캡쳐 단계 역순으로 가는 단계
보통 이벤트는 주로 타깃/버블 단계에 이벤트를 걸어 사용한다.
JS로 타깃, 버블링 단계에 이벤트 등록하는 방법
대상.addEventListener(이벤트 이름, 리스너, false);
캡쳐 단계에 이벤트 리스너를 등록하는 방법과 다른 점은 마지막 매개변수 값에 false를 대입하는 것이다.
3번째 매개변수는 useCapture라 불리는 불린값으로 이벤트 버블링이나 캡쳐링을 사용할 것인지 나타낸다.
capture 옵션은 두 가지 값을 가질 수 있다.
- false이면(default 값) 핸들러는 버블링 단계에서 동작
- true이면 핸들러는 캡처링 단계에서 동작
https://ko.javascript.info/bubbling-and-capturing
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
https://chlolisher.tistory.com/22
버블 단계 (bubbling) : 모든 이벤트가 버블링이 발생하는 것은 아니다. 버블링이 발생하는 이벤트의 경우 버블링 도중에 멈출 수 있다.
ex) li 각각에 대한 이벤트 리스너 만드는 대신 ul에 이벤트 리스너를 실행하도록 만들어서 버블링으로 가능한 코드 작성가능하다. (코드 효율성 증가)
- eventPhase() https://developer.mozilla.org/ko/docs/Web/API/Event/eventPhase
- 이벤트 핸들러와 이벤트 리스너 https://tangoo91.tistory.com/31
- createElement (요소 추가) https://www.codingfactory.net/10436
