Computer Science/JQuery

[jQuery] 20. 자주 하는 실수와 마무리 정리

[jQuery] 20. 자주 하는 실수와 마무리 정리지난 글에서는 jQuery Ajax를 사용해서 검색 기능을 만드는 방법을 알아봤습니다.이번 글에서는 jQuery 입문 시리즈를 마무리하면서, 초보자가 자주 하는 실수와 꼭 기억해야 할 핵심 개념을 정리해보겠습니다.jQuery는 문법이 짧고 사용하기 쉽지만, 선택자나 이벤트 처리 방식을 헷갈리면 예상과 다르게 동작할 수 있습니다.이번 글을 통해 지금까지 배운 내용을 한 번 더 정리해보겠습니다.1. jQuery 연결을 빼먹는 실수jQuery 문법을 사용하려면 먼저 jQuery 라이브러리를 HTML에 연결해야 합니다.jQuery를 연결하지 않으면 $ is not defined 같은 오류가 발생할 수 있습니다.📌 jQuery CDN 연결jQuery 코드를 작..

2026. 7. 1. 11:38

Computer Science/JQuery

[jQuery] 19. Ajax로 검색 기능 만들기

[jQuery] 19. Ajax로 검색 기능 만들기지난 글에서는 jQuery의 Ajax 기초 사용법에 대해 알아봤습니다.이번 글에서는 Ajax를 활용해서 검색 기능을 만드는 방법을 알아보겠습니다.검색 기능은 게시글 검색, 상품 검색, 회원 검색, 영화 검색, 자동완성 검색처럼 실제 웹 서비스에서 정말 자주 사용됩니다.Ajax 검색을 사용하면 페이지 전체를 새로고침하지 않고, 검색 결과 영역만 부드럽게 바꿀 수 있습니다.1. Ajax 검색이란?Ajax 검색은 사용자가 입력한 검색어를 서버로 보내고, 서버에서 받은 결과를 화면 일부에만 출력하는 방식입니다.일반 검색은 검색 버튼을 누르면 페이지가 새로고침되거나 다른 페이지로 이동할 수 있습니다.하지만 Ajax 검색은 현재 페이지를 유지한 채 검색 결과 영역만..

2026. 6. 30. 20:48

Computer Science/JQuery

[jQuery] 18. Ajax 기초 사용법

[jQuery] 18. Ajax 기초 사용법지난 글에서는 jQuery의 form 이벤트를 사용해서 입력값 검사, 선택값 변경, 글자 수 세기 같은 기능을 만드는 방법을 알아봤습니다.이번 글에서는 서버와 데이터를 주고받을 때 사용하는 Ajax에 대해 알아보겠습니다.Ajax를 사용하면 페이지를 새로고침하지 않고도 서버에서 데이터를 가져오거나 서버로 데이터를 보낼 수 있습니다.1. Ajax란?Ajax는 웹 페이지 전체를 다시 불러오지 않고, 필요한 데이터만 서버와 주고받는 방식입니다.예를 들어 게시글 목록 더보기, 댓글 작성, 아이디 중복 확인, 검색 자동완성, 좋아요 버튼 같은 기능은 Ajax로 만들 수 있습니다.페이지 새로고침 없이 데이터 요청 가능서버에서 받은 데이터를 화면 일부에만 표시 가능사용자 경험..

2026. 6. 29. 13:05

Computer Science/JQuery

[jQuery] 17. form 이벤트 사용법

[jQuery] 17. form 이벤트 사용법지난 글에서는 jQuery의 siblings(), next(), prev()를 사용해서 형제 요소를 찾는 방법을 알아봤습니다.이번 글에서는 input, select, textarea, checkbox 같은 폼 요소에서 자주 사용하는 form 이벤트에 대해 알아보겠습니다.form 이벤트를 알면 입력값 검사, 검색창 반응, 선택값 변경, 글자 수 세기, 체크박스 동의 확인 같은 기능을 만들 수 있습니다.1. form 이벤트란?form 이벤트는 사용자가 입력창에 글자를 입력하거나, 선택 박스를 바꾸거나, 폼을 제출할 때 발생하는 이벤트입니다.대표적인 form 이벤트는 다음과 같습니다.submit : form이 제출될 때 실행됩니다.change : select, ch..

