Step02_example1,2 (변수 연산, if, CamelCase)

 

다음은 배운 것들을 활용한 예제이다

2022.07.07 - [javascript] - Step02_event3

 

여기서 count 값을 미리 let으로 정의해두고 addEventListener을 작성한 것을 알 수 있다. 이후 count+"px" 연결연산을 활용하여 클릭시 변경하여 작동하게 만들었다.

 

 

전 예제와 같은 방식으로 이번엔 img에 margin을 사용하여 클릭시 이동하는 것처럼 보이게 만들었다.

 

if 문을 활용하여 0이 아닐때만 동작하게 했다. 그림의 margin값이 음수가 나와서 안보이는 곳으로 이동하는 것을 막은 것이다.

 

 

 

*여러 속성을 문자로 만드는 형식

 

kebab-case

move-right-bottom

 

snake_case

move_right_bottom

 

CamelCase

MoveRightBottom