HTML/Javascript 기초 (53) 썸네일형 리스트형 [Javascript] 이벤트 중복 실행 방지하기 확인 이벤트 제거 이벤트 한 번 실행 다음 사이트로 이동 이벤트는 사라지지않고 계속 실행할 수 있다. 하지만 한 번만 실행하고 사라지게 할 수 있는 .off(); 함수가 존재한다. 그리고 이중으로 이벤트를 넣었을 때 하나만 실행되게 하는 것은 .preventDefault(); 를 이용하여 태그에서 링크로 넘어가는 것만 실행될 수 있게 할 수 있다. [Javascript] 이벤트 단계 이벤트가 몇번째 단계에서 실행되는지 확인하는 스크립트를 작성해보자. event.eventPhase : 이벤트가 몇번째 단계에서 실행되는지 event.target : 이벤트가 어디에서 실행되는지 event.type : 이벤트가 실행된 객체의 타입 [Javascript] 이벤트 흐름 자바스크립트에서 이벤트가 실행되는 흐름은 이벤트 발생한 곳에서 단독적으로 실행되는 것이 아니라 최상위 부모 노드에서부터 자식 노드 순으로 이벤트 체크를 통해 진행된다. A1 B1 C1 A2 B2 C2 div { border : 1px solid #000; display: inline-bolck; margin-left: 25px; margin-top:25px; align-content: left; float:left; } html { width: 500px; height: 800px; border:1px solid #000; } body { width: 450px; height: 700px; margin-left: 25px; margin-top:25px; border:1px solid #000; } #A1.. [Javascript] 메뉴 페이지 만들기 실습 (feat. Javascript, jQuery) 메뉴를 클릭했을 때, 해당 설명이 나오는 페이지를 제작해보자. 1. 메뉴를 눌렀을 때 해당 설명이 나와야하고 - 스타일에 설명(content) 클래스를 지정하고 - addClass로 클래스를 추가한다. 2. 설명 뒤에 배경이 고정되어 있어야한다. - background 로 고정한다(no repeat) google facebook pinterest twitter path [Javascript] 해당 속성 변경하기 attr()을 이용하여 해당 속성을 변경할 수도 있다. 테스트 1 테스트 2 테스트 3 [Javascript] 속성 읽어오기 jQuery와 Javascript를 이용하여 해당 속성을 읽어 올 수 있다. attr을 이용하여 해당 태그의 속성을 읽어올 수 있다. 개발자가 따로 'data-이름'으로 지정한 이름들도 해당객체.data()로 속성을 읽어올 수 있다. Google Jangbogo 02-3441-1005 [Javascript/jQuery] 해당 스타일 읽어오기(feat. 자바스크립트, jQuery) 스타일 설정 방법은 크게 3가지로 나누어진다. 인라인 스타일, 내부 스타일, 외부 스타일 인라인 스타일 같은 경우 태그 선언할 떄 태그 안에 스타일을 설정해주는 것이고 내부 스타일 같은 경우에는 head 쪽에 스타일을 설정한다. 외부 스타일은 css파일을 따로 만들어서 설정한 후 해당 페이지에 link로 가져온다. 하지만 중요한 것은 자바스크립트에서는 인라인 스타일 속성만 읽어올 수 있다. 내부 스타일과 외부 스타일을 읽어오려면 window.getComputeStyle()이나 jQuery를 사용해야한다. 스타일 다루기 테스트 .content { border: 1px solid blue; text-align: center; } [Javascript] 자바스크립트 date 클래스 사용하기 자바스크립트에서는 date 함수를 이용하여 특정 날짜나 현재 날짜 또는 시간을 출력할 수 있다. 이전 1 2 3 4 5 6 7 다음
