오늘은 여러분의 블로그에 동적인 기능을 추가하거나, 다양한 웹 효과를 적용할 때 필수적인 jQuery 라이브러리를 설치하는 방법에 대해 알아보겠습니다. 특히, 가장 널리 사용되는 버전 중 하나인 jQuery 3.6.0 버전을 기준으로 설명하겠습니다.
jQuery는 복잡한 JavaScript 코드를 더 간결하고 쉽게 작성할 수 있도록 도와주는 라이브러리입니다. 많은 블로그 테마나 위젯들이 jQuery를 기반으로 작동하기 때문에, 이를 설치해두면 블로그 커스터마이징의 폭이 훨씬 넓어집니다.
jQuery 설치 코드
가장 먼저, 블로그에 추가해야 할 코드입니다. 이 코드는 jQuery 3.6.0 라이브러리 파일을 여러분의 블로그로 불러오는 역할을 합니다.
</head>위 또는 </body>위에 삽입하세요. (새로 삽입하는 자바스크립트 코드보다 앞에 있어야 함.) 삽입 위치에 대한 내용도 아래에서 확인할 수 있습니다.
<!--javascript 3.6.0 버전 시작-->
<script src='https://code.jquery.com/jquery-3.6.0.min.js'/>
<!--javascript 3.6.0 버전 끝-->
코드 설명:
<!-- ... -->: 이 부분은 HTML 주석입니다. 브라우저는 이 부분을 무시하지만, 개발자(바로 당신!)가 코드의 용도를 쉽게 파악할 수 있도록 도와줍니다. "javascript 3.6.0 버전 시작/끝"이라고 명시하여 어떤 코드인지 알기 쉽게 해줍니다.<script ... />: HTML 문서에 스크립트 파일을 포함하거나 스크립트 코드를 직접 작성할 때 사용하는 태그입니다.src='https://code.jquery.com/jquery-3.6.0.min.js':src속성은 스크립트 파일의 경로를 지정합니다. 여기서 사용된 URL은 jQuery 공식 CDN(Content Delivery Network) 주소입니다.- CDN: 전 세계 여러 지역에 서버를 분산시켜 사용자와 가장 가까운 서버에서 파일을 빠르게 전송해주는 기술입니다. 직접 파일을 업로드하는 것보다 로딩 속도가 빠르고 안정적이라는 장점이 있습니다.
jquery-3.6.0.min.js: jQuery 라이브러리 3.6.0 버전의 압축(minified) 파일입니다..min이 붙은 파일은 공백, 줄바꿈, 주석 등이 제거되어 파일 크기가 작기 때문에 로딩 속도가 더 빠릅니다.
코드 삽입 위치: <head> vs </body>
이 코드를 HTML 문서의 어디에 삽입해야 할까요? 주로 두 가지 위치가 사용됩니다.
</head>태그 바로 위: 웹 페이지의 기본적인 설정 정보가 담기는<head>섹션의 끝에 삽입하는 방법입니다. 이 경우, 페이지 본문 콘텐츠가 로딩되기 전에 jQuery 라이브러리가 먼저 로딩됩니다.</body>태그 바로 위: 웹 페이지의 모든 본문 콘텐츠가 담기는<body>섹션의 가장 마지막, 즉</body>태그 바로 위에 삽입하는 방법입니다.
저는 </body> 태그 바로 위에 삽입하는 방법을 선택했습니다.
이유는?
- 페이지 로딩 속도: 스크립트 파일을
<head>안에 넣으면, 브라우저는 해당 스크립트 파일을 모두 다운로드하고 실행한 후에야 페이지의 본문(HTML)을 화면에 그리기 시작합니다. 만약 스크립트 파일이 크거나 인터넷 속도가 느리면 사용자는 빈 화면을 더 오래 보게 될 수 있습니다. - 사용자 경험:
</body>태그 바로 위에 스크립트를 넣으면, 브라우저는 일단 HTML 구조를 먼저 그리고 사용자에게 페이지 내용을 보여준 다음 스크립트를 로딩하고 실행합니다. 이렇게 하면 사용자가 콘텐츠를 더 빨리 볼 수 있어 체감 로딩 속도가 빨라지는 효과가 있습니다.
중요: 만약 </body> 태그 위에 이미 다른 자바스크립트 코드들이 있다면, jQuery 라이브러리 코드를 그 코드들 중 가장 위에 삽입해야 합니다. 왜냐하면 다른 스크립트들이 jQuery의 기능을 사용(의존)할 수 있기 때문입니다. jQuery가 먼저 로딩되어야 jQuery를 사용하는 다른 스크립트들이 오류 없이 정상적으로 작동할 수 있습니다.
블로그스팟에 jQuery 설치하는 단계별 가이드
이제 실제로 블로그스팟 테마에 코드를 삽입해 보겠습니다.
블로거 대시보드 접속: 구글 계정으로 로그인하여 블로거 대시보드로 이동합니다.
테마 메뉴 선택: 왼쪽 메뉴에서 '테마'를 클릭합니다.
HTML 편집: 현재 사용 중인 테마 아래 '맞춤설정' 버튼 옆의 아래 화살표(▼)를 클릭하고 'HTML 편집'을 선택합니다.
</body>태그 찾기: HTML 코드 편집기가 나타나면, 코드 안쪽을 클릭한 후Ctrl+F(Mac에서는Cmd+F)를 눌러</body>를 검색합니다. 코드의 거의 맨 끝 부분에 위치해 있을 것입니다.코드 삽입: 찾은
</body>태그 바로 윗줄에 아래 코드를 복사하여 붙여넣습니다.- 만약
</body>태그 바로 위에 다른<script>...</script>코드들이 이미 있다면, 그 코드들 가장 위에 아래 코드를 삽입하세요.
<!--javascript 3.6.0 버전 시작--> <script src='https://code.jquery.com/jquery-3.6.0.min.js'/> <!--javascript 3.6.0 버전 끝-->- 만약
테마 저장: 오른쪽 상단의 '저장' 아이콘(💾 모양)을 클릭하여 변경사항을 저장합니다.
설치 확인 (선택 사항)
jQuery가 제대로 설치되었는지 확인하려면, 블로그를 열고 웹 브라우저의 개발자 도구(보통 F12 키를 누르면 열림)를 연 후 '콘솔(Console)' 탭을 확인해보세요. 별다른 오류 메시지가 없다면 성공적으로 설치된 것입니다.