질문이 많아서 죄송합니다..
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 | 18237 |
| 223 | 3장 실습문제 5번문제에 대해 질문이있습니다. 1 | CHUL | 2020.04.09 | 221 |
| 222 |
비정형 표 질문
|
ㅇㅇ | 2020.04.08 | 192 |
| 221 |
; 가 쓰일 때를 여쭙고 싶습니다
2
|
입문한 사람 | 2020.04.07 | 141 |
| 220 | 따옴표를 4중 5중으로 사용하는 방법에 대해 여쭙고 싶습니다. | 입문한 사람 | 2020.04.07 | 40 |
| 219 | SRC와 SRDOC의 차이를 여쭙고 싶습니다. | 입문한 사람 | 2020.04.07 | 48 |
| 218 |
선생님 정말 고맙습니다 재질문도 드리고 싶습니다
|
입문한 사람 | 2020.04.07 | 137 |
| 217 | 표와 div span 4 | 키보드 향기 | 2020.04.05 | 108 |
| 216 |
목록을 한줄로 나란하게 만드는 법 질문드립니다
3
|
입문한 사람 | 2020.04.04 | 260 |
| 215 |
div 와 pre 중에서 어떤 게 더 상위에 위치하나요?
1
|
입문한사람 | 2020.04.03 | 751 |
| 214 |
코드 잘못된 부분을 봐주시면 정말 감사하겠습니다
1
|
입문한 사람 | 2020.04.01 | 607 |
| 213 | ; 에 대해 질문드립니다 1 | 입문한 사람 | 2020.04.01 | 85 |
| 212 | 2장 오픈 챌린지 웹페이지 음악연주 질문있습니다. 1 | 초보자 | 2020.03.29 | 195 |
| 211 | 한글html 1 | 키보드 향기 | 2020.03.29 | 919 |
| 210 | 예제 2-21 1 | Daisy | 2020.03.28 | 237 |
| 209 | 7장의 8번문제 1 | 궁금 | 2020.03.20 | 247 |
| 208 | 71page 1 | 아리송 | 2020.03.07 | 77 |
| 207 | 1장 test1, 2, 3 파일 2 | 열공중 | 2020.03.07 | 539 |
| 206 | html에 css작성할때 2 | 궁금이 | 2020.03.03 | 353 |
| 205 | 61 page 실습문제 1번 오류찾기 2 | 궁금이 | 2020.02.15 | 1757 |
| 204 | 한글 타이틀이 깨져 보입니다. 1 | 안스가리오 | 2020.01.06 | 116 |
ㅋㅋ아니에요 열공하시네요!
우선 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;
}
를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
파이팅!