소개
본 아티클은 제가 촬영한 jQuery 동영상 강의 중 “jQuery CDN 사용하기” 강좌를 요약한 자료입니다.
1. jQuery CDN이란?
2. jQuery CDN 사용하기
3. CDN 사용 이유?
4. Microsoft, jQuery, Google 등에서 제공하는 jQuery CDN 참조 경로
5. 그럴리는 없겠지만, 공용 jQuery CDN이 제공되지 않았을 경우에 대한 대체 방법 제공
6. 참고 예제 소스 따라하기
(1) 아래 소스 코드는 jQuery CDN을 사용하여 로컬에 따로 jQuery 파일을 포함시키지 않고도 원격 CDN 서버를 통해서 jQuery 기능을 사용하는 간단한 예를 보여준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>jQuery CDN 사용하기</title>
<meta charset="utf-8">
<style type="text/css">
#myDiv { background-color: Yellow; height:100px; }
</style>
<!-- jQuery CDN 인클루드 -->
<!-- Microsoft
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js "></script>
-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnChange').click(function () {
$('#myDiv').css("background-color", "red");
});
});
</script>
</head>
<body>
<div id="myDiv">
Microsoft jQuery CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js
</div>
<input type="button" id="btnChange" value="위 레이어 배경색 변경하기" />
</body>
</html>
(2) 위 소스를 작성 후 실행하면 아래와 같이 레이어 하나와 버튼 하나로 이루어진 페이지가 실행된다.
(3) [위 레이어 배경 변경하기] 버튼을 클릭하면 jQuery CDN에서 제공받은 jQuery 최신 버전을 사용하여 배경색이 “Red”로 변경된다.
마무리
이상으로, 간단하게 jQuery CDN에 대해서 살펴보았습니다.
끝.