마이너스 좌표값(?) 사용

Question

this.y = (hero.position().bottom - hero.size().height) / 2; 값이 마이너스인데 +로 바꾸면 화면에 안뜨더라고요 웹 상 좌표 읽는 방식이 다른 건가요?? 처음 강의 keyframe 설정할때도 background-position-x 값을 -3770px로 설정한 것과 +3770px와의 차이점을 알고싶습니다. 짧게 말해 보통 +값으로 하는데, -를 사용해야하는 이유를 알고싶습니다,, 좌표 어렵네여,,

깡코딩 · Answer

안녕하세요 1. 질문1 답변 .hero_bullet 의 css를 보면 position: absolute bottom: 0 으로 수리검의 기본 위치를 잡아뒀습니다. 그리고 this.y값을 구하고 transform:translate 속성을 이용해 수리검의 위치를 잡아주는데요 포지션 바텀 0이 수리검의 기본위치, 즉 기준이 되는거고 바텀 0을 기준으로 translate 속성을 사용해 수리검의 최종 위치를 설정하기 때문에 마이너스 값을 사용하는겁니다. :) 만약 translate가 아닌 bottom값을 직접 수정하면 플러스 값을 써도 되겠죠? 아직 이해가 안가셨다면 postion과 translate 대해 조금 더 공부해 보면 좋을 것 같습니다. 2. 질문2 답변 스프라이트 이미지의 크기는 현재 3770px 입니다. 그리고 background-position-x의 값은 처음 0 이죠? 즉 이미지는 다음과 같은 형태로 나열되어 있습니다. *(빨강 네모 박스가 우리에게 보여지는 부분이에요) 그러니 마이너스 값으로 이미지를 이동시키면 순차적으로 이미지가 보이기 때문에 모션이 만들어지겠죠? 만약 플러스값을 사용하면 이미지가 오른쪽으로 이동하기 때문에 다음과 같이 이미지가 밀려 제대로된 모션이 나오지 않을겁니다. *(빨강 네모 박스가 우리에게 보여지는 부분이에요)