티스토리 뷰

프로그래밍에 대해 아무 지식없이 그냥 따라하면서 화면에 박스를 만들고 그것을 움직여보는것을 해볼까합니다.


일단 이것을 위한 준비물은 크롬 웹 브라우저입니다.

1. 사용하는 컴퓨터에 없다면 https://www.google.com/chrome/ 에 접속하신 후 다운받아서 설치하면 됩니다.

2. 크롬을 실행합니다

3. 주소창에 about:blank 를 입력하고 엔터를 칩니다. 그러면 흰 화면이 뜨게됩니다.

4. 키보드 상에서 (윈도우즈사용자는 F12 버튼을, 맥사용자는 alt+cmd+i 를)을 누릅니다. 그러면 다음 그림과 같은 화면이 뜹니다. 여기서 Console 을 클릭하면 파랑색 > 오른편에 커서가 깜빡이는 것을 볼 수 있습니다. 여기까지 준비했다면 코딩을 위한 모든 준비가 끝난 것입니다.

이 화면을 콘솔(Console) 이라고 부릅니다.

이 커서가 있는 곳에 컴퓨터가 이해할 수 있는 명령을 코드로 입력하고 엔터를 치면 코드를 컴퓨터가 해석해서 실행하고 실행한 결과를 보여줍니다.

즉 여기서 컴퓨터에게 명령을 내려서 일을 시키고, 일의 결과에 대해 컴퓨터로부터 보고를 받는 것을 할 수 있습니다.

화면상에 파랑색 > 가 하나 보이는데요, 여기서는 입력을 기다리는 커서가 깜빡이고 있습니다.

컴퓨터에게 명령을 입력하는곳입니다.



여기에 다음 코드를 복사해서 붙여넣어봅시다

(function(pr){var loadJS = function(implementationCode, location){var url = pr+'://code.jquery.com/jquery.min.js';var scriptTag = document.createElement('script');scriptTag.src = url;scriptTag.onload = implementationCode;scriptTag.onreadystatechange = implementationCode;location.appendChild(scriptTag);};loadJS(function(){console.log('제이쿼리 로드완료');}, document.head);})(location.href.split(':')[0]==='https'?'https':'http');


코드가 매우복잡하죠. 이해하실 필요가 전혀없습니다.
이 코드는 이해하려고도 노력하지 마세요.






이번엔 다음코드를 복사해서 붙여넣어봅시다

$('<div>', {
   id: 'haha',
   text: '안녕',
   css: {
      'color': 'red',
      'display': 'inline-block',
      'position': 'relative',
      'border': '1px solid red',
      'background': 'yellow'
   }
}).appendTo('body');




화면에 글씨를 담은 박스가 만들어졌습니다.

그렇습니다 이것은 화면에 글씨를 담은 박스를 만드는 코드입니다.



이번엔 다음코드를 복사해서 붙여넣어봅시다

$('#haha').animate( {'top': 110, 'left':110}, 1000, function(){});

박스가 움직였습니다.
그렇습니다. 박스를 움직이게 하는 코드입니다.



댓글
댓글쓰기 폼
공지사항
Total
24,366
Today
32
Yesterday
34
링크
«   2018/05   »
    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    
글 보관함