흠..

Question

2:34초 쯤에 ballElem.style.transform = 'translate( )'; 이전에 style 객체는 css를 관장하는 객체이라고 하셔서 이 뒤에 background-color도 들어올 수 있고 지금 처럼 transform이 들어올 수 있다는 것은 알겠어요. 그런데 translate( ) 괄호안에서 0px, 0px을 분리해서 ' + 0 + ' +px, 이렇게 분리하는게 더 보기 편한데 'px이게 하나의 문자처럼 보이고 헷갈리네요. 왜 이 아이는 '랑 붙여줬나요? 강의에서는 문자열을 분리했다고 했는데 문자열이 ' ' 안에 들어가는 아이인거고 조금 자세하게 설명 부탁드려요.. 그리고 구지 +로 나눠줘야하는 이유가 있을까요? 그냥 (e.clientX, e.clientY)로 넣어주면 안되나..

1분코딩 · Answer

ballElem.style.transform = `translate( ${e.clientX} px, ${e.clientY} px)`;  이렇게 변수 부분만 ${} 안에 넣어주세요~

1분코딩 · Answer

px은 변수가 아니라 문자열이기 때문에 언급하신 ' + 0 + ' +px, 이런 식의 표기는 문법 오류가 납니다. 문자열이기 때문에 따옴표로 묶어서 표현해주어야 하는 것이지요~ 예를 들어, 숫자 100 과 문자열 px 를 연결한다고 한다면 변수(또는 수) + '문자' 100  +  'px' 이렇게 +로 연결해 주었다고 생각하면 됩니다. 또는 ES6의 템플릿 문자열 형태로, 따옴표 대신 백틱(`)을 사용해서 `${ 100 }px` 이런 식으로 할 수도 있고요. 변수나 숫자값만 ${}안에 넣으면 됩니다. 다만 이 방식은 IE는 지원하지 않고요. transform의 translate는 CSS 규칙상 단위가 함께 들어가야하기 때문에 translate (e.clientX, e.clientY) 처럼 표시하면 동작하지 않습니다.