웹 페이지에서 카테고리별로 콘텐츠를 걸러 보여 주는 필터 기능은 사용자 경험을 크게 향상시키는 대표적인 UI 패턴입니다. 이 글에서는 CSS와 JavaScript만으로 클래스 이름(class name)을 기준으로 DIV 요소를 필터링하는 방법을 예제와 함께 자세히 살펴보겠습니다.
동작 원리
필터링의 핵심 로직은 다음과 같습니다.
- 각 DIV 요소는 공통 클래스
filterElements와 함께 카테고리를 나타내는 클래스(animals,fruits)를 가집니다. - 버튼을 클릭하면
filterSelection()함수가 실행되어 해당 카테고리와 일치하는 요소에show클래스를 추가하고, 일치하지 않는 요소에서는 제거합니다. - CSS에서
.filterElements는 기본적으로display: none;으로 숨겨져 있으며,.show클래스가 붙으면display: block;으로 화면에 표시됩니다. - 현재 선택된 버튼에는
active클래스를 부여해 어떤 필터가 적용 중인지 시각적으로 알려 줍니다.
예제 코드
<!DOCTYPE html>
<html>
<style>
.filterElements {
float: left;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 20px;
background-color: rgb(28, 98, 179);
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
}
.btn {
border: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px;
outline: none;
padding: 12px 16px;
background-color: #d6e5ec;
cursor: pointer;
}
.btn:hover {
background-color: rgb(157, 209, 211);
}
.btn.active {
background-color: rgb(34, 95, 228);
color: white;
}
</style>
<body>
<h1>DIV 요소 필터링 예제</h1>
<div class="filterBtns">
<button class="btn active" onclick="filterSelection('all')">모두 보기</button>
<button class="btn" onclick="filterSelection('animals')">동물</button>
<button class="btn" onclick="filterSelection('fruits')">과일</button>
</div>
<div class="container">
<div class="filterElements fruits">오렌지</div>
<div class="filterElements animals">기린</div>
<div class="filterElements animals">치타</div>
<div class="filterElements animals">사자</div>
<div class="filterElements fruits">구아바</div>
<div class="filterElements animals">개</div>
<div class="filterElements fruits">바나나</div>
<div class="filterElements fruits">망고</div>
<div class="filterElements animals">황소</div>
</div>
<script>
filterSelection("all");
function filterSelection(c) {
var x, i;
x = document.querySelectorAll(".filterElements");
if (c == "all") c = "";
Array.from(x).forEach(item => {
removeActiveClass(item, "show");
if (item.className.indexOf(c) > -1) addActiveClass(item, "show");
});
}
function addActiveClass(ele, name) {
var i, arr1, arr2;
arr1 = ele.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
ele.className += " " + arr2[i];
}
}
}
function removeActiveClass(ele, name) {
var i, arr1, arr2;
arr1 = ele.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
ele.className = arr1.join(" ");
}
var filterBtns = document.querySelector(".filterBtns");
var btns = filterBtns.getElementsByTagName("button");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>코드 설명
1. filterSelection() 함수
document.querySelectorAll(".filterElements")로 모든 필터 대상 요소를 가져온 뒤, 전달받은 카테고리 값이 "all"이면 빈 문자열로 바꿔 모든 요소가 조건에 일치하도록 처리합니다. 각 요소의 className에 카테고리 문자열이 포함되어 있는지 확인하여 show 클래스를 추가하거나 제거합니다.
2. addActiveClass() / removeActiveClass() 함수
클래스 이름을 공백 기준으로 배열로 분리한 후, 중복 추가를 방지하면서 클래스를 더하거나(addActiveClass), 해당 클래스가 완전히 제거될 때까지 반복해서 삭제합니다(removeActiveClass). 이렇게 하면 여러 개의 클래스를 안전하게 관리할 수 있습니다.
3. 활성 버튼 상태 관리
마지막 부분에서는 모든 필터 버튼에 클릭 이벤트 리스너를 등록합니다. 클릭 시 기존에 active 클래스를 가진 버튼에서 이를 제거하고, 현재 클릭된 버튼에 active 클래스를 추가하여 선택 상태를 표시합니다.
실행 결과
위 코드를 실행하면 다음과 같이 초기 화면에 모든 요소가 표시됩니다.
필터 버튼(예: 동물 또는 과일)을 클릭하면 해당 카테고리에 속한 요소만 화면에 남게 됩니다.
마무리
이처럼 클래스 이름과 간단한 DOM 조작만으로도 별도의 라이브러리 없이 강력한 필터링 기능을 구현할 수 있습니다. 실무에서는 classList.add(), classList.remove(), classList.toggle() 같은 최신 API를 활용하면 코드를 더욱 간결하게 작성할 수 있으니 참고하시기 바랍니다.