질문이 많아서 죄송합니다..
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 | 18278 |
| 283 | 7장 실습문제 8번에서 질문입니다 1 | JAVAscript공부중이에요 | 2020.05.27 | 408 |
| 282 | 7장 실습문제10번 | 자바 | 2019.06.13 | 747 |
| 281 | 7장 오픈챌린지 1 | 질문이요 | 2018.12.18 | 343 |
| 280 | 7장 오픈첼린지 1 | Bolt | 2017.04.11 | 1071 |
| 279 |
7장 이론문제 3번 이의제기 합니다.
3
|
혁999 | 2017.12.10 | 1279 |
| 278 | 7장에 실습문제 4번 질문 1 | asd123 | 2017.11.05 | 1634 |
| 277 | 7장에 연습문제에 있는 실습문제 질문 1 | student | 2017.05.07 | 1261 |
| 276 | 7장의 8번문제 1 | 궁금 | 2020.03.20 | 247 |
| 275 | 8장 연습문제 실습문제 4장 2 | student | 2017.05.08 | 2871 |
| 274 | 8장 OPEN Challlenge 질문 있습니다. 1 | 컴퓨터공학13 | 2018.05.18 | 1150 |
| 273 | 8장 실습 문제 5번 3 | 아리 | 2019.12.04 | 214 |
| 272 | 8장 실습문제 1번에 (2)번 | 알려주셔요 | 2019.10.17 | 469 |
| 271 | 8장 실습문제 2번 (2),(3) 어떻게해야하나여? 5 | 187104343 | 2018.11.08 | 380 |
| 270 | 8장 실습문제 2번에 (3)번 2 | 알려주셔요 | 2019.10.17 | 317 |
| » | 8장 실습문제 7번 5 | 은성 | 2017.04.05 | 695 |
| 268 | 8장 실습문제 8번 질문드립니다. 3 | 메론 | 2018.11.11 | 525 |
| 267 | 8장 실습문제 8번 질문이요! 4 | mmii | 2021.05.28 | 286 |
| 266 | 8장 실습문제8번 질문있습니다. 1 | 빼빼로 | 2018.11.15 | 372 |
| 265 | 8장 연습문제 8번 5 | 은성 | 2017.04.05 | 1361 |
| 264 | 8장 오픈챌린지 1 | 감자먹을래 | 2018.04.16 | 890 |
ㅋㅋ아니에요 열공하시네요!
우선 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;
}
를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
파이팅!