-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
translate 질문
21.04.08 16:00 작성 조회수 150
0
"translate("+ x값 + "px, " + Y값 +"px)";
이부분이 이해가 안가네요 ;;
왜 쌍따옴표를 저런식으로 하셨는지...
그리고 초보자를 위한 강의라고 하셨으면서...ㅠㅠ
그냥 강사님 혼자 코딩을 치시는 것 같은 느낌이 들어요;;
무음으로 해 놓고 영상만 켜놓고 수업듣는 기분입니다;;;
밑에 설명도 명확하지 않고;;
어떤 변수/ 객체가 어떤 역할을 하는지 전혀 모르겠어요;;
답변을 작성해보세요.
0
코딩일레븐
지식공유자2021.04.08
안녕하세요.
인터랙티브에 초점을 맞추다보니 기본적인 설명이 부족하기는 했습니다. 인프런 레벨이 입문 -> 기초 -> 중급 이렇게 나뉘어 있다보니 조금 애매한 부분은 있었습니다.
item.style.transform = "translate("+ x값 + "px, " + Y값 +"px)";
이 부분에 대한 설명을 드리자면 item 이라는 오브젝트에 style (css 스타일) 값을 변경해주는 겁니다.
css 였다면 item { transform : translate(100px, 100px); } 이렇게 작성을 하는데 위치가 계속 바뀌어야하니
JS 에서 그 값만 바꿔서 다시 넣어주는 겁니다.
CSS : item { transform : translate(100px, 100px); }
JS: item.style.transform = "translate(100px, 100px)";
이렇게 String (문자열) 로 입력을 해주는 거죠. "" 안에 넣으면 문자열로 처리가 됩니다.
변수를 포함해서 문자열로 사용하려니 "translate("+ x값 + "px, " + Y값 +"px)"; 이렇게 사용하게 되는 겁니다.
문자열과 넘버에 대한 설명은 여기서 보시면 잘 나와있습니다.
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Strings
_
하단의 공식 설명은 사실 어렵습니다. 완벽히 이해하고 사용할 필요는 없을 것 같고 저렇게 사용하면 부드럽게 오브젝트를 움직일 수 있다. 라는 것을 아시고 필요할 때 꺼내서 사용하시면 될 것 같습니다.
설명이 되었는지 모르겠네요. 부족한 설명은 계속 채워 넣을테니 편하게 더 질문 남겨주세요.
딥씨코더
2022.08.25
안녕하세요!!
강의 정말 재밌게 잘 듣고 있습니다.
위에 답변을 봐도 이해 안 가는 부분이 있어서 글 남깁니다.
"translate(100px, 100px)";
"translate("+ x값 + "px, " + Y값 +"px)";
여기서 100 부분이 "+ x값 +"이 되는 건 알겠는데
혹시 x값 앞 뒤로 + 는 왜 작성한 건지 궁금합니다!!!
코딩일레븐
지식공유자2022.08.25
안녕하세요
일단 위 코드에서 + x + 에서 +를 빼보시면 에러가 납니다.
문자열 + 변수 + 문자열 , 따옴표가 들어간 문자열과 변수를 합해서 문자열(STRING) 으로 만들어주는 겁니다.
let x = 190;
console.log("내 키는 " + x + "cm 입니다.")
위 코드에서 따옴표 사이에 + 가 없으면 에러가 납니다. 복사해서 확인해 보세요.
그리고 같은 기능으로 탭키 위에 있는 백틱`을 사용해도 같은 결과를 볼 수 있습니다.
let x = 100;
console.log(`내 키는 ${x}cm 입니다`);
`내용 ${ 변수명 } 내용` <- 이렇게 사용하셔도 됩니다.
`translate( ${x값}px, ${Y값}px)`
답변 1