오늘은 제이쿼리를 처음 적용하는 법에 대해 알아보겠습니다.
제이쿼리를 적용시키는 방법은 크게 두가지가 있습니다.
두가지 모두 알아보도록 하겠습니다.
1. 다운로드
- 첫 번째는 다운로드입니다. 말 그대로 파일을 다운로드 하여 내 PC에 저장해서 쓰는 것입니다.
1. 홈페이지에 접속합니다.
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
2. Download ... 라고 나와있는 것들 중 가장 윗줄을 클릭합니다.
2. 그러면 다음과 같은 창이 뜰 것입니다.
여기서 아무 곳에나 우클릭을 한 후 '다른 이름으로 저장' 을 누릅니다.
3. 원하는 경로를 설정하고 '저장'을 누릅니다.
아무곳에다 저장해도 됩니다만 찾기 쉬운 곳에 넣는 것이 사용할 때 편합니다.
(저는 평소에 vs code에서 html파일을 저장해두는 디렉토리에 저장했습니다)
4. 파일이 잘 저장 됐는지 확인합니다.
1-1. 다운로드 후 적용 방법
1. 이제 다운로드 한 파일의 경로를 복사해주면 됩니다.
1) VS Code에서 경로를 복사하는 경우
- 왼쪽 탐색기 탭에서 다운 받은 파일을 우클릭한 후 '경로 복사'를 눌러줍니다.
이때 상대 경로 복사를 하실 경우 에러가 날 수도 있으니 꼭 '경로 복사'를 클릭해주세요.
2) 파일 탐색기에서 복사하는 경우
- 저장해둔 디렉토리로 들어가서 위에 표시돼어있는 경로를 전체 복사 해줍니다.
2. 이제 다음과 같이 jQuery를 사용할 html 파일에서 <head>태그의 <script> 에 경로를 적어주면 됩니다.
<head>
<title>JQuery</title>
<script src="D:\study\jquery-3.6.0.min.js"></script>
</head>
2. CDN을 이용하는 법
다운로드를 받는 것 보다 훨씬 간편합니다.
1. 여기를 클릭하여 Google Hosted Libraries 사이트에 접속합니다.
https://developers.google.com/speed/libraries#jquery
Hosted Libraries | Google Developers
A stable, reliable, high-speed, globally available content distribution network for the most popular open-source JavaScript libraries.
developers.google.com
2. 가장 최신 버전의 코드를 복사합니다.
3. jQuery를 사용할 html 파일에서 <head>태그의 <script> 에 넣어주면 끝이다.
<head>
<title>JQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>'Frontend' 카테고리의 다른 글
| [JavaScript/JQuery] each() 메서드 알아보기 - $.each() 함수 (0) | 2021.08.09 |
|---|---|
| [JavaScript] JSON 파싱(parsing), JSON.parse() 사용법, 예제 (0) | 2021.08.06 |
| [JavaScript] 자바스크립트 함수 - ③매개변수, 디폴트 매개변수, 나머지 매개변수, arguments 객체 (default parameter, rest parameter, arguments) (2) | 2021.08.04 |
| [JavaScript] 자바스크립트의 함수 - ②유효 범위(전역 변수, 지역 변수)와 hoisting (0) | 2021.08.03 |
| [JavaScript] 자바스크립트의 함수 - ①기본 (0) | 2021.08.03 |
