인프런 커뮤니티 질문&답변
작성한 질문수
마이너스 좌표값(?) 사용
작성
·
620
0
this.y = (hero.position().bottom - hero.size().height) / 2;
값이 마이너스인데 +로 바꾸면 화면에 안뜨더라고요
웹 상 좌표 읽는 방식이 다른 건가요??
처음 강의 keyframe 설정할때도 background-position-x 값을 -3770px로 설정한 것과 +3770px와의 차이점을 알고싶습니다.
짧게 말해 보통 +값으로 하는데, -를 사용해야하는 이유를 알고싶습니다,, 좌표 어렵네여,,
답변 1
1
안녕하세요
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 이죠? 즉 이미지는 다음과 같은 형태로 나열되어 있습니다.
*(빨강 네모 박스가 우리에게 보여지는 부분이에요)
그러니 마이너스 값으로 이미지를 이동시키면 순차적으로 이미지가 보이기 때문에 모션이 만들어지겠죠?
만약 플러스값을 사용하면 이미지가 오른쪽으로 이동하기 때문에 다음과 같이 이미지가 밀려 제대로된 모션이 나오지 않을겁니다.
*(빨강 네모 박스가 우리에게 보여지는 부분이에요)
쉽게 설명해주셔서 감사합니다!