제이쿼리(jQuery)를 웹사이트에 추가하는 방법은 크게 두 가지가 있습니다.
- 로컬(Local) 방식: 제이쿼리 파일을 직접 다운로드받아 내 프로젝트 폴더에 넣고 불러오는 방법
- CDN 방식: 온라인상에 업로드되어 있는 제이쿼리 파일의 주소(URL)를 복사해서 연결하는 방법
초보자분들도 쉽게 따라 하실 수 있도록 각 방법을 단계별로 설명해 드릴게요!
1. CDN(Content Delivery Network) 방식으로 설치하기 (추천 ⭐)
파일을 다운로드받을 필요 없이, 구글이나 제이쿼리에서 제공하는 온라인 주소를 HTML에 붙여넣기만 하면 끝나는 가장 쉽고 빠른 방법입니다.
📌 따라 하기
- 제이쿼리 공식 CDN 주소 제공 사이트나 구글 CDN을 이용합니다. (가장 안정적인 구글 CDN을 추천합니다.)
- 아래의 <script> 태그 코드를 그대로 복사합니다.
- 내 HTML 파일의 <head> 태그 안이나 </body> 태그 바로 위에 붙여넣습니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 CDN 연습</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("제이쿼리가 성공적으로 연결되었습니다!");
});
</script>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>
- 장점: 내 컴퓨터나 서버에 파일을 저장할 필요가 없고, 설치가 몇 초 만에 끝납니다. 사용자의 브라우저에 이미 캐시(저장)되어 있을 확률이 높아 로딩 속도가 빠를 수 있습니다.
- 단점: 인터넷이 연결되어 있지 않은 환경(오프라인)에서는 제이쿼리가 작동하지 않습니다.
2. 로컬(Local) 방식으로 설치하기
인터넷 연결과 상관없이 언제나 안정적으로 제이쿼리를 구동하고 싶을 때 사용하는 방법입니다.
제이쿼리 파일을 내 컴퓨터에 직접 저장합니다.
📌 따라 하기
- 제이쿼리 공식 다운로드 페이지(jquery.com/download)에 접속합니다.
- Download the compressed, production jQuery... 라고 적힌 링크를 마우스 우클릭한 뒤 [다른 이름으로 링크 저장]을 누릅니다.
- ※ 그냥 클릭하면 이상한 외계어(압축된 코드)가 가득한 창이 뜨니 꼭 우클릭으로 다운로드하세요!
- 다운로드한 파일(예: jquery-3.7.1.min.js)을 내 웹사이트 프로젝트 폴더(보통 js 폴더 안)에 넣습니다.
- HTML 파일에서 다음과 같이 상대 경로를 지정해 불러옵니다.
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리 로컬 연습</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function(){
alert("로컬 제이쿼리 연결 완료!");
});
</script>
</head>
<body>
<h1>안녕하세요!</h1>
</body>
</html>
- 장점: 인터넷이 끊긴 오프라인 환경이나 사내 폐쇄망 환경에서도 완벽하게 작동합니다. 외부 서버의 상태에 영향을 받지 않습니다.
- 단점: 직접 파일을 다운로드하고 폴더 구조를 관리해야 하므로 경로를 잘못 지정하면 작동하지 않는 실수가 생길 수 있습니다.
💡 파일 이름 뒤에 붙은 min이 무엇인가요?
다운로드 페이지를 보면 jquery-3.7.1.js와 jquery-3.7.1.min.js 두 가지 버전이 있습니다.
- jquery.js (Uncompressed): 개발자용 파일입니다. 코드가 줄 바꿈과 공백을 포함해 사람이 읽기 쉽게 정돈되어 있습니다.
- jquery.min.js (Compressed): 실제 서비스용 파일입니다. 파일 용량을 최소한으로 줄이기 위해 공백, 줄 바꿈을 모두 없애고 변수명을 한 글자로 축소(Minify)한 파일입니다.
결론: 웹사이트를 서비스하거나 연습할 때는 용량이 훨씬 작고 가벼운 min.js 버전을 사용하시면 됩니다.
'New' 카테고리의 다른 글
| 모던 웹 환경에서도 여전히 사랑받는 대표 제이쿼리 플러그인 4가지 추천 (0) | 2026.06.04 |
|---|---|
| jQuery UI Plugin (0) | 2026.06.04 |
| jQuery (0) | 2026.06.04 |
| Ajax (0) | 2026.06.01 |
| JSON (0) | 2026.06.01 |