jQuery 첫걸음
jQuery 첫걸음
jQuery 첫걸음은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 1개의 강의가 포함되어 있습니다.
소개
안녕하세요.
jQuery 라이브러리를 사용하려면 먼저 HTML 문서에 추가해야 합니다.
아래 예제에서는 jQuery 라이브러리의 주소를 head 태그 사이의 src 속성 값으로 추가했습니다.
이제 jQuery 라이브러리를 프로젝트에서 사용할 수 있습니다.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>jQuery 선택
HTML 요소(이제부터 DOM이라고 부르겠습니다)를 대상으로 작업하려면 먼저 요소를 선택해야 합니다.
jQuery에서는 선택을 수행할 때 $() 또는 jQuery() 메서드를 사용합니다.
소프트웨어 개발자는 $() 메서드를 더 많이 사용합니다.
이 메서드에 전달하는 매개변수로 어떤 요소를 선택할지 결정합니다.
XPath
$ 메서드에 전달하는 표현식은 CSS에서도 사용하는 XPath 선택자입니다.
즉, jQuery에서는 CSS에서 요소를 선택하는 것과 같은 방식으로 HTML 요소를 선택합니다.
XPath 예제
HTML 코드가 다음과 같다고 가정해 보겠습니다.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
jQuery를 사용해 HTML 요소를 선택해 보겠습니다.
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery를 사용하면 코드를 더 간결하게 작성할 수 있습니다
Vanilla(일반) JavaScript로 같은 작업을 하려면 더 많은 줄의 코드를 작성해야 합니다.
jQuery를 사용하면 자체 메서드를 통해 코드를 더 간결하게 작성할 수 있습니다.
주의
jQuery는 단순한 라이브러리이며, 실제로 Vanilla JavaScript보다 웹 개발을 쉽게 만들어 줍니다.
정보
jQuery의 또 다른 장점은 모든 최신 브라우저가 우리가 작성한 코드를 지원한다는 것입니다.
VanillaJS로 작성한 일부 코드는 특정 브라우저에서 부작용을 일으킬 수 있지만, jQuery는 제공하는 추상화를 통해 모든 브라우저에서 동일하게 동작하도록 보장합니다.
jQuery를 사용하면 코드를 작성할 때 브라우저별 차이를 일일이 고려하지 않아도 됩니다.
$(document).ready
jQuery의 기본 내용을 살펴보기 전에 $(document).ready 메서드를 알아보겠습니다.
HTML에 대해 배울 때, JavaScript를 HTML의 head 태그 사이 또는 body 태그 사이 어디에나 배치할 수 있다고 했던 것을 기억하실 것입니다.
$(document).ready 2
아래와 같은 HTML 코드가 있다고 가정해 보겠습니다.
브라우저는 코드의 <!DOCTYPE html> 태그부터 닫는 태그 </html>까지 해석합니다.
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script> 문은 code.jquery.com을 통해 라이브러리 다운로드를 시작합니다.
다음 줄에서는 jQuery의 $ 메서드를 사용해 DOM을 선택했습니다. 하지만 여기에는 문제가 있습니다. $ ('# test') 메서드가 호출되는 시점에 HTML 문서가 완전히 로드되지 않았다면 JS 코드가 오류를 일으킵니다.
이 경우 문서가 완전히 로드되었는지 확인하기 위해 $(document).ready 메서드를 사용합니다.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
위와 같이 정의한 후에는
$(document).ready() 메서드를 사용하기만 하면 됩니다. 이 메서드는 모든 콘텐츠가 로드될 때까지 기다린 다음 실행됩니다.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>질문
자, 질문에 답해 보세요!
축하합니다
축하합니다 🎉
이 섹션에서는 jQuery 라이브러리와 그 $(document).ready() 메서드를 학습하기 시작했습니다.
다음 섹션에서는 jQuery 선택자를 학습하겠습니다.
자주 묻는 질문
“jQuery 첫걸음” 강의는 무료인가요?
네 — “jQuery 첫걸음” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 1개의 강의가 포함되어 있습니다.
“jQuery 첫걸음”에서 뭘 배우나요?
jQuery 첫걸음 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
jQuery Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 1개 중 1번째 강의입니다.
“jQuery 첫걸음” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.