sw 보관소: 6월 2014

2014년 6월 14일 토요일

4장 무언가 만들어보기

4장은 123에서 공부한 것을 기초로 응용해서 만들어보는 장이다
거의 책의 절반에 해당하는 내용이라 이곳에 다 적는것은 나의 귀차니즘을 자극한다(-_-);
소스코드를 보면 거의 다 이해가 가기 때문에(진짜?) 이곳에서는 어떤 것에 어떤 것을 썼는지만 쓰도록 하겠다.
역시 책을 사서 보는게 가장 좋다....;;
소스코드 다운 받는 곳은 http://www.jpub.kr/ 에서 '머리에 쏙쏙 들어오는 JQuery 입문'을
클릭하면 소스코드를 다운 받을수 있다.

1. 롤 오버 - 메뉴에서 마우스를 올리면 이미지가 바뀌는 예제

대략적인 구조
-img 요소의 src 속성이 변화하면 새롭게 지정된 이미지를 읽어서 이를 화면의 결과로 반영
-이미지 2개 준비
-hover 이벤트를 사용

2. 텍스트 입력 필드의 가이드 텍스트 - 텍스트박스에 회색 글씨로 가이드 글이 쓰여 있는 것

대략적인 구조
- 텍스트 입력 필드에 입력된 값은 input 요소의 value 속성의 값에 반영된다.
- focus/blur 이벤트를 사용
- 포커스 되었을 때 value = "" 사용
- 단, 사용자가 입력했는데 마우스 포커스 했다고 지워지면 안됨 if문으로 막을 것

3. 아코디언 - 처음에는 여러 메뉴가 닫혀있고, 선택을 하면 선택한 메뉴만 열리는데 다른 메뉴를 선택하면 열려 있던 다른 메뉴는 닫힘

대략적인 구조
- 우선 모든 것을 닫는다
- 어딘가 하나의 섹션이 클릭되면
- 일단 모든 섹션을 닫는다
- 그리고 클릭된 섹션을 연다
- 열었을 때와 닫았을 때 이벤트를 각각 2개씩 만든다
- 이미 클릭되어 열려 있는 메뉴에 마우스의 커서 모양을 바꾼다.
- next 메소드
- 자바스크립트가 off일 때

4. 외부 파일에서 테이블 만들기

대략적인 구조
- 외부 파일을 취득
- 파일 속에 적혀 있는 데이터를 바탕을 요소를 만들고
- 파일 수만큼 표시
- JSON, getJSON 메서드, 배열, each와 $.each, 객체 사용

5. 슬라이드 쇼 - 이미지가 3초마다 자동으로 바뀜

대략적인 구조
- 3초간 기다린다
- 첫 img 요소를 페이드 아웃, 맨 뒤로 이동 시킨다
- 두 번째 img요소를 페이드 인 시킨다
- 요소를 검색하는 eq 메소드
- setInterval 을 가지고 정기적으로 처리 실행하기

6. 탭 콘텐츠 - 해당 탭을 클릭하면 해당 탭의 콘텐츠만 보여주기

대략적인 구조
- 아코디언과 비슷한 구조
- 처음에는 선두 이외의 패널은 숨겨져 있다.
- 탭을 클릭하면 현재 패널은 숨김
- 클릭된 현재 패널을 표시
- 요소를 검색하여 추출하는 filter 메소드 사용
- 이벤트와 preventDefault 사용

7. 툴팁 - 마우스 포인터가 위치하면 작은 프레임으로 자세한 내용을 보여주는 구조

대략적인 구조
- 평소에는 숨겨져 있음
- 마우스를 오보 하면 풍선 도움말이 뜸
- mousemove 이벤트
- 이벤트 객체
- 마우스 좌표를 읽어서 해당하는 좌표에 오면
- 마우스 옆에 미리 준비해 둔 텍스트를 표시해준다.
- 마우스가 그냥 지나가는 것 일수도 있기에 마우스 정지 0.2초 뒤에 표시

정말 대충대충 적은 것 같다 ㅡㅡ;;
그야말로 대략적인 구조만 적은 것이다.
소스코드를 다운받아 보면 이해하기 쉽다.
원래 5장은 플러그인인데 이 부분은 기재하지 않도록 하겠다.
회사마다 사용하는 플러그인이 다르기에 이 곳에 적는 것은 별 의미가 없다고 생각한다.
(절대 귀찮아서가 아니다 ㅡㅡ;;)
그럼 초간단 제이쿼리 복습(?)을 끝낸다.

