# pageX

9개의 포스트
post-thumbnail

ilva

-사이트명 : 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

2023년 7월 5일
·
0개의 댓글
·
post-thumbnail

좌표 위치 - clientX, offsetX, pageX, screenX, scrollY, pageYOffset 의 차이점

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

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

[JS]-마우스 클릭 좌표!

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)일 것이다.

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

Front-end 국비지원 #053일

JQuery 01. JQuery Slider 360 Image >결과 >HTML >P 태그에 클래스이름을 정한다. >SCSS 반복문을 위해 SCSS 에서 작성한다. >script > 변수 #slideList>p를 만들고 #slider를 JQuery Ui인 slider를 만들어준다. max와 min값을 만들고 를 사용하여 다음 이미지가 나오고 숨겨지게 만들어준다. 02. JQuery Mouse on Moving >결과 ![](https://velog.velcdn.com/images/nuyhes/post/6af3deae-9dc1-48ad-8902

2023년 1월 1일
·
0개의 댓글
·
post-thumbnail

[JS] 커스텀 커서 만들기

기존 마우스 모양을 안보이게 하고 내가 원하는 이미지로 바꾸기 브라우저에서 마우스가 움직일 때 그 위치를 받아오면 끝! HTML CSS JS > 1. 이 모든 상황은 마우스가 브라우저에 들어왔을 때이다. 이는 이벤트리스너에게 'mousemove' 일때 아래와 같은 일을 하겠다라고 정의하고 시작한다. event 객체에서 pageX와 pageY값을 받아온다. 이는 마우스가 브라우저페이지에서 움직일 때의 좌표를 받아오기 위함이다. 받아온 좌표를 이미지와 태그에 전달해주면 끝! 여기서 이미지가 좌상단을 시작점으로 보여지므로 가운데로 옮겨질 수 있도록 만들어 준다. getBoundingClientRect 함수를 이용해 이미지 사이즈를 받아온 후, 가로와세로

2022년 7월 29일
·
0개의 댓글
·
post-thumbnail

[JS30] - 27) Click and Drag

pageX - offsetLeft 사실 여기에서 $items.offsetLeft는 0으로 나오고, 이게 0이어도 기능 구현에는 아무런 문제가 없는데 왜 이걸 넣었는지??? 모르겠다. 다른 비슷한 기능을 구현하면서 알아봐야겠다. 더 공부해야하는 부분이다. 드래그해 움직인 커서의 pageX좌표 - 처음 클릭한 곳의 pageX좌표 = 커서를 움직인 거리이다. 이것을 scrollLeft로 지정하면 움직인만큼 스크롤 된다. .gif) 단, 움직이는 거리가 커질 수록 당연히 scrollLeft도 커지면서 움직이는데, 그렇게 되면 위 GIF와 같이 드래그하는 방향으로 스크롤 되어 부자연스럽다. 우리가 바라는 것은 드래그 하는 반대방향으로 스크롤되어, 실제 화면의 요소는 드래그 하는 방향

2021년 11월 7일
·
0개의 댓글
·
post-thumbnail

[TIL] 2021.10.24 (JS30, 알고리즘 문제풀이, 마우스 클릭좌표, 브라우저 렌더링 과정과 순서)

🧪 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-

2021년 10월 24일
·
0개의 댓글
·
post-thumbnail

27. Click and Drag

프로젝트 소개 가로 슬라이드 UI에서 마우스를 클릭 후 드래그를 통해 슬라이딩 효과 구현 내용 코드 작성 내용 mousedown 이벤트 발생 시 시작점, 좌측 scroll 최초 값을 저장 mousemove 이벤트 발생 시, 저장된 시작점으로부터 드래그된 거리를 위에서 저장된 좌측 scoll 최초 값에 계속 더하면서 scollLeft 값을 계속 업데이트 배운 내용 전체 container div(.items)의 속성 내 scrollLeft ![](https://images.velog.io/images/mementomori/post/c225fd4c-4d28-4de4-9722-b6f31f15d2ff/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202020-12-19%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%A

2020년 12월 19일
·
0개의 댓글
·

JavaScript 6.이벤트 Event

이벤트 객체 모든 이벤트의 정보를 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

2020년 10월 5일
·
0개의 댓글
·