2026. 6. 28. 23:49

Computer Science/JQuery

[jQuery] 16. siblings(), next(), prev() 사용법

[jQuery] 16. siblings(), next(), prev() 사용법지난 글에서는 jQuery의 parent(), children(), find()를 사용해서 부모 요소, 자식 요소, 하위 요소를 찾는 방법을 알아봤습니다.이번 글에서는 선택한 요소를 기준으로 같은 위치에 있는 형제 요소를 찾을 때 사용하는 siblings(), next(), prev()에 대해 알아보겠습니다.이 메서드들은 탭 메뉴, 이전/다음 버튼, 선택된 항목 강조, FAQ 목록처럼 같은 부모 안에 나란히 있는 요소들을 제어할 때 자주 사용됩니다.1. 형제 요소란?HTML에서 같은 부모 요소 안에 나란히 들어 있는 요소들을 형제 요소라고 합니다.📌 HTML 구조 첫 번째 항목 두 번째 항목 세 번째 항목위 코드에서 li..

2026. 6. 28. 01:20

Computer Science/JQuery

[jQuery] 15. parent(), children(), find() 사용법

[jQuery] 15. parent(), children(), find() 사용법지난 글에서는 jQuery의 remove(), empty()를 사용해서 HTML 요소를 삭제하거나 내부 내용을 비우는 방법을 알아봤습니다.이번 글에서는 선택한 요소를 기준으로 부모 요소, 자식 요소, 하위 요소를 찾을 때 사용하는 parent(), children(), find()에 대해 알아보겠습니다.이 메서드들은 HTML 구조 안에서 원하는 요소를 정확하게 찾을 때 자주 사용됩니다. 특히 버튼을 클릭했을 때 그 버튼이 들어 있는 카드, 목록, 박스 안의 특정 요소만 바꾸고 싶을 때 유용합니다.1. parent(), children(), find()란?HTML은 부모와 자식 구조로 이루어져 있습니다.예를 들어 div 안에 ..

2026. 6. 26. 17:47

Computer Science/JQuery

[jQuery] 14. remove(), empty() 사용법

[jQuery] 14. remove(), empty() 사용법지난 글에서는 jQuery의 before(), after()를 사용해서 선택한 요소의 앞뒤에 새로운 내용을 추가하는 방법을 알아봤습니다.이번 글에서는 HTML 요소를 삭제할 때 사용하는 remove()와 empty()에 대해 알아보겠습니다.append(), prepend(), before(), after()로 요소를 추가했다면, 이제는 필요 없는 요소를 지우는 방법도 알아야 합니다.1. remove(), empty()란?jQuery에서 요소를 삭제할 때는 remove()와 empty()를 사용할 수 있습니다.remove() : 선택한 요소 자체를 삭제합니다.empty() : 선택한 요소는 남기고, 그 안의 내용만 비웁니다.두 메서드는 모두 삭제..

2026. 6. 25. 14:05

Computer Science/JQuery

[jQuery] 13. before(), after() 사용법

[jQuery] 13. before(), after() 사용법지난 글에서는 jQuery의 append(), prepend()를 사용해서 선택한 요소 안쪽에 새로운 내용을 추가하는 방법을 알아봤습니다.이번 글에서는 선택한 요소의 바깥쪽 앞뒤에 내용을 추가할 때 사용하는 before()와 after()에 대해 알아보겠습니다.append(), prepend()가 선택한 요소의 안쪽에 내용을 추가한다면, before(), after()는 선택한 요소의 바깥쪽 앞이나 뒤에 내용을 추가합니다.1. before(), after()란?jQuery에서 before()와 after()는 선택한 요소를 기준으로 앞이나 뒤에 새로운 요소를 추가할 때 사용합니다.before() : 선택한 요소의 바로 앞에 내용을 추가합니다.a..

2026. 6. 22. 23:40