질문이 많아서 죄송합니다..
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 | 18283 |
| 403 | 오픈챌린지 5장 | ces | 2024.04.19 | 24 |
| 402 | 책을 종이책으로 구매했는데 1 | ddd | 2024.03.21 | 105 |
| 401 | 저기 황기태 저자님 1 | 방문자 | 2024.02.10 | 150 |
| 400 | 428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3 | 아인슈페너 | 2023.11.24 | 79 |
| 399 | 연습문제 3장 5번 문제 1 | seungjun | 2023.10.26 | 130 |
| 398 | 2장 오픈챌린 | cmc | 2023.09.17 | 148 |
| 397 |
웹서버소프트웨어
1
|
park | 2023.04.15 | 199 |
| 396 | Sublime Text, VS code IDE설명 update바랍니다 1 | 삼오칠 | 2023.04.15 | 93 |
| 395 | Atom은 IDE 리스트에서 삭제해주세요. 1 | 삼오칠 | 2023.04.15 | 84 |
| 394 |
예제 2-25 <video>태그로 비디오 삽입
2
|
코딩어렵다 | 2023.04.13 | 87 |
| 393 |
예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p)
2
|
코딩어렵다 | 2023.04.12 | 54 |
| 392 | 비정형 표 만들기 다운로드 1 | 애치 | 2023.04.04 | 103 |
| 391 |
오픈챌린지 5
|
ab | 2023.02.17 | 171 |
| 390 | 오픈챌린지 1 | ab | 2023.02.16 | 140 |
| 389 | form 태그 1 | 열공이 | 2023.01.31 | 88 |
| 388 |
예제 2-21 질문입니다.
1
|
열공이 | 2022.12.23 | 117 |
| 387 |
계산기 문제 변형 문의
|
Mikael | 2022.12.13 | 56 |
| 386 | 6장 이론문제 9번 지역,전역,블록변수 질문이요. | 문신 | 2022.12.10 | 60 |
| 385 | 2장 이론 문제 답 문의 | MIKAEL | 2022.12.09 | 241 |
| 384 | 2장 이론문제 4번 답 문의 | MIKAEL | 2022.12.09 | 84 |
ㅋㅋ아니에요 열공하시네요!
우선 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;
}
를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
파이팅!