메뉴 건너뛰기

2017.04.05 20:17

8장 실습문제 7번

조회 수 695 댓글 5

질문이 많아서 죄송합니다..

 

 

 

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; 코드를 넣어둔 이유가 뭘까요 ?

 

 

?
  • profile
    관리자 2017.04.05 21:07

    ㅋㅋ아니에요 열공하시네요!

    우선 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;
    }

    를 추가하셔서 결과를 확인해보시면 좀더 직관적으로 이해가 가능할 것 같습니다.
    파이팅!

  • ?
    은성 2017.04.05 23:10
    와 감사합니다!!
    확실히 눈으로 확인을 해보니까 이해가 되네요!
    나머지 값을 왜 대입시키는가 했는데
    내부적인 부분을 고려하지 못했습니다 ㅎㅎ..
    덕분에 쉽게이해했습니다!
  • ?
    . 2020.06.12 17:38
    혹시 n+=90이 무슨의미인가요? n=90으로 하면 실행이 되지 않아서요..
  • ?
    김사영 2020.06.12 18:21
    각도를 표현하는 'n'값에 90deg를 더한 값을 다시 대입하는 겁니다. 즉, 이미지의 회전 각도를 저장하고 있는 변수에 다음 회전할 각도를 저장하는 코드인거죠
  • ?
    성인 2021.11.05 01:21
    위의 문제에서 궁금한 점이 있는데 rotate(" + n + "deg)안에 " +n+의 의미가 무엇인지 궁금합니다.

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다. file 관리자 2017.06.21 18177
262 예제 9-18번 질문 1 초보 2020.06.21 84
261 선 색 변경이 안됩니다 1 모르겠어요 2020.06.19 196
260 11장 실습문제 4번 1 웹프 2020.06.17 456
259 궁금한점이 있습니다. 1 hayio 2020.06.17 80
258 11장 실습문제 7번 응용 ㅇㅇ 2020.06.16 154
257 6장 오픈챌린지 1 이민수 2020.06.15 232
256 6장4번 1 이민수 2020.06.15 129
255 6장 7번 1 이민수 2020.06.15 198
254 6장 7번 좀 알려주세요 ㅜㅜ 1 어려워여 2020.06.15 583
253 예제 7-6 에서 응용을 하고 싶어서 여쭙고 싶습니다. 1 file 배우고 익히는 초심자 2020.06.14 242
252 13-7 예제 1 궁금이 2020.06.14 146
251 선생님 재질문 드립니다. 1 file 입문한 사람 2020.06.12 150
250 12장 연습문제 4번 HTML 요청 1 file 윤세아 2020.06.10 641
249 setTimeout 질문드립니다. 3 file 웹프공부중 2020.06.09 126
248 스크립트에서 document.write로 표 만들기 질문드립니다. 1 file 입문한 사람 2020.06.08 1104
247 실습문제 1 키보드 향기 2020.06.07 120
246 6단원 실습문제 관련 질문합니다. 1 질문 2020.06.06 110
245 예제 6-24관련 질문드립니다. 3 초보 2020.06.05 67
244 질문드립니다. 1 ㅇㅇ 2020.06.03 306
243 7장 실습문제 8번에서 질문입니다 1 JAVAscript공부중이에요 2020.05.27 403
목록
Board Pagination Prev 1 ... 3 4 5 6 7 8 9 10 11 12 ... 21 Next
/ 21
위로