질문이 많아서 죄송합니다..
function change(obj){
obj.style.transform="rotate("+n+"deg)";
n+=90;
}
저는 코드를 이렇게 작성하였는데 (가독성을 위해 변수명칭은 동일하게 바꾸었습니다.)
function rotate(obj) {
obj.style.transform = "rotate(" + n + "deg)";
n += 90;
n %= 360;
}
답안지에는
n%=360;
코드가 포함되어있습니다.
제가 작성한 코드 역시 문제없이 잘 되는데
n%=360; 코드를 넣어둔 이유가 뭘까요 ?
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 공지 |
읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.
|
관리자 | 2017.06.20 | 18281 |
| 223 | 6장 실습문제 4번 1 | 김성준 | 2021.06.16 | 257 |
| 222 | 교재 468page 실습문제 2-2번 질문입니다. 3 | 세린 | 2019.08.23 | 255 |
| 221 |
4장 연습문제 8번 질문이요
4
|
코딩은코딩코딩해 | 2020.04.14 | 253 |
| 220 | 7장 6번 문제 질문 1 | jj | 2019.10.22 | 252 |
| 219 | 실습 8장 8번 문제 질문이요! 1 | 꽁 | 2020.11.03 | 247 |
| 218 | 연습문제 5장 10번 문제 질문드립니다. 1 | . | 2020.10.08 | 247 |
| 217 | 7장의 8번문제 1 | 궁금 | 2020.03.20 | 247 |
| 216 | 6장 openchallenge 1 | ㅇㅇ | 2021.05.06 | 245 |
| 215 |
예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다.
1
|
배우고 익히는 초심자 | 2020.06.14 | 245 |
| 214 | 2장 이론 문제 답 문의 | MIKAEL | 2022.12.09 | 241 |
| 213 | 3장 4번 질문입니다 1 | 질문자 | 2019.10.04 | 240 |
| 212 | 책 151p 3장 오픈챌린지 문제질문입니다. 3 | 이상민 | 2019.07.19 | 239 |
| 211 | 예제 2-21 1 | Daisy | 2020.03.28 | 237 |
| 210 |
자바스크립트 sort에 대해 궁금해요!
1
|
노하람 | 2018.04.21 | 236 |
| 209 | 7장 실습문제 10번 좀 도와주세요 ㅜㅠ | 헷찡 | 2020.10.18 | 234 |
| 208 | 6장 오픈챌린지 1 | 이민수 | 2020.06.15 | 233 |
| 207 | 1장 1 | ㅇㄹㅇㄹ | 2019.06.07 | 232 |
| 206 | 3장오픈챌린지 질무닙니다. 1 | 파랑 | 2019.09.29 | 228 |
| 205 | 관리자님 | 안녕하세요 | 2018.06.12 | 228 |
| 204 | 3장 151페이지 오픈첼린지3번 문제 답은 어디서 볼 수 있나요? | 어려워요 | 2018.10.07 | 226 |
ㅋㅋ아니에요 열공하시네요!
우선 n %= 360의 의미를 생각해보자면 n을 360으로 나눈뒤 그 나머지를 n에 다시 대입한다는 뜻이죠.
따라서 rotate() 메소드가 호출될 때마다 n에 90이 추가되다가, 360이 넘는 순간 다시 0부터 시작되게 됩니다. (0, 90, 180, 270, 0, 90, 180, 270, ...)
이 부분이 없다면 n은 어떻게 될까요? 0부터 90씩 계속해서 증가하게 될 것입니다. (0, 90, 180, 270, 360, 450, ...)
그런데 어짜피 360도는 한바퀴 돌리는 거랑 똑같으니까 450도나 90도나 똑같은 것 같죠? 굳이 n %= 360을 해주어야 하나 싶기도 하구요.
결과만 보자면, 최종적으로 출력되는 모양은 동일합니다. 하지만 변환 과정에 조금 차이가 있습니다.
브라우저는 회전 변환을 처리할 때, 입력된 각도를 모두 적용시킵니다. 즉 90도는 90도 만큼만, 450도는 한바퀴를 돌리고 다시 90도를 돌립니다.
만약에 입력각도를 36000으로 주었다면 출력은 마치 회전이 없었던 것처럼 나타나게 되지만, 내부적으로 브라우저는 입력값인 36000을 처리하기 위해 100바퀴를 돌립니다.
스타일시트에
img {
transition: transform 1s;
}
를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
파이팅!