2014년 6월 13일 금요일

3.1장 이벤트 / 정리

이벤트가 뭘까?? 개업을 하면 이벤트 업체에서 이벤트 하는데 그런 이벤트인가??
흠.... 넓은 의미로 보면 맞는거 같기도하고...;;

이벤트를 쉽게 설명하자면 이런 것이다.
면접자가 면접을 갔는데, 면접관이 당신의 이름을 부르면 네~! 라고 대답하지 않겠는가?
여기서 면접관이 당신을 부르는 행위(?) 이것이 이벤트다.

사용자가 어떤 행위를 했을 때만 작동하는 것을 이벤트라 한다.
대표적인 것이 마우스 클릭 이벤트가 되겠다. 4가지 이벤트를 살펴보자.
역시 이부분도 소스 코드를 보고 따라 해보는 것이 좋다.

1. click - 클릭 되었을 때

jQueryObject.click(이벤트 핸들러);

$('#me').click(function()) {
$('#me').text('클릭되었습니다.');
});

2. mouseenter/mouseleave - 마우스 포인터가 위에 있을 때/벗어났을 때

jQueryObject.mouseenter(이벤트 핸들러);
jQueryObject.mouseleave(이벤트 핸들러);

$(function(){
$('#div1').mouseenter(function()){
$('#div1').text('마우스 포인터가 위에 있습니다.');
});
$('#div1').mouseleave(function()){
$('#div1').text('마우스 포인터가 벗어났습니다.');
});
});

3. hover - mouseenter와 mouseleave를 한꺼번에

jQueryObject.hover(mouseenter이벤트 핸들러 ,mouseleave이벤트 핸들러);

$(function(){
$('#div1').hover(function()) {
$('#div1').text('마우스 포인터가 위에 있습니다.');
}, function() { //콤마에 주의 하자
$('#div1').text('마우스 포인터가 벗어났습니다.');
});
});

4. focus/blur - 포커스를 얻었을 때 / 벗어났을 때

jQueryObject.focus(이벤트 핸들러);

jQueryObject.blur(이벤트 핸들러);

$(function(){
$('#div1').focus(function()){
$('#input1').addClass('active');
});
$('#div1').blur(function()){
$('#input1').removeClass('active');
});
});

이벤트와 This

이벤트를 사용함에 있어서 중요 사항이 있다.

이벤트 핸들러 안에는 this라는 변수를 사용할 수 있다.

어떤 경우에 this를 사용할까?

클릭 이벤트에서 같은 결과가 나와야 하는 경우를 생각해보자.

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

</head>

<body>

</body>

</html>

이런 HTML 이 있고,

