[시험대비JS] 탭 2 (forEach) X -> 카드 한장 전용. 중지.

📜

let tab = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.tab-content');

function showTab() {
  let id = this.id;

  tab.forEach((t, i) => {
    t.classList.remove('active');
    content[i].style.display = 'none';
  });

  this.classList.add('active');
  document.querySelector('.' + id).style.display = 'block';
}

tab.forEach((t) => {
  t.addEventListener('click', showTab);
});

tab[0].classList.add('active');
content[0].style.display = 'block';

---

🧩 암기용 흐름

단계	작업 요약	핵심 키워드
① 준비	탭 버튼, 콘텐츠 전부 저장	querySelectorAll
② 함수 선언	클릭 시 id 저장 → 전체 초기화 → 누른 탭만 강조/콘텐츠 표시	showTab()
③ 클릭 이벤트 연결	각 탭(t)에 showTab 연결	addEventListener('click', showTab)
④ 초기화	처음에 첫 번째 탭/콘텐츠 표시	tab[0], content[0]

---

🛠️ 풀이 흐름

---

1. 탭과 콘텐츠 전부 불러오기

let tab = document.querySelectorAll('.tab');
let content = document.querySelectorAll('.tab-content');

• .tab (탭 버튼 모음) 저장
• .tab-content (콘텐츠 박스 모음) 저장
• 둘 다 NodeList → 배열처럼 forEach 돌릴 수 있다.

---

2. 클릭했을 때 실행될 showTab 함수 만들기

function showTab() {
  let id = this.id;

• 클릭한 탭(this)의 id를 읽어 저장한다.
  (예: id="tab2" → id값은 "tab2")

---

tab.forEach((t, i) => {
  t.classList.remove('active');
  content[i].style.display = 'none';
});

• 탭(t)마다 .active 제거 → 강조 해제
• 콘텐츠(content[i])마다 .display = 'none' → 모두 숨김

✅ 탭과 콘텐츠를 동시에 초기화하는 루프.

---

this.classList.add('active');
document.querySelector('.' + id).style.display = 'block';

• 클릭한 탭(this)만 .active 추가해서 강조
• id랑 같은 이름의 콘텐츠를 찾아서 display: block으로 보여줌

✅ 클릭한 탭-콘텐츠 연결.

---

3. 각 탭에 클릭 이벤트 걸기

tab.forEach((t) => {
  t.addEventListener('click', showTab);
});

• 탭 버튼(t) 하나하나에
• 클릭하면 showTab 함수 실행하도록 연결

✅ 반복문 없이 forEach 하나로 매끄럽게 연결.

---

4. 페이지 열자마자 기본 세팅

tab[0].classList.add('active');
content[0].style.display = 'block';

• 첫 번째 탭(tab[0])만 활성화
• 첫 번째 콘텐츠(content[0])만 표시

✅ 빈 화면 방지용.

---

🧠포인트

포인트	이유
tab, content는 배열처럼 관리한다	forEach 돌리기 때문에
showTab 함수 안에서 id를 this.id로 받는다	클릭한 탭 구분 위해
forEach 안 (t, i)는 내가 이름 붙이는 거다	(순서는 고정: 요소, 인덱스)
querySelector('.' + id)로 콘텐츠 매칭한다	id와 class 이름 맞춰야 한다

---

📋

"탭이랑 콘텐츠 다 저장하고 →
탭 누르면 id 저장해서 →
전체 초기화시키고 →
누른 탭만 강조하고, 연결된 콘텐츠만 보여주고 →
탭에 클릭 연결 →
처음엔 첫 번째 탭/콘텐츠 띄운다."

---

🧨 체크리스트

• tab.forEach((t, i) => {...})
  • t는 탭 하나
  • i는 인덱스 번호 (0, 1, 2...)
• this.id
  • 지금 누른 탭의 id값
• document.querySelector('.' + id)
  • id를 class로 변환해서 콘텐츠 찾는다
• tab[0].classList.add('active')
  • 맨 처음 탭은 기본으로 강조
• content[0].style.display = 'block'
  • 맨 처음 콘텐츠는 기본으로 보여주기

---

---

📜 1. HTML (구조)

<div class="tab-wrap">
  <div class="tab" id="tab1">탭 1</div>
  <div class="tab" id="tab2">탭 2</div>
  <div class="tab" id="tab3">탭 3</div>
</div>

<div class="content-wrap">
  <div class="tab-content tab1">내용 1</div>
  <div class="tab-content tab2">내용 2</div>
  <div class="tab-content tab3">내용 3</div>
</div>

✅ 탭은 .tab 클래스로 묶고, 각 탭에 id 부여 (tab1, tab2, tab3)
✅ 콘텐츠는 .tab-content 클래스를 공유하고, 탭 id와 똑같은 추가 클래스를 가짐 (tab1, tab2, tab3)

---

🎨 2. CSS

.tab-wrap {
  display: flex;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px;
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* 클릭된 탭 강조 */
.tab.active {
  background-color: #ccc;
}

/* 탭 콘텐츠 기본 상태 */
.tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fafafa;
}

✅ .tab-wrap을 flex로 배치
✅ .tab들은 가로로 균등하게 늘어남
✅ 클릭한 탭은 .active 클래스 붙여서 배경색 변경
✅ .tab-content는 기본적으로 숨김(display: none)

---

---