이번의 목표 01. onmousup/onmousedown 을 이용하여 이미지를 바꿔보자. 지난 시간엔 onmouseup/onmousdown으로 글을 바꾸는 것을 해봤습니다. 이번엔 이미지를 바꾸는 것을 해보겠습니다. 이미지는 임의로 하셔도 좋습니다. 01. 코드 02. 실행 화면 01. 코드 Click mouse and hold down! 02. 실행 화면 ① 클릭을 하지 않고 있는 상태와 클릭하고 있을 때의 이미지가 다른 것을 확인할 수 있습니다.

이번의 목표 01. onmousdown/onmouseup 을 사용해보자. 지난 시간엔 마우스를 객체에 올릴때와 객체에서 나왔을 때에 작동하는 이벤트를 알아봤습니다. 이번시간엔 객체를 마우스로 클릭하고 있을 때, 클릭을 풀었을 때 작동하는 이벤트를 알아보겠습니다. onmousedown는 마우스를 클릭하고 있을 때 작동하는 이벤트입니다. onmouseup 은 마우스 클릭을 풀었을 때 작동하는 이벤트입니다. 01. 코드 02. 실행 화면 01. 코드 클릭하세요. 02. 실행 화면 See the Pen Untitled by woojw6012 (@SpookeyTed) on CodePen. ① 마우스를 클릭하면 값이 "마우스 버튼을 누르고 있어요" 로 바뀌는 것을 확인할 수 있습니다. ② 마우스 클릭을 해제하면 값..

이번의 목표 01. 에 onmouseover/onmouseout 를 사용해보자. 02. 에도 사용해보고 비교해보자. 은 길이를 조절하지 않으면 한줄을 전부 사용합니다. 은 길이를 조절하지 않으면 요소만큼만 사용합니다. 이러한 특징 때문에 div와 span에 onmouseover/onmouseout, onmouseenter/onmouseleave를 사용 했을 때 약간의 차이점이 있습니다. div에서는 같은줄에 마우스를 올리면 이벤트가 작동하지만, span에서는 객체에 마우스를 올려야만 이벤트가 작동합니다. 01. 코드 02. 실행 화면 01. 코드 div에 사용한 예제 Mouse Over span에 사용한 예제 Mouse Over 02. 실행 화면 See the Pen Untitled by woojw601..

이번의 목표 01. onmouseover/onmouse out 에 대해 알아보자 02. onmouseenter/onmouseleave 에 대해 알아보자. 마우스를 올렸을때, 마우스가 나왔을 때 작동하는 이벤트는 각각 두개씩 존재합니다. 마우스를 올릴 때에는 onmouseover과 onmouseenter가 있습니다. 마우스가 나왔을 때에는 onmouseout과 onmouseleave가 있습니다. 그리고 위의 네가지를 다른 기준으로 나누자면 내부 요소와의 관계로 구분할 수 있습니다. 내부 요소에도 영향을 끼치는 것은 onmouseenter/onmouseleave 입니다. 내부 요소에는 영향을 끼치지 않는 것은 onmouseover/onmouseout 입니다. 어떻게 구분짓고 기억하는게 편한지는 개인의 차이가..

이번의 목표 01. JS를 이용하여 폰트의 스타일을 변경해보자. 지난 시간까지는 객체들의 값들을 변경하는 것을 연습해봤습니다. 이번에는 스타일을 변경하는 것을 해보겠습니다. 스타일을 변경하는 코드의 예시는 아래와 같습니다. document.getElementById("객체ID").style 위의 코드 뒤에 color, fontsize, fontstyle 등을 이용하여 스타일을 바꿀 수 있습니다. 스타일의 더 다양한 기능들이 많으니 필요하다면 찾아서 바꿔보는 것도 좋겠습니다. 01. 코드 02. 실행 화면 01. 코드 문서 객체 스타일 변경하기 02. 실행 화면 ① 텍스트 스타일을 변경할 때에는 color, fontsize, fontstyle이 변경되는 것을 확인할 수 있습니다. ② 텍스트를 숨기면 vis..

이번의 목표 01. onchange 에 대해 알아보자. 02. onchange 와 onBlur 의 차이점에 대해 알아보자 onchange는 객체의 값이 변경되고 포커스를 잃었을 때에 작동하는 이벤트 입니다. 입력한 값이 변경되지 않고 포커스만 잃었을 때에는 작동하지 않습니다. 기능 설명으로만 봤을때에 onchange는 언뜻 onBlur와 기능적으로 차이를 느끼지 못할 수 도있습니다. onBlur는 포커스를 잃은 모든 시점에 이벤트가 작동합니다. 값의 변경이 없어도 작동 합니다. 하지만 onchange는 값이 변경되지 않았다면 포커스를 잃어도 작동하지 않습니다. 01. 코드 02. 실행 화면 01. 코드 onchange 의 사용 예제 onBlur 의 사용 예제 . onchange와 비교해봅시다. 02. 실..