$(function(){

var elements = $('.clickTest');

elements.click(function(){

elements.text('클릭되었습니다');

});

이런 스크립트가 있다고 해보자.

위의 소스의 경우에는 하나를 클릭해도 전부 바뀐다.

이런 비극을 막기 위해서는 뭐 각자 고유 ID를 부여하는 것도 한 방법이지만...

만약 클릭해야할 곳이 100개 1000개라면??

각자 다른 이름을 지어줄텐가?? 그럼 상사에게 욕을 시원하게 먹을 것이다.

이때 필요한게 this다.

클릭하는 바로 그 놈(this)만 인식할 때 쓰는거다.

쓰는법은 다음과 같다.

$(function(){

$('.clickTest').click(function(){

$(this).text('클릭되었습니다');

});

each 메소드 - 각각에 대하여 처리하기

소스 코드를 보자. <body> 부분만 따왔다.

<body>

<div class="animal">turtle</div>

<div class="animal">tiger</div>

</body>

$(function(){

$('.animal').each(function(){

var name = $(this).text();

alert(name);

});

위의 소스를 실행하면 같은 다이얼 로그가 4번 표시 된다.

스크립트에 위치한 this는 이벤트가 발생한 요소가 아니라 [현재 처리 중인 요소]를 뜻한다.

어휴~ 3장은 워낙 내용이 많아서 2개로 나누어서 정말 요약만 한거 같다 ㅡㅡ;;

자세한 것은 역시 책을 보는 것을 강추한다 ㅎㅎ;;

4장에서는 실제로 뭔가를 만들어 볼까한다.

앞에 내용을 집약(?)해서 만들어 보는 것이니 길어질 가능성이 농후하다.

그럼 3장 진짜 끝~!

2014년 6월 12일 목요일

3장 그것에 무언가를 하기 (기본 그 두번째)

이번 장은 메소드와 몇몇 변화시키는 것들을 나열해볼려고 한다.
2장에서는 무언가를 가져오기로 원본을 가져오는 것을 알았다.
3장은 가져온 원본은 다르게 변화시키는 법이다.
내용이 기니 여기에 다 쓸 순 없고, 쓰는 법과 명령어 정도만 나열하겠다.
소스는 http://www.jpub.kr/ 에서 다운 받으면 된다.
소스를 다운받아 직접 실행시켜보고 바꿔보고 하면서 익히는 것이 더 빠를 것이다.

그 전에 메소드가 무엇인지 알아보자.
[그것에 무언가를 하기]는 [제이쿼리 객체가 갖고 있는 메소드를 실행하기]로 말할수 있다.
간단히 메소드란 준비되어 있는 기능을 뜻한다.

1. 스타일 변경하기

css - 스타일시트나 스타일 속성에서 스타일 변경을 실행하는 매소드

jQueryObject.css('프로퍼티명', '값');

show/hide - 요소의 표시/비표시를 변경하기 위한 메소드

jQueryObject.show();
jQueryObject.hide();

width/height - 요소의 폭/높이를 지정하는 메소드

jQueryObject.width(값);
jQueryObject.height(값);

2. 애니메이션 시키기

fadein/fadeout - 점점 보이거나 점점 흐려지며 안보이는 기능

jQueryObject.fadeIn();
jQueryObject.fadeOut();

slideDown/slideUp -슬라이드 애니메이션이 발생하는 메소드

jQueryObject.slideDown();
jQueryObject.slideUp();

fadein/fadeout/slideDown/slideUp 의 스피드 지정하기(4가지 방법 동일)

jQueryObject.fadeIn(1000); //1000 밀리초(공백으로 두면 기본 400 밀리초)
jQueryObject.fadeIn('slow');
jQueryObject.fadeIn('fast');

animate - 커스텀 애니메이션(사용자 지정 에니메이션)

jQueryObject.animate({
프로퍼티명 : 값;
});

animate 스피드 지정

jQueryObject.animate({
top : 200,
left : 400
}, 1000); //콤마(,)로 구분하고 1000은 밀리초를 의미한다. ({}) 형식에 유의하자

애니메이션 종료 시에 자바 스크립트 실행시키기

jQueryObject.animate({
top : 200,
left : 400
}, 1000, function() {
alert('애니메이션 완료');
}); //위 소스에서 빨간 부분이 추가 되었다. ({값,값}, 속도, 함수(){내용;}); 이런 형식

3. 내용이나 속성 변경하기

text/html - 요소의 내용을 통째로 바꿔 쓰는 메소드

jQueryObject.text('바꿔 쓴 후의 텍스트');
jQueryObject.html('바꿔 쓴 후의 html');

empty - 요소의 내용물을 비워 버리는 메소드.(내용을 통째로 지울 때 씀)

jQueryObject.empty();

attr - 요소의 속성값을 변경하는 메소드

jQueryObject.attr('속성명', 변경 후의 값);

예) <img scr = "윤아.jpg" alt = "" id = "This" />

$(function(){
$('#This').attr('src', '서현.jpg');
});

val - 입력된 값을 변경하는 메소드

jQueryObject.val('변경후의 값');

addClass/removeClass - class 속성값을 조작하기 위한 메소드

jQueryObject.addClass('클래스명');
jQueryObject.removeClass('클래스명');

append/appendTo - 요소를 움직이기 위한 메소드

append 메소드를 사용하는데는 이동할 요소와 이동할 곳의 요소의 두가지 객체가 필요하다.
A 안에 B를 이동시키는데 시작점과 도착점이 필요한건 당연 ㅡ.ㅡ

jQueryObjectA.append('jQueryObjectB'); //A요소 안에 B요소를 이동

jQueryObjectB.appendTo('jQueryObjectA'); //B요소를 A요소 안에 이동

위는 어차피 똑같은 기능을 하는데 어느걸 안으로 넣을래. 차이다 헷깔리면 1개만 쓰자

원래 뒤에 이벤트가 있는데 너무 길어져서 나눠서 쓰겠다.
이번 장은 끝~

2014년 6월 10일 화요일

2장 무언가를 가져오기(기본 그 첫번째)

벌써 2장이다(실은 책을 다 떼고 다시 리뷰하는거니 당연....;;)
2장은 [무언가를 가져오기]를 해볼꺼다.
뭘 가져올까?? 당연히 내가 조작하려고 하는 원본을 가져오는 거다.
원본이 뭔지 알아야 색을 바꾸던, 지우던, 글씨를 키우던 뭔가를 할꺼 아닌가.
가져오는 것을 셀렉터라고 부른다.

2.1 셀렉터란 뭔가??

가져오기는 1장에서 봤듯이 $('셀렉터') 이다.
저 셀렉터 부분이 바뀜에 따라 어떤 형태 것을 가져올껀지 결정되는거다.
뭐 이것저것 엄청 많은데 이 장에서는 대표적인 4개를 소개하고 있다.

1) ID 셀렉터 - #idValue

$('#idValue')

#뒤에 등장한 문자열이 id의 속성이고 이 속성으로 지정된 요소를 취득한다.
코드를 보자.
----------------index.html-------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="jquery-1.7.1.min.js"></script>
<script src="scripts.js"></script>
</head>
<body>
<ul>
<li>fox</li>
<li id="cat">cat</li>
<li>fish</li>
<li id="dog">dog</li>
<li>bird</li>
</ul>
</body>
</html>

--------------------------------------------

빨강 부분이 id를 지정한 부분이다.

---------------------scripts.js----------------------

$(function(){

$('#cat').css('background','pink');

$('#dog').css('background','yellowgreen');

});

---------------------------------------------------

저걸 실행하면 cat과 dog 부분이 각각 색이 바뀐다.

한마디로 id로 지정한 곳이 다 바뀌게 된다는 것이다.

하지만 이 셀렉터의 단점은 모든 id에게 같은 색을 입히려면

다 일일히 지정해 줘야 한다는 것이다. 지금이야 2개 밖에 없으니 쿨하게 해주겠지만

역시 100개 1000개 넘어갔는데 같은 코드 쭉 늘여놓으면

사장에게 퇴사 크리를 맞을 수 있다. 그래서 나온게 "클래스 셀렉터"다

2) 클래스 셀렉터 - .className

복수의 요소를 함께 취득하고 싶은 경우에 클래스 셀렉터를 쓴다.

클래스 셀렉터를 사용하면 지정한 모든 클래스에 속한 요소를 모두 취할수 있다.

사용법은

$('.className')

코드를 보자

--------------------index.html--------------------

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

</head>

<body>

<ul>

<li class="woman">Hanako</li>

</ul>

</body>

</html>

--------------------------------------------------------------------

----------------------scripts.js---------------------------------

$(function(){

$('.man').css('background','lightblue');

$('.woman').css('background','pink');

});

----------------------------------------------------------------

코드를 보면 남자는 파랑으로 여자는 핑크로 지정하고 복수의 요소를 바꾸었다.

3) 타입 셀렉터

타입 셀렉터는 지정한 요소명의 요소를 전부 가져올 수 있다.

작성법은

$('div')

원하는 요소명을 그대로 넣음으로써 다입 셀렉터의 기능을 수행한다.

-----------------------index.html------------------------------

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

</head>

<body>

<h1>Heading</h1>

<p>The quick brown fox jumps over the lazy dog.</p>

<ul>

<li>The quick brown fox jumps over the lazy dog.</li>

</ul>

</body>

</html>

--------------------------------------------------------------

------------------------scripts.js-----------------------------

$(function(){

$('p').css('background','pink');

$('li').css('background','yellowgreen');

});

-------------------------------------------------------------

$('p')라면 모든 p요소를, $('li') 라면 모든 li요소를 취득한다.

3.1) 조합해보기

위에서 공부한 3개를 조합해서 써보자.

-타입 셀렉터 + ID 셀렉터

$('div#hoge').css('background', 'red'); //id가 hoge인 div 요소를 취득한다.

-ID 셀렉터 + 클래스 셀렉터

$('#hoge.foo').css('background', 'red'); //id가 hoge인 클래스 foo 요소를 취득한다.

-타입 셀렉터 + ID셀렉터 + 클래스 셀렉터

$('div#hoge.foo').css('background', 'red');

//id가 hoge이고 클래스 foo에 속한 div 요소를 취득한다.

셀렉터의 조합 = 검색 이다.

4)자손 셀렉터

