HTML/Javascript 기초 (53) 썸네일형 리스트형 [Javascript] offsetParent 사용하기 css의 position 사용법 (1) static - 모든 태그가 처음에 static 으로 설정됨(기본값) - 태그의 위치는 소스에 표시된 순서에 따라서 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. (2) relative - static 모드에서 표시된 위치에서 자리를 변경하고자 할 때 사용 - 사용하는 옵션 > top, right, bottom, left 속성을 사용해서 위치 조절 (3) absolute - static 속성을 가지고 있지 않은 부모를 기준으로 위치를 설정 - position 속성이 relative, static, fixed인 태그가 없으면 가장 위의 body를 기준으로 위치 설정 (4) - 스크롤이 되더라도 그 자리에 고정되는 position offsetParent를 이용하여 부모 좌표.. [Javascript] 마우스엔터, 마우스리브 .mouseenter()/ .mouseleave() 마우스 커서가 노드에 들어 오거나 노드 밖으로 나가면 발생하는 이벤트. 자식 노드에는 이벤트가 발생하지 않는다. 자식 노드는 부모 노드의 일부분으로 처리되는 점이 mouseover, mouseout과 차이점이다. 여기에 이벤트 정보 출력 parent [Javascript] 마우스오버와 마우스아웃 .mousemover(), .mouseout() 마우스 커서가 노드에 들어 오거나 노드 밖으로 나가면 발생하는 이벤트. 자식 노드도 독립적인 노드로 처리된다. 여기에 이벤트 정보 출력 parent 이번에는 animate를 이용하여 mouseover()/ mouseout()을 알아보자 여기에 이벤트 정보 출력 parent animate를 통해 mouseover와 mouseout을 알아봤다. [Javascript] 사용자 정의 이벤트 menu1 menu2 menu3 menu4 출력 이벤트로 메뉴를 추가할 때 텍스트로 표현할 수 있게 설정하였다. [Javascript] 버블링 기초 - 2 이벤트로 노드를 추가할 때 추가된 노드는 이벤트 등록이 안된다. 그것을 버블링을 이용하여 해결해보자. menu1 menu2 menu3 menu4 [Javascript] 버블링 기초 - 1 li 요소의 클릭처리를 버블링을 이용하여 실행한다. menu1 menu2 menu3 menu4 [Javascript] 이벤트 방해하기 태그에 이벤트를 설정한다. 태그 안에 선언된 태그에 이벤트를 설정한다. 이 때, 태그 이벤트를 실행시키면 태그 이벤트까지 실행된다. 그걸 방지하기 위해 stopPropagation();함수를 사용해서 부모노드에 있는 이벤트가 실행이 되지 않게 설정한다. 클릭해 주세요 [Javascript] 이벤트 제한하기 이벤트가 실행되는 것을 특정 조건에 맞춰서 진행할 수 있다. 이름을 소문자로 입력해주세요. 해당 텍스트창에 소문자만 입력(사실 대문자만 입력이 안되는) 프로그램을 작성을 했다. 대문자가 입력되려고하면 팝업창으로 제한을 알려주는 문구가 뜬다. 이전 1 2 3 4 5 6 7 다음
