[3-2] 날씨 API 웹 포스터 (1) - 그림자, 이벤트 리스너 함수, 마우스 값

피그마 기능

분할돼있는 path 손쉽게 내보내는 방법
= 피그마에서 모두 선택한 다음,
ctrl + E 해서 합쳐주기

피그마에서 손쉽게 그라디언트 정보내보내기
인스펙트 코드 사용

그림자 요소 적용시키기
- Figma의 inspect 탭에서 적용돼있는 box-shadow 그대로 갖고 와서 사용

---

완벽한 반응형을 맞추고 싶으면 쓰는 단위
- 고정픽셀들을 rem 이나 em 으로 바꿔서 사용하기

---

이벤트 리스너 함수 사용 방법

const eventHandler = () => {
document.querySelector(".sun-circle").style.background="red";
}

document.querySelector(".sun-circle").addEventListner("click",function(){});
이거에서
document.querySelector(".sun-circle").addEventListner("click", eventHandler);
* eventHandler() 이렇게 넣어주지 않는다.
소괄호를 넣어버리면 바로 실행돼버리기 때문.

---

Event Listner 들은 적용해주었다 해도 나중에 사용하지 않게 되면 꼭 없애줘야 함.
= 사이트가 느려지는 원인이 될 수 있기 때문

---

개발자 도구 - 화살표 >> 클릭.
Performance 탭 확인 가능.

왼쪽 상단 검정색 레코드 버튼 클릭하면 빨간색이 됨.
브라우저에 사용하는 기록을 바탕으로 녹해서
했던 과정 녹화 확인 가능.

어떤 이벤트가 실행돼있는 지도 확인 가능.

하단에 Activity 에서 확인 가능.

---

이벤트 함수 삭제 방법
addEventListner 에서
add 부분을 remove 로 바꿔주면 된다.
= removeEventListner

그리고 괄호 부분은 함수 넣어주면 됨.

document.querySelector(".sun-circle").removeEventListner("click",eventHandler);

sun-circle에 eventHandler 라는 함수가 적용됐을 때 없애줄 수 있음.

---

const sunnyMove = (e) = > {
console.log(e)
}
window.addEventListner("mousemove", sunnyMove);

e 출력해주면
마우스가 움직일 때마다 노란색 원 바깥으로 나가더라도 마우스 이벤트가 출력 됨.

---

const sunnyMove = (e) = > {
console.log(`mouseX: ${e.x}, mouseY:${e.y}`)
}
window.addEventListner("mousemove", sunnyMove);

이벤트가 잘 받아와지는 지 콘솔창으로 확인.

---

JS 스타일에 있는 top 속성, left 속성 조정
document.querySelector(".sunny-sun").style.top = ;

document.querySelector(".sunny-sun").style.left = ;

top 과 left 에는 무조건적으로 단위가 들어가야 함.
숫자만 들어가면 안됨.

---

자바스크립트 변수쓰기
${}

---

box-shadow

F12 개발자 모드에서 확인 가능

box-shadow 오른쪽에 두 가지 네모가 그려져 있는
Open shadow editor 눌러보면 시각적으로 box-shadow를 조정할 수 있는 빌더가 나타난다.

< Inset / Outset >
Inset 설정의 경우 box-shadow가 엘리먼트의 안쪽에 위치할 건지
아니면 바깥쪽에 위치해서 밑으로 shadow가 있는 것 처럼 보이게 할 것인 지 설정하는 Outset 설정

X offset
가로 축으로 x 축으로 얼마나 떨어져 있는 지
Y offset
세로 축으로 얼마나 떨어져있는 지

blur - 얼마나 흐려질 것인지 해당하는 속성

개발자모드에서 설정했으면
해당 코드 그대로 복사해서
자바스크립트에 붙여넣어주고 주석처리해주기