자손 셀렉터는 요소의 계층 구조를 판단하여 원하는 요소를 취득하기 위한 셀렉터

작성법

$('p strong') //p요소 안에 있는 strong 요소다.

자손 셀렉터는 조합한 것에서 띄어쓰기를 한 것 뿐이다.

코드를 보장~

---------------------------index.html----------------------------

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

</head>

<body>

<div>

</div>

<ul>

</ul>

<p>She doesn't need a <strong>pen</strong>.</p>

</body>

</html>

----------------------------------------------------------------

----------------------scriots.js----------------------------------

$(function(){

$('div strong').css('background','lightblue');

$('ul strong').css('background','pink');

});

----------------------------------------------------------------

코드를 보면 strong 요소가 4개 있다.

가장 위에 있는 요소는 div의 p안에 있고,

다음 2개는 ul의 li안에 있다.

마지막은 body의 바로 아래에 있는 p안에 있다.

실행시키면 p안에 strong를 취득해서 사용하는데.

index.html에서 빨갛게 표시한 부분만 작동하게 된다.

2.2 가져온 것에서 좀 더 검색하기

이번에는 변수를 사용해서 요소를 검색하는 법을 알아보자.

변수가 뭔지는 설명 안할란다 ㅡ.ㅡ 그정도는 알겠지.....;;

