Computer Science/JQuery

[jQuery] 12. append(), prepend() 사용법

[jQuery] 12. append(), prepend() 사용법지난 글에서는 jQuery의 slideDown(), slideUp(), slideToggle()을 사용해서 요소를 접고 펼치는 방법을 알아봤습니다.이번 글에서는 HTML 요소 안에 새로운 내용을 추가할 때 사용하는 append()와 prepend()에 대해 알아보겠습니다.append()와 prepend()는 게시글 목록, 댓글 목록, 알림 목록, 장바구니 목록처럼 화면에 새로운 항목을 추가할 때 자주 사용하는 jQuery 메서드입니다.1. append(), prepend()란?jQuery에서 선택한 요소 안에 새로운 내용을 추가할 때 append()와 prepend()를 사용할 수 있습니다.append() : 선택한 요소의 안쪽 맨 뒤에 내..

2026. 6. 21. 06:03

Computer Science/JQuery

[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법

[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법지난 글에서는 jQuery의 fadeIn(), fadeOut(), fadeToggle()을 사용해서 요소가 서서히 나타나고 사라지는 효과를 알아봤습니다.이번 글에서는 요소가 위아래로 접히거나 펼쳐지는 효과를 만들 때 사용하는 slideDown(), slideUp(), slideToggle()에 대해 알아보겠습니다.slide 효과는 FAQ, 메뉴 열기/닫기, 설명 박스, 아코디언 UI처럼 접었다 펼치는 화면을 만들 때 자주 사용됩니다.1. slide 효과란?slide 효과는 요소의 높이를 조절해서 위아래로 펼쳐지거나 접히는 것처럼 보이게 만드는 jQuery 효과입니다.slideDown() : 숨겨진 요소를 아래..

2026. 6. 20. 23:30

Computer Science/JQuery

[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법

[jQuery] 10. fadeIn(), fadeOut(), fadeToggle() 사용법지난 글에서는 jQuery의 show(), hide(), toggle()을 사용해서 HTML 요소를 보이거나 숨기는 방법을 알아봤습니다.이번 글에서는 요소가 부드럽게 나타나거나 사라지도록 만드는 fadeIn(), fadeOut(), fadeToggle()에 대해 알아보겠습니다.fade 효과는 알림창, 안내 박스, 이미지, 카드 UI 등을 자연스럽게 보여줄 때 자주 사용됩니다.1. fade 효과란?fade 효과는 요소의 투명도를 조절해서 서서히 나타나거나 서서히 사라지게 만드는 효과입니다.fadeIn() : 숨겨진 요소가 서서히 나타납니다.fadeOut() : 보이는 요소가 서서히 사라집니다.fadeToggle() :..

2026. 6. 20. 20:51

Computer Science/JQuery

[jQuery] 09. show(), hide(), toggle() 사용법

[jQuery] 09. show(), hide(), toggle() 사용법지난 글에서는 jQuery의 addClass(), removeClass(), toggleClass()를 사용해서 CSS 클래스를 제어하는 방법을 알아봤습니다.이번 글에서는 HTML 요소를 화면에 보이게 하거나 숨길 때 사용하는 show(), hide(), toggle()에 대해 알아보겠습니다.이 메서드들은 버튼을 눌렀을 때 설명 박스를 열고 닫거나, 안내 문구를 숨기거나, 메뉴를 펼치고 접는 기능을 만들 때 자주 사용됩니다.1. show(), hide(), toggle()이란?jQuery에서는 요소의 표시 상태를 간단하게 제어할 수 있습니다.show() : 숨겨진 요소를 화면에 보여줍니다.hide() : 보이는 요소를 화면에서 숨깁..

2026. 6. 20. 20:20

Computer Science/JQuery

[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법

[jQuery] 08. addClass(), removeClass(), toggleClass() 사용법지난 글에서는 jQuery의 attr()와 prop()를 사용해서 HTML 속성과 상태 값을 다루는 방법을 알아봤습니다.이번 글에서는 jQuery에서 CSS 클래스를 추가하고, 제거하고, 켰다 껐다 할 수 있는 addClass(), removeClass(), toggleClass()에 대해 알아보겠습니다.이 메서드들은 화면 스타일을 동적으로 바꿀 때 정말 자주 사용됩니다. 버튼을 클릭했을 때 선택된 메뉴 표시, 다크 모드 전환, 카드 강조 효과 같은 기능을 만들 때 유용합니다.1. class를 왜 jQuery로 다룰까?HTML 요소의 스타일을 바꿀 때 css()를 사용할 수도 있습니다.$("#box")...

2026. 6. 20. 14:04

Computer Science/JQuery

[jQuery] 07. attr()와 prop() 사용법

[jQuery] 07. attr()와 prop() 사용법지난 글에서는 jQuery의 css() 메서드로 HTML 요소의 스타일을 변경하는 방법을 알아봤습니다.이번 글에서는 HTML 요소의 속성을 다룰 때 사용하는 attr()와 prop()에 대해 알아보겠습니다.처음 보면 attr()와 prop()는 비슷해 보이지만, 사용하는 상황이 다릅니다. 특히 체크박스, 라디오 버튼, disabled 같은 상태 값을 다룰 때는 차이를 꼭 알고 있어야 합니다.1. attr()란?attr()는 HTML 요소의 속성(attribute) 값을 가져오거나 변경할 때 사용하는 jQuery 메서드입니다.HTML 태그에는 id, class, src, href, alt, title 같은 속성이 있습니다.📌 예시구글 이동위 코드에서..

2026. 6. 19. 23:49

Computer Science/JQuery

[jQuery] 06. css()로 스타일 변경하기

[jQuery] 06. css()로 스타일 변경하기지난 글에서는 jQuery의 text(), html(), val() 사용법에 대해 알아봤습니다.이번 글에서는 jQuery에서 HTML 요소의 스타일을 변경할 때 사용하는 css() 메서드에 대해 알아보겠습니다.css()를 사용하면 글자 색상, 배경색, 크기, 여백, 테두리 같은 CSS 스타일을 jQuery 코드로 변경할 수 있습니다.1. css()란?css()는 선택한 HTML 요소의 CSS 스타일을 가져오거나 변경할 때 사용하는 jQuery 메서드입니다.기본 문법은 다음과 같습니다.$("선택자").css("속성", "값");예를 들어 글자 색상을 파란색으로 바꾸고 싶다면 다음과 같이 작성합니다.$("#text").css("color", "blue");위..

2026. 5. 21. 23:01

Computer Science/JQuery

jQuery 선택자 개념 정리 한눈에정리(그림포함)

jQuery 선택자 개념 정리jQuery 선택자는 HTML 문서 안에서 원하는 요소를 찾기 위해 사용하는 문법이다. 쉽게 말해, “어떤 태그를 선택해서 조작할 것인가?”를 정하는 기준이다.JavaScript에서도 document.querySelector()나 getElementById()를 사용해 요소를 찾을 수 있지만, jQuery는 $() 문법을 사용해 더 짧고 직관적으로 요소를 선택할 수 있다.$(선택자).동작();예를 들어 아래 코드는 class가 title인 요소의 글자 색을 빨간색으로 바꾼다.$(".title").css("color", "red");1. 기본 선택자선택자의미예시*모든 요소 선택$("*")태그명특정 태그 선택$("p")#id특정 id 선택$("#userName").class특정 ..

2026. 5. 13. 23:16