[송규남의 IT다이어리] 제이쿼리(jQuery) 첫번째 이야기
남지숙
view : 566
[송규남의 IT다이어리] 제이쿼리(jQuery) 시작해보기
안녕하세요. 중앙HTA의 송규남 강사입니다.
오늘부터 시작하는 송규남의 IT다이어리는 한달에 한번씩은 IT에 관련된 정보를 드리려고 합니다.
프로그래밍 개발자로서 실무에 사용하실 때 유용한 Tip들을 모아모아보려 하는데..
이 글을 보시는 모든 분들께 유익한 정보가 되었으면 좋겠네요. ^^
먼저 첫 시작인 오늘은 제이쿼리(jQuery)를 주제로 이야기를 만들어보았습니다.
제이쿼리(jQuery)를 사전적인 의미로 말씀드리면 브라우저 호환성이 있는 HTML 속 자바스크립트 라이브러리이며
클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었고
오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나라고 합니다.
즉 브라우저 호환성이 좋고, 자바스크립트를 단순화시킬 수 있는 능력이 뛰어난 라이브러리라고 생각하면 될 것 같습니다.
요즘 웹사이트의 대부분이 jQuery를 사용하고 있습니다.
jQuery가 이렇게 많이 사용되고 있는 이유는 위에 말씀드린 내용처럼 많은 장점들이 있지만
그 중에서도 크로스브라우징이
완벽히 지원되기 때문이죠..
자바스크립트는 웹브라우저마다 지원되는 객체라든지 이벤트 처리방식이 약간
다를 수 있는데요..
크로스 브라우징이 지원되도록 하려면 이에 따른 모든 처리를 해줘야 합니다. 여간 힘들고 불편한 일이 아닐수 없습니다.
하지만 jQuery를 사용하면 크로스브라우징이 완벽히 처리되므로 개발자가 많이 수월해 졌다고 할 수 있습니다. 뿐만 아니라 jQuery는 빠르고 사용하기가 쉽고 애니메이션 효과와
같은 이펙트 처리가 수월합니다. 이러한 여러 장점으로 인해
jQuery가 많이 사용되고 있는데요..
이번 컬럼에서는 jQuery에 대한 기본적인 사용방법등을 알려드리려고 합니다.
자, 그럼 먼저 jQuery라이브러리를
다운 받아야 하는데요..
웹브라우져를 실행후 아래의 사이트로 이동합니다.
< http://jQuery.com 에서 다운로드 제이쿼리를 눌러 라이브러리를 다운 받습니다. ^.^>
링크된 곳으로 이동하면 jQuery라이브러리가 1.x 와 2.x 두 종류가 있습니다.
2.x 대 버전은 1.x대 버전과 똑같은 API를 사용하고 있고, 호환성이 그대로 유지됩니다.
1.x대 버전과 2.x대 버전의 가장 큰 차이점은 더 이상 ie
6,7,8 버전을 지원하지 않는다는 것입니다. 대신 용량은 2.x버전이 더 작습니다. 하지만 아직 ie 6,7,8 버전의 사용자들이 많으므로 1.x 대로 사용하시는
것을 추천합니다.
아래 그림을 보면 compressed 된것과 uncompressed된것 두 종류가 있습니다. 압축된 형태와 압축되지
않은 상태인데요 압축된 형태는 코드를 보기가 힘들고 압축이 안된 것은 코드가 보기 쉽도록 되어 있습니다. 웹개발자로 jQuery코드를 분석하고 살펴봐야 한다면 압축안된 형태를 다운로드 받으시면 됩니다. 용량은 압축된 형태가 작겠죠^^
빨간 체크박스가 있는 곳을 눌러 다운로드를 받습니다.
|
|
jQuery라이브러리는 위에처럼 직접 다운로드 받아서 사용하는 방법과 CDN방식이
있습니다. CDN방식으로 이용하려면 HTML파일에 아래와
같은 코드를 삽입하면 됩니다.
파란색 코드를 복사해서 HTML에 넣습니다.
자 그럼 간단한 코드를 jQuery를 이용해 작성해 보겠습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box").slideDown(1000);
});
</script>
</head>
<body>
<div id="box"
style="display: none">
<img src="jhta.jpg">
</div>
</body>
</html>
"jhta.jpg" 라는 이름의 이미지를 html파일과 같은 경로에 넣고 위와 같이 작성후 실행시켜 보세요.
이미지가
위에서부터 아래로 펼쳐지면서 보일것 입니다. 단 몇줄의 코드로 멋진 애니메이션과 같은 효과가 나타나네요!^^
이것으로 오늘의 IT다이어리는 마무리 하겠고요~
여러분들도 간단하니까 한번 따라해보시기 바랍니다.
그럼 다음에 또 새로운 제이쿼리 이야기를 들고 오도록 하겠습니다!
감사합니다. ^^
<저작권자(c)중앙에이치티에이(주). 무단전재-재배포금지>
