42일차
HTML, CSS, JS 활용 8강 before 나 after 에 폰트어썸 아이콘 넣기
폰트어썸 - 아이콘, 모든 무료아이콘
CODEPEN - 폰트어썸
CODEPEN - 폰트어썸 before, after
선생님 영상
HTML, CSS, JS 활용 9강 아코디언 메뉴
CODEPEN - 폰트어썸
CODEPEN - 폰트어썸 before, after
CODEPEN - 시작
CODEPEN - 정답
선생님영상
문제 설명
- 아코디언 메뉴를 구현해야 함
.item을 클릭하면 해당.content-box만 열리고, 나머지는 닫혀야 함- 열릴 때만
.content-box에 active 클래스 부여
정답 코드 설명
js
$('.item').click(function () {
let $clicked = $(this);
let $allContents = $('.content-box');
// 모든 콘텐츠를 닫음
$allContents.removeClass('active');
// 클릭한 아이템의 다음 요소(content-box)를 열어줌
$clicked.next().addClass('active'); });
문제 vs 정답 비교표
| 구분 | 문제 코드 | 정답 코드 |
|---|---|---|
| 클릭 후 반응 | 없음 | .next()로 다음 요소 선택 |
| 열린 상태 유지 | 안됨 | removeClass 후 addClass 적용 |
| 나머지 닫힘 처리 | 미구현 | .removeClass('active') 사용 |
코드 해석
js
$('.item').click(function () { let $clicked = $(this);// 현재 클릭된 .item
let $allContents = $('.content-box'); // 전체 아코디언 내용 박스
$allContents.removeClass('active'); // 모든 내용 숨기기
$clicked.next().addClass('active'); // 클릭한 아이템 다음 요소만 보여주기
});
핵심 정리표
| 키워드 | 설명 |
|---|---|
.click() | 클릭 이벤트 감지 |
$(this) | 현재 클릭된 요소 참조 |
.next() | 바로 다음 형제 요소 선택 |
.removeClass() | 클래스 제거 |
.addClass() | 클래스 추가 |
한줄 요약
클릭된.item의 다음 요소만 열리고, 나머지는 닫히도록next()와removeClass,addClass를 사용함.
HTML, CSS, JS 활용 10강 체크박스, 전체선택 및 해제
1부: 체크박스 기본 구조 만들기
기능요약
- 전체선택 체크박스 1개
- 개별 체크박스 3개
구조
HTML
<input type="checkbox" class="check-all">전체선택
<input type="checkbox" class="check-item">항목1
<input type="checkbox" class="check-item">항목2
<input type="checkbox" class="check-item">항목3
한줄 요약
전체선택/개별선택 구조의 UI 레이아웃만 구성함.
2부: 전체선택을 누르면 모두 체크됨
js
$('.check-all').change(function () { let isChecked = $(this).prop('checked');
$('.check-item').prop('checked', isChecked); });
설명
.check-all이 체크되면, 그 상태를.check-item에 모두 적용함.
코드 해석
.prop('checked'): 체크 여부를 true/false로 반환.prop('checked', isChecked): true면 체크, false면 해제
핵심 정리표
| 개념 | 설명 |
|---|---|
.change() | 값이 바뀔 때 실행 |
.prop() | 체크 여부를 읽거나 설정함 |
한줄 요약
전체선택 체크 시 모든 개별 항목이 동시에 체크됨.
3부: 개별 체크박스 상태에 따라 전체선택 체크 여부 갱신
주요 코드
js
$('.check-item').change(function () { let allCount = $('.check-item').length;
let checkedCount = $('.check-item:checked').length;
$('.check-all').prop('checked', allCount === checkedCount); });
설명
- 체크된 항목 수가 전체 개수와 같으면 전체선택도 체크됨
- 하나라도 빠지면 전체선택은 체크 해제됨
코드 해석
| 변수 | 의미 |
|---|---|
allCount | 전체 항목 개수 |
checkedCount | 체크된 항목 개수 |
.check-all은 두 값이 같을 때만 true
한줄 요약
전체선택 체크박스는 개별 항목 모두 체크됐을 때만 자동 체크됨.
4부: 전체선택 기능 개선 (UX 측면)
개선 내용
더 명확한 코드 분리와 유지 보수성 향상
.change()핸들러를 명확하게 분리해서 읽기 쉽게 개선함
추가 UX 개선 가능
라벨 연결 (<label for="">)로 클릭 영역 확대
- 체크박스 순서 변경/스타일링
한줄 요약
전체선택/해제 기능을 유지하면서 코드 구조를 읽기 쉽게 리팩토링함.
전체 흐름 요약표
| 단계 | 기능 요약 | 핵심 JS 메서드 |
|---|---|---|
| 1부 | 전체선택/개별선택 체크박스 구조 | 없음 |
| 2부 | 전체선택 시 모두 체크 | .change(), .prop() |
| 3부 | 개별 체크에 따라 전체선택 체크 여부 반영 | .length, .prop() |
| 4부 | 코드 개선, 유지보수성 향상 | 코드 리팩토링 |
전체 한줄 요약
전체선택 체크박스와 개별 항목 간의 체크 상태를 연동하며, UX 향상과 코드 가독성까지 고려한 아코디언 체크 시스템을 구현함.
HTML, CSS, JS 활용 11강 Masonry 사용법
HTML, CSS, JS 활용 12강 smooth scrollbar 사용법
HTML, CSS, JS 활용 13강 이메일 입력상자의 상태별 메세지
