초보자를 위한 jQuery
초보자를 위한 jQuery
초보자를 위한 jQuery은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 1개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 1개의 강의가 포함되어 있습니다.
소개
안녕하세요.
초보자를 위한 jQuery 과정에 오신 것을 환영합니다.
이 섹션에서는 jQuery에 대한 자세한 내용을 학습하기 시작하겠습니다.
소개 2
이 과정을 시작하기 전에
다음 과정들을 수강하기 위한 선수 과목을 이수해야 합니다.
- HTML 시작하기
- CSS 시작하기
- JavaScript 핵심
- 이 주제들에 대해 이미 알고 있다면 과정을 계속 진행하셔도 됩니다.
시작해 보겠습니다
시작해 보겠습니다.
먼저, jQuery가 어떤 용도로 사용되는지 알아보겠습니다.
질문에 답하기 전에 기본 내용을 복습해 보겠습니다
질문에 답하기 전에 기본 내용을 복습해 보겠습니다.
HTML은 마크업 언어입니다. 따라서 프로그래밍 언어가 아닌 텍스트 마크업 언어입니다. 객체 지향과 같은 개념과는 거리가 멉니다. 다시 말해, 구조 안에 객체가 없으며 우리가 알고 있는 것은 HTML 태그와 속성 등입니다.
JavaScript는 DOM에서 작업을 수행합니다
웹 페이지의 HTML 요소를 대상으로 작업해야 하는 경우가 많습니다. 이를 가능하게 하고 HTML 요소에 JS로 접근할 수 있도록, DOM(Document Object Model)이라는 모델로 표현합니다.
JavaScript는 웹 페이지에 해당하는 객체인 DOM에서 작업을 수행합니다. 이를 DOM 조작이라고 합니다.
예제
예를 들어 보겠습니다.
아래 예제와 같은 버튼 요소가 있고, 'Not Clicked'라는 텍스트가 표시되어 있습니다. 버튼을 클릭하면 버튼의 텍스트를 'Clicked'로 변경하겠습니다.
이를 위해 JavaScript 언어를 사용해 DOM을 조작해야 합니다.
JavaScript 입문 과정에서 JavaScript로 웹 문서를 제어하는 방법을 배웠습니다. jQuery는 JavaScript로 DOM을 조작할 때 코드를 더 간결하게 작성할 수 있도록 해 주는 라이브러리입니다.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>질문
여러분을 위한 질문입니다!
예제 2
아래 예제에서는 my-button이라는 id를 가진 버튼을 정의했습니다.
이제 DOM을 통해 JavaScript로 이 요소에 접근해 보겠습니다.
버튼을 클릭하면 JS 코드로 DOM에 접근해 my-button id를 가진 요소의 innerHTML 속성을 click으로 변경합니다.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>주의
jQuery는 JS 핵심 기능의 함수와 메서드를 쉽게 사용할 수 있도록 만들어진 라이브러리일 뿐입니다.
즉, VanillaJS로 할 수 있는 많은 작업을 더 쉬운 구문과 읽기 편한 방식으로 수행할 수 있게 해 줍니다.
예제 설명
코드를 설명해 보겠습니다.
let myButton = document.getElementById('my-button');
getElementById 메서드를 사용해 JavaScript document 객체를 myButton이라는 변수에 할당합니다.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
그런 다음 버튼의 click 이벤트를 수신하고 버튼을 변경했습니다.
위에서 네이티브 또는 바닐라라고 표현한 것처럼, 라이브러리나 프레임워크를 사용하지 않고 언어의 핵심 기능을 이용해 DOM을 조작했습니다.
이제 같은 코드를 jQuery로 작성해 보겠습니다. 그리고 jQuery 라이브러리가 제공하는 기능을 활용해 보겠습니다.
경고
여러 곳에서 VanillaJS라고 표현하는 개념은 실제로 순수하고 깔끔한 핵심 자바스크립트 객체, 메서드, 함수와 브라우저가 제공하는 기능만을 사용하는 것을 의미합니다.
jQuery 예제
아래에서는 이전 예제를 jQuery를 사용해 작성해 보았습니다.
구문을 무시해 코드를 지나치게 줄이지 않도록 주의하세요.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>축하합니다
축하합니다 🎉
이 섹션에서는 jQuery 학습을 시작했고, 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 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.