[3-1] 날씨 API 웹 포스터 (1) - Pseudo, 이벤트

Pseudo Class

Pseudo Class
- 가상 클래스

: hover 할 때 ,
: ( 콜론) 이 하나 들어가는 것들을
CSS의 가상 클래스 라고 함.

:active
= 사용자에 의해 엘리먼트가 활성화 됐을 때
( 마우스를 누르는 중일 때 )

:hover
= 사용자의 커서가 엘리먼트 위에 있을 때
( 마우스가 올라가 있을 때)

:target
= 상호작용된 요소가 가리킨 URL과
target 요소가 일치할 때 사용되는 가상 class

:any-link
= link / visited 이 두개를 포괄하는 가상 class
= 방문 여부와 관계없이 링크가 걸린 요소 전부의 style 적용 가능

:checked
= 대상 체크박스가 체크됐을 때

:focus
= 대상 요소가 활성화됐거나 된 직후일 때

:focus-within
= label/form 안 요소가 활성화 됐을 때

:focus-visible
= 대상 요소가 현재 활성 상태일 때

---

~의 사용

input:checked~label { }
= ~ 을 사용 할 때는
꼭 형제 관계여야 한다.

---

< 마우스에 사용되는 이벤트 종류 >

1. mouseenter
- 엘리먼트에 마우스가 진입했을 때 발동되는 Event

2. mouseleave
- 마우스에 진입해 둔 상태에서 엘리먼트를 벗어날 때 발동되는 Event

3. mousedown
- 마우스가 엘리먼트를 누른 순간 발동되는 Event

4. mousemove
- 마우스가 엘리먼트 위에서 움직일 때
- 눌렀는 지 안 눌렀는 지 와는 구분없이 움직일 때 발동

5. mouseup
- 마우스가 엘리먼트를 눌렀다 뗀 순간

6. scroll
- 엘리먼트의 스크롤이 동작할 때

7. click
- 엘리먼트를 눌렀다 뗐을 때

8. contextmenu
- 엘리먼트에 오른쪽 마우스 클릭했을 때
- 이미지에 오른쪽 마우스 클릭을 해서 다운로드하기 를 금지하고 싶을 때 사용
-> contextmenu 에 return false 를 하면서 다른 동작들을 불가능하게끔 함.

---

< 터치에 사용되는 이벤트 종류 >

1. touchstart
- 대상 요소 터치를 시작할 때 ( 누른 순간 )

2. touchmove
- 대상 요소를 누른 채 터치를 움직일 때 ( 드래그 )

3. touchend
- 대상 요소의 터치를 뗀 순간

4. touchcancel
- 터치 동작이 취소됐을 때

---

< 키보드 입력에 사용되는 이벤트의 종류 >

1. keydown
- 키보드를 누른 순간
( 입력이 있는 순간 )

2. keyup
- 키보드를 눌렀다 뗐을 때

3. keypress
- 키보드를 눌렀다 뗐을 때

4. ...input
- 한 문자가 입력될 때마다 실행되는 이벤트에 있는 요소

---

HTML 요소에 바로 직접적으로 Event 삽입 가능.

onClick, onMouseMove 로 바로 속성 삽입 가능.

---

자바스크립트 구문 내에서 사용

1. Onclick 사용
document.querySelector(".btn").onClick =
function(){console.log("Do something");}

2. addEventListner 사용
document.querySelector(".btn").addEventListener("click", btnClickHandler)