통합 요약노트
Ch.10 이벤트와 완성 — 인터랙티브 홈페이지
이벤트 리스너, 배열, 필터 갤러리, 애니메이션
이 챕터의 내용
이벤트 리스너
addEventListener — '이 버튼을 클릭하면 이 함수를 실행해' 라고 브라우저에 알려주는 방법입니다.
요소에 이벤트를 연결하여 사용자 행동에 반응합니다
이벤트 객체에는 유용한 정보가 가득합니다
클릭할 때마다 카운트가 올라가는 좋아요 버튼을 만들어봅시다
- addEventListener("이벤트", 함수)로 이벤트 등록
- event.target = 이벤트 발생 요소, event.preventDefault() = 기본 동작 방지
- click, input, submit 세 가지 핵심 이벤트
배열과 반복 — 동적 콘텐츠
배열 + 반복문 — 데이터를 저장하고, 반복적으로 DOM에 그리는 패턴입니다.
배열은 여러 값을 순서대로 하나의 변수에 저장합니다
배열을 순회하는 세 가지 방법을 비교합니다
배열 데이터를 map으로 카드 목록에 렌더링합니다
- 배열: [], push(), pop(), includes(), length
- for 루프 / forEach(반복) / map(변환 + 새 배열)
- map + innerHTML로 데이터 → HTML 렌더링 패턴
프로젝트 갤러리 필터링
data 속성 + filter() — HTML에 메타데이터를 붙이고, JS로 조건 필터링하는 패턴입니다.
HTML 요소에 사용자 정의 데이터를 data-* 속성으로 저장합니다
filter()로 조건에 맞는 항목만 골라냅니다
필터 버튼을 클릭하면 해당 카테고리만 표시합니다
- data-* 속성으로 HTML에 메타데이터 저장, dataset으로 접근
- filter()로 조건에 맞는 항목만 추출 (원본 불변)
- filter → map → innerHTML 렌더링 패턴
CSS 애니메이션 + 마무리
@keyframes + transition — CSS만으로 부드러운 애니메이션을 만드는 두 가지 방법입니다.
transition은 상태 변화를 부드럽게 연결합니다
@keyframes로 시작부터 끝까지 애니메이션을 정의합니다
fadeIn 애니메이션과 hover 효과를 카드에 적용합니다
- Ch1-2: HTML — 웹의 뼈대, 태그, 시맨틱 구조, 폼
- Ch3-4: CSS — 셀렉터, 색상, Box Model, 단위
- Ch5-6: 레이아웃 — Flexbox, Grid, 반응형 미디어쿼리
- Ch7-8: 실전 CSS — 컴포넌트, 네비게이션, 변수, 접근성
- Ch9: JavaScript — 변수, 타입, 조건문, 함수, DOM 조작
- Ch10: 완성 — 이벤트, 배열, 필터링, CSS 애니메이션
- 이제 HTML + CSS + JavaScript를 모두 다룰 수 있습니다!
핵심 용어 모음
click
요소를 클릭했을 때
input
입력 필드의 값이 변할 때
submit
폼이 제출될 때
keydown
키보드 키를 눌렀을 때
push()
맨 뒤에 요소 추가
pop()
맨 뒤 요소 제거 및 반환
length
배열 길이 (요소 개수)
includes()
특정 값 포함 여부 (true/false)
translateY(-4px)
위로 4px 이동 (떠오르는 효과)
scale(1.05)
5% 확대 (강조 효과)
rotate(45deg)
45도 회전
조합
translateY(-4px) scale(1.02) 동시 적용 가능
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기