[시험대비JS] 탭 (폐기 AI이나쁜놈이)

---

✅ 요구사항 기반 전제

• JS는 오직 “카드 필터링 + 카드박스 배경색 변경”만 처리
• 탭 버튼 시각 효과는 CSS :hover로 처리
• tab0, tab1, tab2, tab3 구조 기준

---

✅ ✂️ 외우기

let 탭버튼들 = document.querySelectorAll('.탭버튼'); 
let 카드들 = document.querySelectorAll('.카드'); 
let 카드박스 = document.querySelector('.tab-content'); 

탭버튼들.forEach(버튼 =>
  버튼.addEventListener('click', () => {
    let 이름 = 버튼.id;

    카드들.forEach(카드 =>
      카드.style.display = 이름 === 'tab0' || 카드.classList.contains(이름)
        ? 'block'
        : 'none'
    );

    카드박스.classList.remove('tab1배경', 'tab2배경', 'tab3배경');
    if (이름 === 'tab1') 카드박스.classList.add('tab1배경');
    if (이름 === 'tab2') 카드박스.classList.add('tab2배경');
    if (이름 === 'tab3') 카드박스.classList.add('tab3배경');
  })
);

---

✅ 🔧 HTML 예시 구조

<div class="container">
  <div class="tab-btn-box">
    <button class="탭버튼" id="tab0">전체</button>
    <button class="탭버튼" id="tab1">탭1</button>
    <button class="탭버튼" id="tab2">탭2</button>
    <button class="탭버튼" id="tab3">탭3</button>
  </div>

  <div class="tab-content">
    <div class="카드 tab1">카드1</div>
    <div class="카드 tab1">카드2</div>
    <div class="카드 tab2">카드3</div>
    <div class="카드 tab2">카드4</div>
    <div class="카드 tab3">카드5</div>
    <div class="카드 tab3">카드6</div>
  </div>
</div>

---

✅ 주석 풀이

// 탭으로 사용할 버튼들. 버튼들의 박스가 아닌 개별버트들
let 탭버튼들 = document.querySelectorAll('.탭버튼');

// 탭에 따라 보여줄 카드들 전체. 카드들의 박스가 아님. 개별카드들
let 카드들 = document.querySelectorAll('.카드');

// 카드들이 들어있는 상위 박스 (배경색 바꿀 대상)
let 카드박스 = document.querySelector('.tab-content');

// 각 탭 버튼에 대해 클릭 이벤트 연결
탭버튼들.forEach(버튼 =>
  버튼.addEventListener('click', () => {
    // 클릭된 버튼의 id 값을 가져옴
    // 예: tab1, tab2, tab3, tab0(전체)
    let 선택된이름 = 버튼.id; //id를 불러오는 변수 이름 정해주기

    // 카드들 반복 순회
    카드들.forEach(카드 =>
      // 선택된 이름이 'tab0'이면 전체 보기 → 모든 카드 block
      // 아니면 해당 클래스(tab1~3)를 포함하는 카드만 block
      // 그 외는 모두 none으로 숨김

      // ❗ 여기서 사용하는 `? :`는 '삼항 연산자'라고 부름
      // 구조: 조건식 ? 참일 때 값 : 거짓일 때 값
      // if문 대신 한 줄에 '조건 결과에 따라 값 바꾸기'에 유리함
      카드.style.display =
        선택된이름 === 'tab0' || 카드.classList.contains(선택된이름)
          ? 'block'
          : 'none'
    );

    // 카드박스 배경색 클래스 초기화
    // 이전에 붙어 있을 수 있는 배경 클래스(tab1~3) 전부 제거
    카드박스.classList.remove('tab1배경', 'tab2배경', 'tab3배경');

    // 클릭된 탭에 따라 적절한 배경색 클래스 추가
    // ❗ JS로 직접 background-color를 주지 않고,
    //     class만 추가해서 CSS에서 스타일 제어하는 구조
    if (선택된이름 === 'tab1') 카드박스.classList.add('tab1배경');
    if (선택된이름 === 'tab2') 카드박스.classList.add('tab2배경');
    if (선택된이름 === 'tab3') 카드박스.classList.add('tab3배경');

    // ❗ '전체' 탭(tab0)은 별도의 배경 클래스 추가하지 않음
    // 기본 배경 그대로 유지
  })
);

---

✅ CSS

/* 카드박스(tab-content) 배경색을 탭에 따라 변경 */
.tab1배경 { background-color: #f7eaea; }
.tab2배경 { background-color: #eaffea; }
.tab3배경 { background-color: #eaeaff; }

/* 탭 버튼에 마우스 올렸을 때 시각 효과만 추가 */
.탭버튼:hover {
  background-color: #ddd;
  color: black;
}

/* 탭 균등 너비 요구사항 대응용 */
.tab-wrap {
  display: flex;
}

.탭버튼 {
  flex: 1;
  padding: 10px;
  border: none;
  cursor: pointer;
}

---