탭메뉴를 자바스크립트 없이 CSS만으로 구현하는 방법

---

1. 원리: input(라디오/체크박스) + label + CSS 선택자 조합

• 각 탭마다 숨겨진 input(type="radio")을 둔다
• 각 input에 label을 연결해, label을 클릭하면 해당 input이 체크됨
• :checked CSS 선택자를 이용해, 어떤 탭이 선택됐는지 확인
• 각 탭 내용은 input:checked와 연결해서 표시/숨기기 제어

---

2. HTML 구조

<div class="tab-menu">
  <input type="radio" id="tab1" name="tab" checked>
  <label for="tab1">탭1</label>
  <input type="radio" id="tab2" name="tab">
  <label for="tab2">탭2</label>
  <input type="radio" id="tab3" name="tab">
  <label for="tab3">탭3</label>

  <div class="tab-content content1">
    탭1 내용
  </div>
  <div class="tab-content content2">
    탭2 내용
  </div>
  <div class="tab-content content3">
    탭3 내용
  </div>
</div>

---

3. CSS 방식

.tab-content {
  display: none;
  /* 기본적으로 내용은 숨김 */
}
#tab1:checked ~ .content1,
#tab2:checked ~ .content2,
#tab3:checked ~ .content3 {
  display: block;
  /* 해당 탭이 선택됐을 때만 보임 */
}

/* 탭 버튼(라벨) 스타일 예시 */
label {
  display: inline-block;
  padding: 8px 20px;
  background: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}
input[type="radio"] {
  display: none; /* input은 숨김 */
}
input[type="radio"]:checked + label {
  background: #fff;
  border-bottom: 1px solid #fff;
}

---

4. 정리/암기 포인트

• input[type="radio"] + label + 내용(div) 구조를 쓴다
• 각 input의 id와 label의 for 속성이 반드시 일치
• CSS에서 input:checked ~ .내용 방식으로 연결
• input은 숨기고 label만 보이도록 한다
• :checked 상태에 따라 내용만 표시/숨김

---

5. 장점 & 한계

장점

• 자바스크립트 없이 순수 HTML+CSS로 동작
• 접근성(레이블 연결)도 나쁘지 않음

한계

• 동적 추가/삭제는 불가(코드 직접 수정 필요)
• 애니메이션 등 고급효과는 제한적

---

6. 실전 암기용 초간단 예시

<!-- 기본 2개 탭 예시 -->
<div>
  <input type="radio" id="tabA" name="tab" checked>
  <label for="tabA">A</label>
  <input type="radio" id="tabB" name="tab">
  <label for="tabB">B</label>
  <div class="tab-content contentA">A 내용</div>
  <div class="tab-content contentB">B 내용</div>
</div>

.tab-content { display:none; }
#tabA:checked ~ .contentA,
#tabB:checked ~ .contentB { display:block; }
input[type="radio"] { display:none; }
label { /* 원하는 탭 스타일링 */ }

---

7. 헷갈릴 때 떠올릴 문장

• “input[type=radio]는 숨긴다, label을 눌러 선택, checked에 따라 내용 보여주기!”

---