[TIL]20201224

• CSS 변수
  • IE 11에서는 지원하지 않는다.
  • :root 가상 클래스
    • 문서의 루트요소(HTML에서는 html)를 지칭한다.
    • { property: value } 의 형태로 값을 정의한다.
    • property는 대소문자를 구분한다.
    • 하위요소에서 같은 property를 정의 하면 하위요소에서는 정의한 value가 적용된다.

See the Pen CSS_Var by ImHyeLim1209 (@imhyelim1209) on CodePen.

• Element에 Event 연결   ex.클릭이벤트
  • element.onclick = function(event){ ... }
    • 하나의 콜백함수만 지정 가능(두 번 이상 쓰면 마지막에 등록된 것만 수행된다)
    • 이벤트 제거 시 onclick 속성을 초기값으로 할당한다.
    • Property 방식
  • element.addEventListener ("이벤트 종류", function(event), isBubbling)
    • 여러 개의 이벤트 리스너 추가 가능 (동일한 이벤트 중복해서 넣어도 모두 실행됨)
    • removeEventListener()로 이벤트를 제거한다.
    • 콜백함수의 작동방식(버블링, 캡쳐링)을 지정할 수 있다.
      • addEventListener의 파라미터로 지정(default: false/버블링)
    • 여러 이벤트를 바인딩 할 수 있다.
    • IE 8 이하는 호환되지 않는다. -> attachEvent 메소드를 사용한다.
    • 권장하는 방식
• querySelector, querySelectorAll을 사용하자
  • getElementById 등의 방식은 과거의 방식이며 이전 브라우저의 호환을 위해서만 사용한다.
• setAttribute("속성", "값")을 사용하자
  • Element의 속성에 직접 접근하는 것은 XSS 공격에 타겟이 될 수 있으므로 지양한다.
• JSON(JavaScript Object Notaion): JavaScript 객체를 나열해 놓은 형식의 데이터
• HTML 태그들은 메타데이터이다.
• Script Body 안의 맨 마지막에 사용한다 -> DOM에 접근하기 위해