# screenX

shinstar_

-사이트명 : ilva -사용언어 : html , css -분류 : 적응형pc, 🔋 Main Point [x] view port [x] 폰트 올라오는 효과 [x] gsap [x] 스크롤실행시 visual이미지 파묻히는효과 [x] 4-1.ease [x] clip-path:inset [x] mouseover (마우스오버) [x] 글자css 1. viewport 메인 비주얼에 나오는 큰 글씨는 vh로 설정하면 화면이 줄어들때마다 일정한 비율로 주시될수 있다 다른 영역에는 픽셀크기가 일정한게 좋기때문에 메인비주얼에 주로 사용한다 http://publishing.kr/vw/ (px -> vh 계산기) => ![](https://velog.velcdn.c

ony_

https://stackoverflow.com/questions/9262741/what-is-the-difference-between-pagex-y-clientx-y-screenx-y-in-javascript 1. ClientX, ClientY 현재 보여지는 브라우저 화면 뷰포트 기준으로 가로, 세로 좌표를 반환 2. OffsetX, OffsetY 이벤트 대상을 기준으로 상대적인 좌표를 반환 ex) 화면 중앙의 박스 요소에서 클릭한 위치를 찾으면 박스위 왼쪽 모서리 좌표가 0으로 측정됨 3. pageX, pa

badassong

1. screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시한다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 된다. 2. pageX, pageY 전체 문서를 기준으로 한 좌표를 표시한다. 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것이다. 3. clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시한다. 따라서, 스크롤바가 움직이더라도, 특정 지점의 clientX, clientY의 값은 동일하다. 4. offsetX, offsetY 좌표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시한다. 만약 특정 div 영역에서 offsetX, offsetY를 출력한다면,div의 왼쪽 상단 모서리 부분의 offsetX, offsetY의 값은 (0, 0)일 것이다.

gygy

🧪 Javascript 30 Challenge Day 8 [JS30] - 8) Fun with HATML5 Canvas 🧲 1일 1알고리즘 문제풀이 [Code Signal] Array Replace 🧶 JS 메소드 정리 오늘 푼 알고리즘 문제에서 사용한 메소드 정리 [배열안 같은 요소의 모든 위치 찾기(indexOf - 2nd param)](https://velog.io/@gygy/%EB%B0%B0%EC%97%B4%EC%95%88-%EA%B0%99%EC%9D%80-%EC%9A%94%EC%86%8C%EC%9D%98-%EB%AA%A8%EB%93%A0-%EC%9C%84%EC%B9%98-%EC%B0%BE%EA%B8%B0indexOf-2nd-

zhyun1220

이벤트 객체 모든 이벤트의 정보를 event 객체로 제공 속성 type : 이벤트 종류 (예:click) target : 이벤트가 발생한 객체(요소) pageX, pageY : 문서의 좌상단을 기준으로 한 마우스 좌표 screenX,screenY : 화면상의 좌표 button : 눌러진 마우스 버튼 : (0:왼쪽버튼, 1:휠(중간)버튼, 2:오른쪽 버튼) 메소드 preventDefault() stopPropagation() 마우스 이벤트 click/ dbclick : 클릭/ 더블클릭 mousedown : 누를때 mouseup : 뗄때 mouseenter : 마우스가 요소의 경계 외부에서 내부로 이동 시 mouseleave : 마우스가 요소의 경계 내부에서 외부로 이동 시 hover : mouse enter와 leave의 조합 m