Ch.10 이벤트와 완성 — 인터랙티브 홈페이지

프로젝트 갤러리 필터링

data-* 커스텀 속성을 HTML 요소에 추가하고 JS에서 읽을 수 있다filter()로 배열에서 조건에 맞는 항목만 추출할 수 있다필터 버튼 클릭 시 DOM을 동적으로 업데이트할 수 있다

카테고리를 클릭하면 해당 항목만 보여준다면?

포트폴리오 사이트의 갤러리에서 '웹', '앱', '디자인' 버튼을 누르면 해당 카테고리의 프로젝트만 나타나는 필터링 기능을 만들어봅시다.

JavaScript로 카테고리별 필터링을 구현하려면?

data 속성 + filter() — HTML에 메타데이터를 붙이고, JS로 조건 필터링하는 패턴입니다.

article

핵심 내용

HTML 요소에 사용자 정의 데이터를 data-* 속성으로 저장합니다

<!-- HTML: data-* 속성으로 카테고리 저장 -->
<div class="card" data-category="web">
  <h3>홈페이지 만들기</h3>
</div>
<div class="card" data-category="app">
  <h3>계산기 앱</h3>
</div>
<div class="card" data-category="web">
  <h3>블로그 사이트</h3>
</div>

// JavaScript: data 속성 읽기
const card = document.querySelector(".card");

// 방법 1: dataset 객체
console.log(card.dataset.category); // "web"

// 방법 2: getAttribute
console.log(card.getAttribute("data-category")); // "web"

data-* 속성은 HTML에 보이지 않는 메타데이터를 저장하는 표준 방법입니다. data-category, data-id, data-price 등 자유롭게 이름을 정할 수 있습니다.

filter()로 조건에 맞는 항목만 골라냅니다

const projects = [
  { name: "홈페이지", category: "web" },
  { name: "계산기 앱", category: "app" },
  { name: "블로그", category: "web" },
  { name: "날씨 앱", category: "app" },
  { name: "포스터", category: "design" },
];

// "web" 카테고리만 필터링
const webProjects = projects.filter(
  (p) => p.category === "web"
);
// [{name: "홈페이지", ...}, {name: "블로그", ...}]

// 필터링 + 렌더링 조합
const html = webProjects
  .map((p) => `<div class="card">${p.name}</div>`)
  .join("");

데이터 배열: 전체 프로젝트 목록

filter(): 조건에 맞는 항목만 추출

map(): HTML 문자열로 변환

innerHTML: DOM에 렌더링

필터 버튼을 클릭하면 해당 카테고리만 표시합니다

HTML의 data-category 속성을 JavaScript에서 읽으려면?

filter()는 원본 배열을 변경한다

data-* 속성은 JavaScript에서만 읽을 수 있고 CSS에서는 사용할 수 없다

갤러리 필터링 완성!

edit_note

정리 노트

갤러리 필터링 프로젝트 정리

data-* 커스텀 속성

data-category: HTML 요소에 카테고리 정보를 저장하는 커스텀 속성
dataset 접근: element.dataset.category로 JS에서 값 읽기
CSS 활용: [data-category="web"] 셀렉터로 CSS에서도 활용 가능

필터링 로직

filter(): 배열에서 조건에 맞는 항목만 추출
DOM 초기화: innerHTML = ""로 기존 요소를 제거 후 재렌더링
이벤트 위임: 필터 버튼 그룹에 하나의 리스너로 처리

★

data-* 속성은 HTML과 JS 사이의 데이터 전달 통로입니다.

check_circle

핵심 정리

1data-* 속성으로 HTML에 메타데이터 저장, dataset으로 접근
2filter()로 조건에 맞는 항목만 추출 (원본 불변)
3filter → map → innerHTML 렌더링 패턴

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작