codingfarm

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 div.image-container { position: relative; } div.image-container img { position: absolute; left: 0; top: 0; width: 120px; } #btnStar..

요구사항 1. 초기시작위치 : x(left) = 50, y(top) = 200 2. 상,하,좌,우 화살표 버튼을 누를 경우 해당방향으로 50씩 이동 3. 물고기가 움직이는 영역(#panel)밖으로 넘어서면 안됨 구현 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 body { font-size: 9pt; } #panel { width: 500px; height: 500px; border: 1px solid ..

html에서 체크박스를 만드는 방법은 간단하다. 1 2 3 4 5 6 입력 cs input 타입에 "checkbox"를 넣으면 체크박스가 만들어진다. 그러면 이 기능을 jquery를 이용하여 javascript로 만들어 보자 구현 위 이미지를 체크박스로 사용하겠다. 이미지를 클릭할때마다 2개의 이미지가 각각 전환되게끔한다. 미체크상태 $\rightarrow$ 체크상태로 만드는방법 $체크박스.addClass("check"); addClass()메서드를 이용하여 노드에 크래스를 동적으로 추가할 수 있다. 체크상태 $\rightarrow$ 미체크상태로 만드는방법 $체크박스.removeClass("check"); removeClass() 메서드를 이용하면 노드에 적용된 클래스를 동적으로 제거할 수 있습니다. a..

입력받은 좌표대로 물고기를 움직이게하는 코드를 작성하시오 이때 x값은 0~500, y값은 0~300 의 범위를 가저야하며 이를 벗어날경우 "입력된 값이 너무 큽니다. 다시 입력해주세요" 라고 출력되어야 한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105 body { font-size: 9pt; } #panel { width: 600px; height: 400px; border: 1p..

1. 준비 jQuery를 사용하려면 기본적으로 아래의 2가지 세팅을 해야 한다. 1. jQuery 기능이 들어있는 라이브러리 파일을 연결한다. 2. ready()라는 jQuery 기능을 이용해 초기 시작점을 정한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 $(document).ready(function(){ //여기에 노드를 다루는 코드를 작성한다. alert("hello world"); }) lorem ipsum Colored by Color Scripter cs 위 코드를 브라우저로 열면 알림창이 뜨는것을 확인 할 수 있다. 2. jQuery를 이용한 노드 찾기 jQuery에는 수많은 노드찾기 기능을 제공한다. 우선은 가장 기초적인 방법을 배워보겠다. jQue..

jQuery란? $\bullet$ HTML 속 클라이언트 사이드 스크립트 언어를 단순화하도록 설계된 크로스 브라우징 JavaScript 라이브러리이다. $\bullet$ jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기, 이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다. 또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다. jQuery의 기능 1. DOM $\bullet$ DOM 객체의 필수 프로퍼티와 메서드 $\bullet$ 노드 추가, 삭제, 찾기, 이동시키기 $\bullet$ 스타일 추가, 수정, 값 구하기 $\bullet$ 속성 추가, 수정, 값 구하기 $\bullet$ 이벤트 등록, 제거, 발생시키기 $\bullet$ 위치, 크기와 관..