그냥 개발자 블로그

jquery강좌 - 제이쿼리(jquery) 시작하기 본문

프로그래밍팁/javascript

jquery강좌 - 제이쿼리(jquery) 시작하기

마음이파파 2015. 9. 30. 21:00

제이쿼리는 자바스크립트 보다 직관적인 코드를 제공함으로서 보다 원할한 코딩이 가능한데요.

그런 제이쿼리를(jquery)를 사용법을 알아볼게요.


오늘은 제이쿼리(jquery)를 사용할수 있도록 연결하여 hello! 라는 문자를 화면에 표시되게 할꺼에요.





 

html5의 경우 위에서 밝게 표시되는 형태가 기본 형태가 되겠죠.

여기서 head 안에 스크립트가 보통 들어가는데 제이쿼리(jquery) 도 역시 자바스크립트(javascript)와 같아요. 


제이쿼리를 사용하기 위해선 jquery.js를 연결해주어야 하는데요.

jquery.js를 얻는 방법은 다운로드와 CDN 방법 두가지가 있으나 사용이 간편한 CDN 방법으로 설명드릴게요.

제이쿼리 CDN이 무엇인지 궁금하신분은 [jquery plugin(제이쿼리 플러그인) 사용법] 에서 자세한 내용을 확인해보세요.







 


우선 http://code.jquery.com에서 접속하여 보시면 다양한 버전이 제공되는데 2.X 든 1.X든 보시면 uncompressd와 minified 두가지가 있어요.


Full 이냐 간소화 된것이냐의 차이이니 아무거사 선택하셔도 되요.


익스플로러의 경우 마우스 우클릭해서 '바로가기복사'를 크롬의 경우 그냥 클릭해서 페이지도 이동하여 주소를 복사해주세요.









이제 head 태그 안쪽에 위와 같이 복사한 주소를 넣어 script를 선언해주세요.

이렇게하여 내 서버에 별도의 설치 없이 저 주소에서 자동으로 가져와 연결해주게되요.









그러면 실제 동작하는지 봐야겠죠.

위에 밝게 표시된영역 처럼 써주세요.

지금 단계에서는 밝게 표시된 영역이 정확히 무슨 뜻인지 알필요가 없고 hello! 라는 글자를 화면에 나타내주는 명령이라고 정도만 알고 있으면 되겠네요.

파일을 저장한후 실행해보면 화면에 hello! 라고 찍히는걸 보실수 있을꺼에요.


컴퓨터에서 저장한 html 파일을 익스플로러로 실행 했는데 '차단된 컨텐츠 허용' 표시와 함께 hello!가 보이지 않는다면 로컬에서 html 파일을 실행해서 임으로 '차단된 컨텐츠 허용'을 클릭해서 제한을 풀어주시면 정상적으로 동작하는걸 보실수 있으실꺼에요.







위 강좌에 이해를 돕고자 영상으로 제작되었으니 한번 보시면 좋겠네요. 크게 보시려면 아래 주소를 클릭하여 유튜브에서 직접 보시면 되요.

https://www.youtube.com/watch?v=VZv6YabUFKQ