• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

translate 질문

21.04.08 16:00 작성 조회수 144

0

"translate("+ x값 + "px, " + Y값 +"px)";

이부분이 이해가 안가네요 ;;

왜 쌍따옴표를 저런식으로 하셨는지...

그리고 초보자를 위한 강의라고 하셨으면서...ㅠㅠ

그냥 강사님 혼자 코딩을 치시는 것 같은 느낌이 들어요;;

무음으로 해 놓고 영상만 켜놓고 수업듣는 기분입니다;;;

밑에 설명도 명확하지 않고;;

어떤 변수/ 객체가 어떤 역할을 하는지 전혀 모르겠어요;;

course-thumbnail

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

transform, translate 값 변경

강의실 바로가기

답변 1

답변을 작성해보세요.

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)`

이 글과 비슷한 Q&A