질문이 많아서 죄송합니다..
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 | 18276 |
| 263 | 6장 실습 8번 1 | 어려워 | 2018.12.18 | 836 |
| 262 | 7장 오픈챌린지 1 | 질문이요 | 2018.12.18 | 343 |
| 261 | 7장 10번 | 트레비 | 2018.12.18 | 321 |
| 260 | 7장 2번 | 무지 | 2018.12.18 | 319 |
| 259 | 자바스크립트의 컴파일오류 2 | 1234 | 2018.12.22 | 1847 |
| 258 | 실습문제답도 제공이 안되는 건가요? 2 | 아침이 | 2019.01.07 | 311 |
| 257 | 몽구스 질문있습니다 ㅜㅜ 3 | 몽구스초보입니다 | 2019.01.10 | 1003 |
| 256 | 예제 13-02 2 | 성북동 뽀글이 | 2019.01.22 | 146 |
| 255 | 살다 살다 답을 반쪽만 주는 책은 처음입니다 1 | 음음 | 2019.01.24 | 8847 |
| 254 |
마우스오버기능 이용해서 플레이되는 오디오 제작중인데요
1
|
성북동뽀글이 | 2019.01.25 | 292 |
| 253 | 5장 연습문제 질문 1 | 5장 연습문제 질문 | 2019.04.05 | 1509 |
| 252 | 이거 오타인가요? 1 | HTML5 | 2019.04.11 | 212 |
| 251 | 5단원 실습 6-2번 질문합니다 2 | 공부해염 | 2019.04.13 | 222 |
| 250 | 4장 6번문제 물어볼려고합니다 1 | 배재한 | 2019.04.16 | 566 |
| 249 | 궁금한게 있어요 | 마맘마 | 2019.04.19 | 183 |
| 248 | 명품 html5+css3책과 HTML의 차이가 궁금합니다 저자님 2 | 보안 | 2019.05.03 | 328 |
| 247 | 10장 이론문제 10번 질문입니다. 3 | 하늘하 | 2019.05.15 | 849 |
| 246 | 실습문제 7장 2번의 입력된 반대순으로 출력이 넘 힘듭니다 도움좀 주세요 제발 ㅠㅠ | 도널드임 | 2019.05.27 | 1105 |
| 245 | <li> 1 | 랄라 | 2019.05.29 | 69 |
| 244 | 1장 1 | ㅇㄹㅇㄹ | 2019.06.07 | 232 |
ㅋㅋ아니에요 열공하시네요!
우선 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;
}
를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
파이팅!