<javascript> mouseevent (onclick)

간단하게 마우스 이벤트 중 가장 보편적이고 많이 쓰인다고도 할 수 있는 바로 클릭!! 이벤트에 대해 간단한 예제로 흐름만 다뤄 볼까 한다. 박스옆에 버튼을 누르면 박스의 색이 바뀌는 아주 신기한? ㅋㅋㅋ 작업을 해볼 것이다! 두가지 방법으로 한번 정리해보겠다.. 

1. 클래스이름을 이용하여 색 바꾸기!><

2. 직접 스타일속성을 이용하여 색 바꾸기!><

 

클래스 이름을 이용해서 색깔을 바꾸는 방법은 머저 CSS에서 내가 이름을 붙이면 어떤 스타일을 줄지 미리 정해놓고 클래스 이릅을 붙여줬다 없애줬다 하면서 색깔을 바꾸는 방법이 있다.

 

See the Pen xxZOore by Sang Hoon Jeong (@DevilFront) on CodePen.

두번쨰는 직접 스타일링을 해주는 것인데 어떤게 더 편할지와 어떤 상황에서 써야할지 본인들이 생각해서 알맞은 방법을 택하면 될 것 같다.

 

See the Pen NWxrZaa by Sang Hoon Jeong (@DevilFront) on CodePen.

 

만약 다른 곳에서도 공통적으로 쓰여서 집중화가 필요하면 첫번쨰 방법을, 단순히 위의 예시처럼 하나의 블록에만 스타일을 줄거면 2번쨰 방법을 추천한당!>< 

그리고 box.style.backgroundColor = "red"; 부분에서

box["style"]["background-color"] 와  box.style["background-color"] 로도 표현이 가능하니 본인이 편하고 안 헷갈릴만한걸로 써주면 되겠다. 속성명이 text-overflow, background-color 등 "-"로 표현해줘야 하는 것들에 한해서 써주면 되겠다><