Free at 4:00P.M

[꾸미기]티스토리에서 JQuery 사용하기 본문

정보/블로그 정보

[꾸미기]티스토리에서 JQuery 사용하기

free4pm 2014. 12. 22. 15:23

티스토리 블로그는 HTML 및 Javascript 이용이 타블로그에 비해 비교적 자유롭고 쉽게 되어 있습니다. 

제가 티스토리 블로그를 선택하게 된 이유입니다. 


그래서 먼저 JQuery를 사용하기 위해 JQuery를 설정하고 테스트 과정을 블로그 해 보겠습니다.


먼저 JQuery 사이트를 방문하여 사용할 버전의 JQuery CDN서버 URL을 찾습니다. 


JQuery버전의 경우 크게 1.대의 버전과 2.대의 버전으로 나뉘는 듯 합니다. 

1.대의 버전은 오래 된 IE까지 지원을 하는 반면에 무거운 듯하며 

2.대의 버전은 IE9부터 지원을 하지만 가볍게 사용이 가능한 듯 합니다. 

대부분의 스마트한 이용자들은 IE업그레이드를 했다고 가정하고 2.대의 최신의 버전으로 사용 해보겠습니다. 


또한 JQuery는 소스를 보기 쉽게 공개하기 위한 uncompressed버전과 

소스를 최대한 압축하여 용량을 줄인 minified버전이 있습니다. 

블로그를 하면서 소스를 살펴 볼 일은 없을 듯 하므로 minified버전으로 사용하겠습니다. 


해당 링크를 클릭하면 소스가 보이게 되며, 브라우져 주소창에 주소가 JQuery를 가져올 수 있는 URL입니다. 

해당 URL을 복사합니다. 


티스토리 > 로그인 > 블로그 > 관리자 이동 후 HTML/CSS 메뉴를 선택하면 

블로그의 공통화면인 skin.html 파일과 style.css 파일 편집화면이 보입니다. 

이곳에 <title>...</title> 태그 이후부터 JQuery 선언 및 코딩을 하면 됩니다. 


JQuery 선언 후 테스트를 위해 페이지 최초 로딩 시 alert창을 하나 띄워보겠습니다. 

1
2
3
4
5
6
7
8
9
<script src="http://code.jquery.com/jquery-2.1.2.min.js"></script>
 
<script type="text/javascript">
 
$(document).ready(function() {
alert('test alert');
});
 
</script>
cs



흐음.. 잘 되네요.. ㅎ

물론 블로그 내에서 계속 알럿창이 뜨니 테스트 후 바로 alert문장은 삭제해 주시면 됩니다. 


요약 

1. JQuery CDN URL 찾기

2. 블로그 스크립트 작성하는 곳에 JQuery 선언 및 코딩

3. 테스트