34일차

이예진·2025년 7월 14일

36강 아코디언 구현

문제.애니메이션 없는 버전

문제
정답
선생님 풀이영상

목표 기능
.item을 클릭했을 때 내부 .content를 즉시 표시하거나 숨김
(슬라이드 애니메이션 없이 바로 보여지거나 사라짐)

문제 요약

항목	설명
기존 동작	`slideToggle()` 사용으로 애니메이션 있음
문제 상황	애니메이션 없이 빠르게 열고 닫고 싶음
요구사항	클릭 시 즉시 보이거나 사라지게 처리 필요

정답 핵심 코드 (js)

$('.list > .item').click(function () { $(this).find('.content').toggle(); });

코드 해석 (JS 중심)

코드	설명
`$('.list > .item')`	`.item` 요소를 클릭 대상으로 설정
`$(this).find('.content')`	클릭한 `.item` 내부의 `.content` 찾기
`.toggle()`	보이면 숨기고, 숨기면 보이게 즉시 전환

핵심 정리표

동작	사용 메서드	설명
즉시 펼치기/접기	`.toggle()`	애니메이션 없이 즉시 전환 (show/hide)
자식 탐색	`.find()`	클릭된 요소 내부에서만 탐색 수행
클릭 대상 지정	`.list > .item`	각각의 아코디언 항목 개별 처리

한 줄 요약

toggle()로 클릭된 항목의 내용을 애니메이션 없이 빠르게 열고 닫음.

37강 아코디언 구현

문제. slideDown

문제
정답
선생님 풀이영상

목표 기능
.item을 클릭하면 자신의 .content만 slideDown()으로 펼쳐지고,
다른 항목들은 slideUp()으로 닫히도록 구현

문제 요약

항목	설명
기존 동작	`slideToggle()` 사용해 열리고 닫힘을 자동 처리
문제 상황	열린 항목이 하나만 유지되길 원하는데, 여러 개 열림 가능
요구 사항	하나 클릭하면 나머지는 닫히고, 클릭한 것만 열려야 함

정답 핵심 코드 (js)
$('.list > .item').click(function () {
// 다른 항목 닫기 $(this).siblings().find('.content').slideUp();
// 현재 항목 열기
$(this).find('.content').slideDown(); });

코드 해석 (JS 중심)

코드	설명
`$(this).siblings()`	클릭한 `.item`의 형제들 (다른 항목들)
`.find('.content').slideUp()`	다른 항목의 내용을 위로 접음
`$(this).find('.content').slideDown()`	현재 클릭한 항목만 부드럽게 펼침

핵심 정리표

동작	메서드	설명
다른 항목 닫기	`.siblings().find().slideUp()`	클릭된 항목 외의 콘텐츠 닫기
현재 항목 열기	`.find().slideDown()`	클릭된 항목만 부드럽게 열기
토글이 아닌 단일 열기	`slideDown()` + `slideUp()`	항상 하나만 열려 있도록 제어함

한 줄 요약

slideDown()과 slideUp() 조합으로 항상 하나의 아코디언만 열리도록 제어함.

38강 아코디언 구현

문제.

문제
정답 ?
선생님 풀이영상

목표 기능
아코디언 구조를 이용해 .content를 열고 닫을 때, 다양한 jQuery 메서드로 표현 방식 차이를 비교함

실험 개요

버튼 텍스트	사용한 jQuery 메서드	동작 방식
Show / Hide	`.show() / .hide()`	즉시 표시 / 즉시 숨김
Slide Down / Up	`.slideDown() / .slideUp()`	위아래로 부드럽게 열림/접힘
Fade In / Out	`.fadeIn() / .fadeOut()`	천천히 나타남 / 사라짐

주요 코드 요약 (js)
$('.btn-show-hide').click(function () {
$('.content').toggle(); // 즉시 표시/숨김 전환 });
$('.btn-slide').click(function () {
$('.content').slideToggle(); // 슬라이드 애니메이션 });
$('.btn-fade').click(function () {
$('.content').fadeToggle(); // 페이드 애니메이션 });

코드 해석

코드	설명
`toggle()`	`.show()`와 `.hide()` 자동 전환
`slideToggle()`	`slideDown()` ↔ `slideUp()` 전환
`fadeToggle()`	`fadeIn()` ↔ `fadeOut()` 전환
`.click(function () { ... })`	버튼 클릭 시 실행되는 이벤트 핸들러

핵심 정리표

메서드 종류	효과	특징
`.show() / .hide()`	즉시 보이기 / 숨기기	애니메이션 없음
`.slideDown() / slideUp()`	위아래로 열고 닫기	부드러운 아코디언 효과 구현 가능
`.fadeIn() / .fadeOut()`	천천히 나타남 / 사라짐	시각적으로 부드럽지만 공간 차지 유지

한 줄 요약
jQuery는 .show/hide, .slideDown/slideUp, .fadeIn/fadeOut 등의 메서드로 다양한 열기/닫기 애니메이션을 제공함.

39강 아코디언 구현

문제. slideUp

문제
정답
선생님 풀이영상

목표 기능
.item을 클릭하면 해당 항목은 slideDown() 되고, 나머지 항목은 slideUp() 되도록 구현

문제점 설명

항목	설명
현재 동작	클릭한 `.item`만 slideDown() 실행
문제 상황	이전에 열려 있던 다른 `.item`이 그대로 열려 있음
UX 기대	새로운 항목을 클릭하면 이전에 열린 항목은 자동으로 닫혀야 함
핵심 개선 포인트	클릭 시 하나만 열리고 나머지는 닫히는 아코디언 구조

정답 코드 요약
$('.list > .item').click(function () { $(this).find('.content').stop().slideDown(); // 클릭한 항목 열기 $(this).siblings().find('.content').stop().slideUp(); // 나머지 닫기 });

코드 해석

코드	설명
`$(this)`	현재 클릭한 `.item`
`.find('.content')`	해당 항목 내부 `.content` 선택
`.slideDown()`	부드럽게 열림
`.siblings()`	나를 제외한 다른 형제 `.item`
`.slideUp()`	부드럽게 닫힘
`.stop()`	중첩 애니메이션 방지 (중요)

핵심 정리표

동작 구분	처리 대상	jQuery 메서드
클릭한 항목 열기	`$(this).find('.content')`	`.stop().slideDown()`
나머지 항목 닫기	`$(this).siblings().find('.content')`	`.stop().slideUp()`
애니메이션 충돌 방지	모든 `.slide` 앞에 `.stop()` 추가	부드럽고 깔끔한 UX 구현 가능