두 가지를 이해하면 된다

-변수에 보관한다는 것

-거기에서 좀 더 요소를 검색한다는 것

변수에 보관하기

var lastName = '서현'; //변수에 서현을 저장

alert(lastName); //다이얼로그에 서현을 표시

너무 쉬워서 오줌 지릴꺼 같다.

자~ 저 변수에 이것 저것 넣어보자.

var lastName = '서현';

var me = lastName + ' 나';

var father = lastName + ' 아빠';

var mother = lastName + ' 엄마';

alert(me);

alert(father);

alert(mother);

이걸 실행하면 다이얼로그 창이 3번 뜨면서 문장이 나온다.

+는 문자열 연결 명령이다

응용해보자.

$('#hoge').css('background', 'pink'); //원본

var hoge = $('#hoge'); //변수에 넣었다.

hoge.css('background', 'pink');

hoge.css('border', '1px solid red');

hoge.fadeIn();

이런식으로 응용이 가능하다.

이로써 2장도 끝났다 3장에서는 메소드, 스타일 변경, 이벤트 등을 다루겠다~

1장 - 제이쿼리를 시작해보자~

약 100만년만에 올리는 공부 리뷰~ 빠밤~
실은 이 사이트 자체를 잊어 먹었었다 ㅡㅡ;;
갑자기 왠 제이쿼리냐고??
군대 동기 전x민이 제이쿼리 공부해두면 언젠가는 써먹는다고 해보라고 했다
쉽다나? 제이쿼리가 DB쿼리문인줄 알았던 웹무식자에게 뭔가 영감을 준 책이라 할수 있다

일단 교재는 "머리에 쏙쏙 들어오는 jQuery 입문" 이다.
누차 말하지만 난 이 책을 사서보는거고 잊지 않기 위해 여기에 올리는 것이다.
왠만하면 사서 보자~
일본인 저자가 만든 책이고, 풀 컬러라 보기 좋다 ㅎㅎ(애들 취향 ㅡㅡ;)
그럼 리뷰 시작~
---------------------------------------------------------------------------------
1. 제이쿼리의 대략적인 개념

장점
제이쿼리는 편리하다. (코드가 간결해~)
브라우저를 가리지 않는다.(호환성 쩔어~)
자바스크립트와 비슷한 문법(금방 습득가능)
정보가 풍부하다(커뮤니티가 잘 되어 있음)
버그가 적다(과연?)

단점 - 이 책엔 없네 ㅡㅡ??

1.1 기본 개념을 접해 보자~

