Inflearn Community Q&A
asked
흠..
Written on
·
251
0
2:34초 쯤에
ballElem.style.transform = 'translate( )';
이전에 style 객체는 css를 관장하는 객체이라고 하셔서
이 뒤에 background-color도 들어올 수 있고
지금 처럼 transform이 들어올 수 있다는 것은 알겠어요.
그런데 translate( ) 괄호안에서
0px, 0px을 분리해서
' + 0 + ' +px, 이렇게 분리하는게 더 보기 편한데
'px이게 하나의 문자처럼 보이고 헷갈리네요.
왜 이 아이는 '랑 붙여줬나요?
강의에서는 문자열을 분리했다고 했는데
문자열이 ' ' 안에 들어가는 아이인거고
조금 자세하게 설명 부탁드려요..
그리고 구지 +로 나눠줘야하는 이유가 있을까요?
그냥 (e.clientX, e.clientY)로 넣어주면 안되나..
Answer 2
1
ballElem.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`;
이렇게 변수 부분만 ${} 안에 넣어주세요~
1
px은 변수가 아니라 문자열이기 때문에
언급하신 ' + 0 + ' +px, 이런 식의 표기는 문법 오류가 납니다.
문자열이기 때문에 따옴표로 묶어서 표현해주어야 하는 것이지요~
예를 들어, 숫자 100과 문자열 px를 연결한다고 한다면
변수(또는 수) + '문자'
100 + 'px'
이렇게 +로 연결해 주었다고 생각하면 됩니다.
또는 ES6의 템플릿 문자열 형태로, 따옴표 대신 백틱(`)을 사용해서
`${100}px`
이런 식으로 할 수도 있고요. 변수나 숫자값만 ${}안에 넣으면 됩니다.
다만 이 방식은 IE는 지원하지 않고요.
transform의 translate는 CSS 규칙상 단위가 함께 들어가야하기 때문에
translate(e.clientX, e.clientY) 처럼 표시하면 동작하지 않습니다.
그럼 말씀하신대로 하면
ballElem.style.transform = 'translate(' + e.clientX +'px, ' + e.clientY + 'px)';를
ballElem.style.transform = translate`${ e.clientX, e.clientY}`; 이렇게 쓰면 되나요?