티스토리 뷰

카테고리 없음

기본 중의 기본(jQuery)

박강균 IT 2021. 3. 14. 16:21

핵심 키워드 

CDN(Content Delivery Network) 

콘텐츠를 효율적으로 전달하기 위해 전 세계 여러지점의 서버에

파일을 저장해두고, 사용자와 가까운 지역에서 해당파일(콘텐츠)을 제공해준느

네트워크 시스템을 의미, 최근에는 Content Distribution Network 라고 부름

 

JQuery = 모든 브라우저에서 사용가능 = 범용성이 굉장히 넓다!

심지어 쉽다! html과 css 자바스크립트 jsp 등등 

모든것을배우기위해 100의 에너지를 쏟아야했다면, 제이쿼리를 배우기 위해서는 30의 에너지만 쏟으면 됩니다. 

 

장점?  플래시와 실버라이트를 활용한 웹사이트와 비슷하게, 시각적 효과를 가져올 수 있음

아이패드나 아이폰처럼 플래쉬를 지원하지 않는 기기에서도, 쿼리같은 경우는 지원하기 때문에 편리하게 

사용이 가능합니다. AND 여러 브라우저를 사용하게 될 경우 생기는 문제를 JQuery를 사용하면 아주 쉽게 해결이 가능합니다. 

 

 이론적인 부분은 일단 나중을 위해 남겨두도록 하고, 기본적인 사용방법을 익히는 시간을 가지도록 하겠습니다. 

처음으로 해야할일은 제이쿼리 파일을 받는 것 입니다. api를 사용하여도 되고, 파일을 받아도 되는 방식이니 

입맛에 맞는 방식을 사용하면 될 것 같습니다.  저 같은경우 파일을 다운로드해서 사용했기 때문에,

다운로드해서 적용하는 방식을 설명드리겠습니다. 

 

1.제이쿼리 파일 다운로드

jquery.com/download/

 

 

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

이곳에 접속해서 처음으로는 jQuery를 파일을 받아야하는데 다운로드를 누른다고 해서 바로 다운로드 되는 것이 아닌

이상한 외계어 같은 것들이 쏟아질텐데 

다른 이름으로 저장을 눌러서, 파일형태로 저장해주시면 됩니다. 

저장하는 위치같은 경우 html의 작업폴더와 같은곳에 저장하는 것을 추천드립니다. 아닌경우 상대경로 절대경로를 계산해서 경로를 구해야하기 때문에.. 

저장이 완료되셨고, 작업폴더와 같은 위치에 제이쿼리를 저장시켜보셨다면 아래의 코드를 입력해서 

제이쿼리가 제대로 동작하는지 확인해주시면 될것 같습니다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8"/>
    <title>jQuery Start!!</title>
    <script src="jquery-3.6.0.min.js" type="application/javascript"></script>
    <script type="application/javascript">
        jQuery(document).ready(function(){
            console.log('html이 준비되면 실행')
            jQuery('#pp').css('color','pink');
        })
        function fn_click(color){
          console.log(color)
            jQuery('#pp').css('color',color);
        }
  </script>
</head>
<body>
  <p id="pp">
  Hello world: 
  jQuery
  </p>
<button id="red" onclick="javascript:fn_click('red')">red</button>
  <button id="blue" onclick="javascript:fn_click('blue')">blue</button></body>
</html>

 

주목해야할점은 src부분입니다.  

 

<script src="jquery-3.6.0.min.js"

 

3.6.0은 다운로드한 제이쿼리의 이름이고 이름을 바꿔서 저장할경우 거기에 맞춰서 불러와야합니다.

즉 제이쿼리라는 이름의 js파일을 불러온다고 생각하시면 될것같습니다. 

 

 

 

 

 

다음과 같은 화면이 나오면서 아래의 버튼에 따라 글자색이 변한다면 성공! 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

.aq

저작자표시
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함