$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기

<div id = "sample1">샘플이다</div> //html 페이지 안에 이런게 있다고 하면 숨겨진다

제이쿼리의 기본적인 흐름은 [무언가를 가져오기] -> [그것에 무언가를 하기] 다.

무언가를 가져오기 -> id가 sample1인 요소 -> $('#sample1')
그것에 무언가를 하기 -> 숨기기 -> .hide()

제이쿼리에서 $는 반드시 등장한다. 항상 맨 앞에 붙는다.
$()는 무언가를 가져오기

1.2 제이쿼리 객체화하기

제이쿼리에서 객채라는 것은 뭘까?
로봇 슈트를 입은 사람과 같은 것이다(아이언맨!!)
객체가 혼자 있을 때는 그냥 찌질이지만
슈트를 입으면($()) 자바 스크립트만으로는 하기 힘든 조작을 간단하게 할 수 있다.

그럼 객체화 된 슈트에 무언가 하기 기능을 어찌 넣을까?
[그것에 무언가를 하기] 기능은 뒤에 .을 붙여 작성하면 된다.
예는 위에랑 같은 예다.

$('#sample1').hide(); //id 속성이 sample1 인 요소를 숨기기

$('#sample1').shiw(); //표시하기

1.3 정리 하기

$가 제이쿼리
$()로 무언가를 가져옴
그리고 가지고 온 요소를 제이쿼리 객체화 함
제이쿼리 객체로 편리한 기능을 사용할 수 있음
그러한 편리한 기능이 없으면 여러가지 일이 매우 어렵고 힘듦

1. 4 제이쿼리를 사용하기 위한 준비

http://jquery.com/ 에서 다운 받자

다운 받은 제이쿼리 파일을 동일 디렉토리에 놓는다.

파일 이름이 jquery-1.7.1.min.js 라면

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery test</title>
<script src="jquery-1.7.1.min.js"></script>
<script>
$('#sample1').hide();
</script>
</head>
<body>
<div id="sample1">이 div를 지우고 싶다！</div>
</body>
</html>

이런식으로 지정해 주면 된다. 진짜로 이거면 설치 끝이다 ㅎㅎ;;

나도 처음에는 이게 다야? 하면서 당황했는데 이러면 다 되더라 ㅡㅡ;;;

이 div를 지워보자.

저거 복붙해도 안지워진다.

원인은 위에서부터 순차적으로 읽다보니 $('#sample1').hide(); 에서 sample1 이 아직 읽혀지지 않았다. 그래서 뭘 지워야 하는지 모르니 걍 제끼는거다

그럼 어찌하는가 하면

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

$(function(){

$('#sample1').hide();

});

</script>

</head>

<body>

</body>

</html>

$(function(){})으로 감싸준다. ()에 주의하자. 처음에 ()이게 2중인걸 모르고 한참 헤맷다.

하지만 지금은 함수가 한개니깐 저기에 썼지만 100개 1000개 넘으면 코드가 엄청 복잡해지고 상사에게 싸다구 크리를 맞을수 있다.

$(function(){}) 부분을 따로 파일로 만들자.

scripts.js라는 파일명을 만들고 안에

$(function(){

$('#sample1').hide();

});

라고 저장하자.

물론 위의 소스에서 그 부분은 지워야겠지??

그럼 파일이 2개 생겼다(제이쿼리 파일까지 3개군)

-------------index.html-------------

<!DOCTYPE html>

<html>

<head>

<title>jQuery test</title>

</head>

<body>

</body>

</html>

----------------------------------------

---------------scripts.js-----------------

$(function(){

$('#sample1').hide();

});

-------------------------------------------

그리고 제이쿼리 파일(jquery-1.7.1.min.js) //당신이 받은 제이쿼리 파일명을 써주면 된다

이 책에서 기본으로 쓰는 파일이 4개가 있다.

index.html

styles.css (빈 파일)

jquery-1.7.1.min.js (제이쿼리 파일)

scripts.js (빈 파일)

빈 파일 부분은 이제 공부하면서 채울 부분이니

저리 만들어 놓고 복붙해서 쓰자(귀찬귀찮 ㅡㅡ;;)

이로서 1강 끝이다(벌써?) 다음 2강은 무언가를 가져오는 법을 다루겠다.