작성한 질문수 7

0

안녕하세요.

인터랙티브에 초점을 맞추다보니 기본적인 설명이 부족하기는 했습니다. 인프런 레벨이 입문 -> 기초 -> 중급 이렇게  나뉘어 있다보니 조금 애매한 부분은 있었습니다.

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

_

하단의 공식 설명은 사실 어렵습니다. 완벽히 이해하고 사용할 필요는 없을 것 같고 저렇게 사용하면 부드럽게 오브젝트를 움직일 수 있다. 라는 것을 아시고 필요할 때 꺼내서 사용하시면 될 것 같습니다.

설명이 되었는지 모르겠네요. 부족한 설명은 계속 채워 넣을테니 편하게 더 질문 남겨주세요.

let x = 190;

console.log("내 키는 " + x + "cm 입니다.")

let x = 100;

console.log(`내 키는 ${x}cm 입니다`);

`내용 ${ 변수명 } 내용` <- 이렇게 사용하셔도 됩니다.
`translate( ${x값}px, ${Y값}px)`