33일차

이예진·2025년 7월 10일

28강 아코디언 구현

문제.클릭 당하면 배경색이 변함, toggle

문제
정답
선생님 풀이영상

문제 요약

항목	설명
현재 동작	`.item` 클릭해도 아무 변화 없음
문제 상황	클릭 시 스타일 변화가 없어 선택 여부를 확인할 수 없음
기대 동작	클릭할 때마다 `.active`가 토글되며 배경색이 바뀌어야 함
UX 문제	선택 여부를 시각적으로 알 수 없어 불편함

정답 핵심 코드
$('.list > .item').click(function () { $(this).toggleClass('active'); });

코드 해석 (JS 중심)

코드	설명
`$('.list > .item')`	`.list` 안에 있는 `.item`들을 모두 선택
`.click(function () { ... })`	각 `.item`에 클릭 이벤트 연결
`$(this)`	현재 클릭한 `.item` 요소를 가리킴
`.toggleClass('active')`	`.active` 클래스가 있으면 제거, 없으면 추가 (toggle 효과)

핵심 정리표

기능	처리 방식	결과
클릭 시 강조 표시	`.toggleClass('active')`	`.active` 클래스 on/off
클릭 대상 추적	`$(this)`	현재 클릭한 항목만 작동
배경색 스타일 적용	CSS에서 `.item.active { ... }` 정의	클래스 기반 시각 효과

한 줄 요약
toggleClass()를 사용해 .item 클릭 시 배경색이 토글되도록 구현해줌.

29강 아코디언 구현

문제.아코디언 구현, 클릭 당하면 양 옆의 배경색이 변함, next, prev

문제
정답
선생님 문제 풀이

문제 요약

항목	설명
현재 동작	클릭한 항목만 `.active` 클래스가 토글됨
문제 상황	클릭 시 양 옆의 항목에는 아무 변화 없음
기대 동작	클릭한 항목과 함께 바로 양 옆 항목도 `.active` 상태 적용
UX 의도	관련된 항목을 함께 강조하여 구조적 관계를 표현하고자 함

정답 핵심 코드
$('.list > .item').click(function () { $(this).prev().toggleClass('active'); // 이전 항목
$(this).toggleClass('active'); // 현재 항목
$(this).next().toggleClass('active'); // 다음 항목
});

코드 해석 (JS 중심)

코드	설명
`$(this)`	클릭된 `.item` 요소 자신
`.prev()`	바로 앞에 있는 형제 요소 (`이전 항목`) 선택
`.next()`	바로 뒤에 있는 형제 요소 (`다음 항목`) 선택
`.toggleClass('active')`	해당 요소에 `.active` 클래스 on/off

핵심 정리표

동작	대상	처리 방식
현재 항목 토글	`$(this)`	`.toggleClass('active')`
이전 항목 토글	`$(this).prev()`	`.toggleClass('active')`
다음 항목 토글	`$(this).next()`	`.toggleClass('active')`
스타일 적용 방식	`.item.active` (CSS)	배경색 등 스타일 정의

한 줄 요약
클릭한 항목과 양 옆의 항목 모두 .active 클래스를 toggle하여 함께 배경색을 바꿔줌.

30강 아코디언 구현

문제.마우스올림하면 양 옆의 배경색이 변함, mouseenter

문제
정답
선생님 문제 풀이

문제 요약

항목	설명
현재 동작	아무 항목에 마우스를 올려도 반응 없음
기대 동작	마우스를 올리면 양 옆 요소에 `.active` 클래스가 추가되어 배경색 변화
UX 의도	마우스를 올린 항목 주변을 함께 강조하여 구조적 관계 표현
이벤트 방식 문제	`click`이 아니라 `mouseenter`를 사용해야 함

