HTML5 JQuery 연결하기

HTML 공부 2015. 3. 7. 16:51

HTML5 JQuery 연결

■ JQuery는 대표적인 자바스크립트의 [라이브러리]인데요. '라이브러리'란 자주 쓰는 자바스크립트 객체나 함수를 모아 놓은 것입니다. 이 라이브러리를 사용하기 위해서는 HTML 문서와 JQuery를 연결해줘야 하는데요. 연결하는 방법은 두 가지가 있습니다. 첫 번째는 파일을 내려받아서 HTML 파일과 같은 폴더에 넣어서 연결하는 방법과 CDN을 이용하는 방법인데요. CDN 형식은.... 콘텐츠를 효율적으로 사용하기 위해서 JQuery나 구글등의 서버에서 제공해주고 js파일을 내려받을 필요 없이 연결만 해주면 됩니다.

■ CDN 방법이 편하긴 한데요. 상황에 따라서는 (하이브리드 앱) JQuery를 내려받아서 연결하는 게 좋을 때도 있습니다. 이렇게 두 가지 방법을 알아볼 텐데요.

먼저 내려받아서 연결해볼게요.

http://jquery.com ◀JQuery로이동할게요.

▲ 그림과 같은 웹 페이지가 나타나는데요. 내려받기 버튼을 클릭하겠습니다.

▲ 에고..ㅠ.ㅠ 그림이 잘 안 보일 수도 있겠네요. 잘 안 보이면 직접 이동해서 확인해보셔요. JQuery 1.X 버전과 2.X 버전이 있는데요. 두 번째 걸로 받을게요. 그리고 같은 파일이어도 그림에서 표시한 부분에 보면 compressed 버전과 uncompressed 버전이 있는데요. 앞쪽에 건 xxx.min.js 파일을 받게 되구요. 두 번째는 xxx.js 형식의 파일을 받게 됩니다. min 파일은 불필요한 공간을 차지하는 형식들은 모두 제거하고 필요한 내용만 보이도록 해놓은 파일이에요. 어떤 걸 내려받아도 관계는 없습니다. 저는 compressed 형식을 받겠습니다.

▲ 내려받은 js파일을 HTML 파일과 같은 폴더에 넣어놨습니다. 연결하기 전에 min.js 파일의 형식을 잠깐 볼까요? 파일을 열어볼게요.

▲ 이렇게 불필요한 형식은 모두 제거하고 내용만 저장된 형태입니다.

이제 HTML 문서의 head 태그 안에 이 JQuery를 연결하겠습니다. JQuery를 다루실 보실 정도면 이미 자바스크립트 연결 방법은 알고 계시죠? 같은 방법으로 연결하면 되는데요. 우리가 작성한 js 파일보다 이 JQuery 파일이 먼저 연결되어야 합니다. 형식은 다음과 같습니다.