JAVA로 웹 개발 시 매우 유용하게 사용하는 제이쿼리 사용하는 방법에 대해 알아보도록 하겠습니다.
제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리입니다.
제이쿼리를 사용하면 간단한 코드로 웹 페이지에 다양한 효과나 연출을 적용할 수 있습니다.
많은 장점이 있지만 일단 HTML 조작이 쉽고, CSS 스타일도 간단하게 수정, 추가할 수 있는 것이 장점입니다.
이 제이쿼리를 사용할 수 있도록 하기 위해 준비과정에 대해 알아보고 간단하게 테스트까지 해보도록 하겠습니다.
1. jquery 준비(다운로드 or CDN)
2. jquery 적용
3. 테스트
1. jquery 준비
js파일을 다운로드하거나, URL로 연결하여 사용할 수 있습니다.
두 가지 방법 중 원하는 방법으로 적용할 수 있습니다.
1-1. js 파일 다운로드
아래 다운로드 링크에 접속하여 제이쿼리 파일을 다운로드합니다.
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
아래 화면에 표시된 것처럼 [Download the compressed, production jQuery 3.6.0] 항목을 클릭합니다.
클릭하면 아래 화면이 나올 텐데 마우스 우클릭을 해서 [다른 이름으로 저장..] 항목을 클릭합니다.
기본 설정된 이름으로 저장하도록 하겠습니다.
경로를 포함한 파일명을 지정하여 설정합니다.
<script src="/test/js/jquery-3.6.0.js"></script>
경로는 webapp 하위 폴더부터 시작입니다.
다운로드한 파일을 webapp 하위 폴더 내부에서 원하는 위치에 복사해두고 그 위치를 경로로 잡아줘야 합니다.
1-2. URL 입력하여 js를 불러오는 방법 (CDN)
URL을 직접 입력하여 사용하는 방법도 있습니다.
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
CDM은 (Content Delivery Nerwork)의 약자로
웹사이트의 접속자가 콘텐츠를 다운로드할 때 자동으로 가장 가까운 서버에서 다운로드할 수 있도록 하는 기술입니다.
그렇기 때문에 웹 프로젝트를 배포하는 환경에 인터넷이 안 되는 상황이라면 사용할 수 없습니다.
2. jquery를 소스에 적용하기
head 태그 사이에 1번에서 준비한 소스를 추가하기만 하면 됩니다.
아래 예시를 보고 위치를 확인하시기 바랍니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 제이쿼리 적용 -->
<script src="/test/js/jquery-3.6.0.js"></script>
</head>
3. 간단한 테스트
간단하게 테스트 실행한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jqueryTest</title>
<script src="/test/js/jquery-3.6.0.js"></script>
</head>
<body>
<div id="testId">제이쿼리 테스트</div>
<script>
$(document).ready(function(){
$('#testId').css('background-color','red');
$('#testId').css('width','150px');
});
</script>
</body>
</html>
head 태그 사이에 제이쿼리 적용하는 소스 작성하였고 body의 div 태그로 간단하게 테스트하였습니다.
"testId"라는 id값을 사용하여 제이쿼리로 CSS를 변경하는 테스트입니다.
적용한 CSS가 잘 반영되었습니다.
위 내용을 직접 테스트해보시면 쉽게 적용하실 수 있습니다.
'IT, 개발 > 웹개발' 카테고리의 다른 글
| 제이쿼리 html 내용 가져오기, 변경하기 (JQuery html(), appendI()) (0) | 2022.08.22 |
|---|---|
| 제이쿼리 속성값 가져오기, 제어 (attr() / HTML태그 속성 변경) (0) | 2022.08.20 |
| HTML/CSS class명 띄어쓰기의 의미 (0) | 2022.06.29 |
| HTML/CSS class 사용하여 관리하기 (0) | 2022.06.28 |
| css 적용되는 우선순위 (0) | 2022.06.22 |
