const target = document.querySelector('div');

const button = document.querySelector('button');

// window 는 생략이 가능하다.
// window.document.children[0].children[1].children[1] == button
button.addEventListener('click', onChange);

function onChange() {
  target.innerHTML = '<h1>바꾼다</h1>';
}

CSS

link 와 import로 불러오는 방식의 차이점

1. link 방식

1. link src="stylesheet" href="css 주소"
2. 외부에서 css 문서를 가져와서 연결하는 방식
3. 병렬로 연결하는 방식
4. 권장하는 방식이다

2. import 방식

1. @import url("css 주소")
2. css의 import 규칙으로 css문서안에 또다른 css 문서를 가져와 연결하는 방식
3. 직렬로 연결하는 방식
4. import 되어있는 css가 연결이 되어 있지 않으면 연결되지 않는다.
5. 늦게 적용되는 방식이라서 필요한 경우가 아니면 피하는 것이 좋다.

선택자

1. 기본선택자

전체 선택자 : *
태그 선택자 : ex) li ul div p ...
class 선택자 : .class이름 ex) .fruit
id 선택자: #id 이름 ex) #name

2. 복합 선택자

일치 선택자: 선택자 두개를 입력 하는것 ex) h1.fruit
하위 선택자: 선택자의 하위에 있는 선택자를 이야기한다 ex) div .fruit
인접 형제 선택자: 선택자의 형제요소 하나 ex) .fruit + li
일반 형제 선택자: 선택자의 형제 요소 모두 ex) .fruit + li

3. 가상 선택자 - 1

hover: 어떤 선택자의 마우스 커서가 올라가 있는 동안 발생 ex) a:hover
active: 어떤 선택자의 마우스를 클릭하고 있는 동안 ex) a:active
focus: 어떤 선택자가 포커스 되는 동안 ex) input:focus

4. 가상 선택자 - 2

선택자:first-child : 선택자 요소 중 첫째
선택자:nth-child(n) : 선택자 요소 중 n번째 ex) .fruit:nth-child(2)
선택자: not(요소) : 선택자 (요소)가 아닌 선택자 요소 선택 ex) .fruit:not(p)

5. 가상 요소 선택자

선택자::before :선택자 요소의 내부 앞에 내용을 삽입 ex) .fruit::before
선택자::after : 선택자 요소의 내부 뒤에 내용을 삽입 ex) .fruit::after

6. 속성 선택자

[ABC] : 속성 ABC를 포함한 요소 선택 ex)[type], [type="text"]

CSS 상속

1. 강제상속 : inherit

선택자 우선순위

1. !important - 가장 우선순위가 높다

2. 인라인 선언 - 2번째 우선순위 ex) "style="color: aqua"

3. id 선언 - 3번째 우선순위

4. class 선언 - 4번째 우선순위

5. 태그 선언(*) -5번째 우선순위

6. 전체 선언 - 마지막 우선순위