정답 핵심 코드
$('.list > .item').mouseenter(function () {
$(this).prev().addClass('active'); // 이전 항목 강조
$(this).next().addClass('active'); // 다음 항목 강조 });
$('.list > .item').mouseleave(function () {
$(this).prev().removeClass('active'); // 이전 항목 강조 제거
$(this).next().removeClass('active'); // 다음 항목 강조 제거 });

코드 해석 (JS 중심)

코드	설명
`.mouseenter()`	마우스가 요소 위에 올라갔을 때 실행됨 (hover 시작)
`.mouseleave()`	마우스가 요소 밖으로 나갔을 때 실행됨 (hover 종료)
`$(this).prev()`	이전 형제 요소 선택
`$(this).next()`	다음 형제 요소 선택
`.addClass('active')`	배경 강조를 위한 클래스 추가
`.removeClass('active')`	강조 제거

핵심 정리표

동작	메서드	대상
마우스 올렸을 때	`mouseenter`	`.item`
강조 효과 적용	`.prev().addClass()` `.next().addClass()`	양 옆 요소
마우스 내렸을 때	`mouseleave`	`.item`
강조 효과 제거	`.prev().removeClass()` `.next().removeClass()`	양 옆 요소
스타일 변화 조건	`.active` 클래스 CSS로 지정	`.item.active`

한 줄 요약
mouseenter로 마우스를 올리면 이전/다음 항목에 .active를 추가해 주변 강조 효과를 줌.

31강 아코디언 구현

문제.클릭당한 녀석을 제외한 모든 녀석 선택

문제
정답
선생님 문제 풀이

문제 요약

항목	설명
현재 동작	클릭한 항목에만 `.active`가 적용됨
문제 상황	클릭하지 않은 다른 항목은 아무 반응 없음
기대 동작	클릭한 항목은 그대로 두고, 다른 항목들에만 `.active`를 추가 또는 제거
활용 목적	선택한 항목과 나머지를 시각적으로 구분하고자 할 때 유용

정답 핵심 코드
$('.list > .item').click(function () { $(this).siblings().addClass('active'); // 나를 제외한 모든 형제에 active 추가
$(this).removeClass('active'); // 나만 active 제거
});

코드 해석 (JS 중심)

코드	설명
`$(this)`	클릭된 `.item` 요소 자신
`.siblings()`	나를 제외한 같은 부모 아래 모든 `.item` 요소
`.addClass('active')`	형제 요소들에 `.active` 클래스 추가
`.removeClass('active')`	클릭된 나 자신에서는 `.active` 제거

핵심 정리표

동작	대상	처리 방식
자신 제외 전체 선택	`$(this).siblings()`	나를 제외한 형제 요소 선택
나머지 강조	`.addClass('active')`	나머지 항목에 배경색 적용
현재 항목 비활성화	`.removeClass('active')`	나만 강조 해제
구조 활용	`.list > .item` 구조 내에서 동작	아코디언, 메뉴 등에서 응용 가능

한 줄 요약
siblings()를 사용하면 클릭된 항목을 제외한 나머지 형제 요소만 선택 가능함.

32강 아코디언 구현

문제.클릭당한 녀석을 제외한 모든 녀석 선택, parent, children

문제
정답
선생님 문제 풀이

목표 기능

item 클릭 시,
해당 항목을 제외한 나머지 형제 요소들에 .active 클래스를 추가함

단, 이번엔 siblings() 대신 parent()와 children()을 사용하여 구현

문제 요약

항목	설명
기존 방식	`siblings()`로 자신을 제외한 형제 요소를 선택함
문제 상황	`siblings()`을 안 쓰고, 같은 동작을 구현해야 함
해결 조건	`parent()`와 `children()`을 활용해 동일한 효과를 낼 것
학습 목표	DOM 탐색 메서드의 활용 방식 이해

정답 핵심 코드
$('.list > .item').click(function () { let $parent = $(this).parent(); // .list 선택
$parent.children().removeClass('active'); // 전체 초기화
$(this).addClass('active'); // 현재 클릭된 항목만 강조 });

코드 해석 (JS 중심)

코드	설명
`$(this).parent()`	`.item`의 부모 요소인 `.list` 선택
`.children()`	`.list` 안에 있는 모든 `.item` 요소 선택
`.removeClass('active')`	전체 `.item`에서 강조 제거
`$(this).addClass('active')`	현재 클릭된 항목에만 `.active` 적용

핵심 정리표

개념	메서드	설명
부모 찾기	`parent()`	현재 클릭한 요소의 상위 요소를 탐색함
자식 요소 선택	`children()`	부모 요소의 직속 자식 요소들을 선택함
상태 초기화	`removeClass('active')`	전체 항목의 강조 제거
강조 처리	`addClass('active')`	클릭한 항목에 강조 적용
유지 방식	클릭한 항목만 `.active` 상태 유지	UX 일관성 확보

한 줄 요약
parent()와 children()을 조합하면 siblings() 없이도 나를 제외한 나머지를 제어할 수 있음.

33강 아코디언 구현

문제.클릭당한 녀석을 제외한 모든 녀석 선택, find

문제
정답
선생님 문제 풀이

목표기능
.item 클릭 시,
자신을 제외한 나머지 항목들만 .active 클래스를 갖도록 처리
→ 이번엔 find()를 활용해 구현

문제 요약

항목	설명
기존 방법	`siblings()` 또는 `parent().children()` 활용
요구 조건	`find()` 메서드를 연습해보는 과제
목적	선택자 탐색 방식 다양화, `find()` 활용 학습

정답 핵심 코드
$('.list > .item').click(function () {
// 전체 아이템 중에서 this 자신을 제외한 것에 active 클래스 추가 $('.list').find('.item').not(this).addClass('active'); });

코드 해석 (JS 중심)

코드	설명
`$('.list')`	`.item`들의 부모 리스트 요소 선택
`.find('.item')`	`.list` 내부의 모든 `.item` 요소 탐색
`.not(this)`	현재 클릭한 `.item`은 제외
`.addClass('active')`	나머지 항목에 `.active` 클래스 추가

핵심 정리표

개념	메서드	설명
전체 항목 찾기	`find('.item')`	부모 안에 있는 모든 자식 `.item` 선택
현재 요소 제외	`.not(this)`	클릭된 항목은 제외하고 나머지만 선택
상태 부여	`.addClass('active')`	나머지 항목에만 강조 클래스 적용

한 줄 요약
find().not(this) 조합으로 클릭된 항목을 제외한 나머지 항목만 선택 가능함

34강 아코디언 구현

문제. 클릭당한 녀석을 제외한 모든 녀석 선택, siblings

문제
정답
선생님 문제 풀이

목표기능
.item 클릭 시,
자기 자신을 제외한 나머지 .item 요소들에 .active 클래스를 추가함
→ 이번엔 가장 직관적인 siblings() 메서드를 사용

문제 요약

항목	설명
요구 동작	클릭한 항목만 강조 제거하고 나머지는 강조함
기존 구조	`.item` 여러 개가 `.list` 안에 있음
요구 조건	`siblings()`로 나머지 항목만 선택

정답 핵심 코드
$('.list > .item').click(function () { $(this).siblings().addClass('active'); // 나 빼고 나머지에 active
$(this).removeClass('active'); // 나한테는 active 제거 });

코드 해석 (JS 중심)

코드	설명
`$(this)`	현재 클릭된 `.item` 요소
`.siblings()`	나를 제외한 같은 부모 아래 형제 `.item` 선택
`.addClass('active')`	나머지 항목에 강조 스타일 적용
`.removeClass('active')`	현재 클릭된 항목은 강조 제거

핵심 정리표

메서드	설명
`siblings()`	자기 자신을 제외한 형제 요소를 모두 선택함
`addClass()`	클래스 추가 (강조용)
`removeClass()`	클래스 제거 (비강조 처리)
UX 결과	나만 빠지고 나머지 모두 강조되는 반대 패턴 구현

한 줄 요약
siblings()는 자신을 제외한 형제 요소만 골라서 조작할 때 가장 직관적인 방법임.

35강 아코디언 구현

문제.기본 디자인

문제
정답

선생님 영상
기본 디자인 구성
코드 정리하는 법

목표 기능
.item을 클릭하면 내부 .content가 보였다가 다시 사라지는 toggle 동작 수행

문제 요약

항목	설명
현재 구조	`.item` 내부에 `.content` 포함
요구 동작	`.item` 클릭 시 해당 `.content`만 펼치거나 접음
toggle 방식	`slideToggle()` 사용하여 자연스러운 애니메이션 처리

정답 핵심 코드
$('.list > .item').click(function () { $(this).find('.content').slideToggle(); });

코드 해석

코드	설명
`$('.list > .item')`	클릭 이벤트를 줄 대상 `.item` 선택
`$(this).find('.content')`	클릭한 `.item` 내부의 `.content` 요소 탐색
`.slideToggle()`	해당 요소를 자연스럽게 펼치거나 접음 (toggle)

핵심 정리표

개념	설명
toggle 애니메이션	`.slideToggle()` → 접힘/펼침 자동 전환
현재 대상 선택	`this` → 현재 클릭된 `.item` 요소
자식 요소 탐색	`.find('.content')`
아코디언 핵심 원리	클릭 시 자기 내부 `.content`를 펼치거나 닫는 구조