이번의 목표 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. 실..

이번의 목표 01. onclick 이벤트를 사용하여 의 src를 변경해보자. 지난 시간까지는 , , 등의 태그의 출력값을 바꾸는 것을 연습했습니다. 이번에는 이벤트를 활용하여 이미지를 클릭했을 때, 이미지가 변경되는 것을 연습해보겠습니다. 태그는 텍스트가 없고 src 속성을 이용해 이미지의 주소를 받아와서 출력합니다. 때문에 이미지를 바꾸기 위해서는 src 속성을 변경할 이미지의 주소로 변경해주어야 합니다. 예제로 사용할 이미지는 임의로 아무거나 사용하셔도 좋습니다. 01. 코드 02. 실행 화면 01. 코드 02. 실행 화면 ① 이미지를 클릭하기 전의 이미지 ② 이미지를 클릭한 후의 이미지

이번의 목표 01. onBlur 를 사용해보자 02. ID하나로 다수의 객체의 값을 바꿀 수 있을지 알아보자 onBlur 를 사용하면 객체가 포커스를 잃었을 때에 이벤트가 작동합니다. 마우스로 다른 객체를 클릭하거나, TAB을 누르거나, ENTER를 눌러서 포커스가 변경되는 경우가 그 예시입니다. 그리고 코드를 작성하며 제가 범했던 오류 한가지를 알아볼 것입니다. span, p, div, label의 id를 같게하여 하나의 함수안에서 id를 통해 값을 모두 바꾸고자 했습니다. 하지만 값이 변경 되는것은 가장 첫번째로 위치한 객체의 값만 변경되어 혼란을 겪었습니다. 이를 해결하고자 각각의 객체에 id를 다르게 했고, 각각의 값을 바꿔주는 방법으로 하여 해결할 수 있었습니다. 글로는 설명이 장황하니 코드를 ..