< Return to Video

Creating elements from scratch | Computer Programming | Khan Academy

  • 0:01 - 0:04
    이제 여러분에게
    기본적인 jQuery 사용을
  • 0:04 - 0:06
    보여드리겠습니다
  • 0:06 - 0:08
    우선 <script> 태그를 사용해서
  • 0:08 - 0:11
    jQuery 라이브러리를 넣습니다
  • 0:12 - 0:16
    이전에는 자바스크립트 코드를
    태그 안에 넣었죠
  • 0:16 - 0:20
    이번에는 src 라는 속성을
    추가해보겠습니다
  • 0:20 - 0:24
    이 속성은 URL을 넣기 위해
    필요합니다
  • 0:24 - 0:27
    URL은 뭘까요?
  • 0:27 - 0:29
    만약 제 컴퓨터에서 작업하다가
  • 0:29 - 0:30
    jQuery를 다운 받아서
  • 0:30 - 0:33
    제 웹 페이지가 있는 폴더에
    저장했다면
  • 0:33 - 0:36
    그냥 여기에 jquery.js 를
    써주면 됩니다
  • 0:36 - 0:39
    하지만 칸아카데미에서는
    동작하지 않을 겁니다
  • 0:39 - 0:43
    여기에는 jQuery를
    받을 수 있는
  • 0:43 - 0:46
    서버 URL을 적어줘야 합니다
  • 0:46 - 0:50
    jquery.com에 가면
    URL 리스트가 있습니다
  • 0:51 - 0:53
    그 중 하나를 복사해서
    여기에 넣어 보겠습니다
  • 0:53 - 0:54
    됐습니다
  • 0:54 - 0:56
    이제 이 URL에 대해 몇 가지만
  • 0:56 - 0:58
    살펴보고 갑시다
  • 0:58 - 1:02
    일단 https로 시작하는 것을
    볼 수 있습니다
  • 1:02 - 1:05
    이는 보안이 강화된
    URL임을 의미합니다
  • 1:05 - 1:09
    칸아카데미에서는
    안전하게 쓸 수 있는
  • 1:09 - 1:11
    웹 자원만 가져올 수 있습니다
  • 1:11 - 1:15
    웹 개발에서의
    좋은 관례라 할 수 있죠
  • 1:16 - 1:19
    두번째로 이 자원은
    googleapis.com 이라는
  • 1:19 - 1:22
    구글 서버에서 가져왔음을
    알 수 있습니다
  • 1:23 - 1:25
    이런 서버를 CDN이라 부릅니다
  • 1:25 - 1:28
    컨텐츠 전송 네트워크라고
    하는 것이죠
  • 1:28 - 1:30
    이 서버는 라이브러리 같이
  • 1:30 - 1:33
    정적인 파일들을
    아주 빨리 제공하는 데
  • 1:33 - 1:35
    최적화된 서버입니다
  • 1:35 - 1:38
    구글 서버는
    제가 신뢰하는 곳 중 하나입니다
  • 1:38 - 1:41
    일반적으로 스크립트를
    가져오는 서버는
  • 1:41 - 1:43
    신뢰할 수 있는 곳이어야 합니다
  • 1:43 - 1:47
    어떤 곳은 여러분의 사이트에
    나쁜 짓을 할 수도 있기 때문입니다
  • 1:47 - 1:50
    세번째로 살펴볼 것은
  • 1:50 - 1:53
    URL에 2.1.4. 라고 적힌
    버전 정보입니다
  • 1:54 - 1:56
    jQuery 라이브러리는
    계속 발전 중이어서
  • 1:56 - 1:59
    종종 새로운 버전을 내놓습니다
  • 1:59 - 2:01
    왼쪽에 있는 숫자일 수록
  • 2:01 - 2:03
    메이저 버전을 표현하고
  • 2:03 - 2:06
    오른쪽에 있는 숫자일 수록
  • 2:06 - 2:08
    마이너 버전을 나타냅니다
  • 2:08 - 2:10
    저는 jQuery 2를
    사용하고 있습니다
  • 2:10 - 2:12
    요즘 브라우저에서
    동작하는 버전이죠
  • 2:12 - 2:14
    하지만 IE8에서는
    작동하지 않습니다
  • 2:14 - 2:16
    여러분의 웹 사이트에서
  • 2:16 - 2:20
    필요사항에 따라 어떤 버전을 쓸 지
    결정할 수 있습니다
  • 2:20 - 2:23
    이제 jQuery를 포함시켰으니
  • 2:23 - 2:25
    또 다른 <script> 태그 안에서
  • 2:25 - 2:28
    실제로 사용해봅시다
  • 2:30 - 2:33
    모든 자바스크립트 라이브러리들은
    함수들이 노출돼있고
  • 2:33 - 2:35
    함수의 이름을 제공합니다
  • 2:35 - 2:37
    사용 설명서를 찾아봐서
  • 2:37 - 2:39
    함수의 이름은 무엇이며
  • 2:39 - 2:42
    어떤 일을 하는 지
    알아야 합니다
  • 2:42 - 2:45
    jQuery 라이브러리는
    메인 함수 하나를 노출하고 있는데요
  • 2:45 - 2:48
    아주 짧은 이름을 가지고 있습니다
  • 2:48 - 2:51
    바로 달러 기호이죠
  • 2:51 - 2:52
    그 말은 우리가
    제일 먼저 써야할 것은
  • 2:52 - 2:54
    바로 달러라는 거죠
  • 2:54 - 2:57
    이건 함수니까
    괄호를 쳐주고요
  • 2:57 - 2:59
    당연히 세미콜론도 찍어야겠죠
  • 2:59 - 3:02
    함수 이름이 짧아서 좋군요
  • 3:02 - 3:06
    왜냐면 이 함수를 호출할 일이
    매우 많거든요
  • 3:06 - 3:09
    이 함수에는 매우 많은 걸
    전달할 수 있습니다
  • 3:09 - 3:14
    예시로 h1이라는 문자열을
    넘겨보겠습니다
  • 3:16 - 3:20
    이걸 쓰면
    jQuery는 이 웹 페이지의
  • 3:20 - 3:23
    모든 h1 요소를 찾아줍니다
  • 3:23 - 3:28
    그리고 jQuery 콜렉션 객체로
    반환해줍니다
  • 3:28 - 3:30
    객체를 반환 받았으니
  • 3:30 - 3:33
    jQuery 객체의 메소드들을 호출함으로써
  • 3:33 - 3:37
    아까 찾은 h1 요소들을
    조작할 수 있습니다
  • 3:37 - 3:40
    예를 들면 text 함수를 사용해서
  • 3:40 - 3:43
    모든 h1 요소의
    텍스트를 바꿀 수 있습니다
  • 3:43 - 3:46
    문자열을 전달해서 말이죠
  • 3:47 - 3:48
    바뀌고 있네요
  • 3:48 - 3:50
    바뀌고 있네요
  • 3:50 - 3:51
    자 끝났습니다
  • 3:51 - 3:53
    첫 jQuery 맛보기였습니다
  • 3:53 - 3:57
    <script> 태그에 jQuery 라이브러리를
    포함시키고
  • 3:57 - 4:00
    jQuery에게 모든 h1 태그를 찾게 한 다음
  • 4:00 - 4:04
    텍스트를 바꿔 보았습니다
  • 4:04 - 4:06
    이 수업을 계속 들으면
    매우 많은 것들을
  • 4:06 - 4:08
    더 자세하게
    배울 수 있을 겁니다
  • 4:08 - 4:11
    요소를 선택하고 조작하는
    다양한 방법과
  • 4:11 - 4:14
    사용자 이벤트에 반응하는 웹 페이지와
  • 4:14 - 4:19
    재미있는 애니메이션 효과들도
    배울 수 있을 겁니다
Title:
Creating elements from scratch | Computer Programming | Khan Academy
Description:
more » « less
Video Language:
English
Team:
Khan Academy
Duration:
04:19

Korean subtitles

Revisions

Our website uses cookies for analysis purposes.