CSS

[CSS] 탭 메뉴 (자바스크립트 없이)

coco030030 2025. 4. 7. 20:48

CSS 탭 메뉴 (자바스크립트 없이) 순서

  1. input[type="radio"]를 사용해서 각각의 탭에 해당하는 선택 상태를 만든다.
  2. 각 탭에 label을 달아서 클릭 시 input이 체크되도록 연결 (for, id 사용).
  3. 탭에 맞는 컨텐츠는 div로 나눠서 각각의 영역을 만든다.
  4. CSS에서 input:checked ~ .contents .tab1 { display: block; } 이런 식으로
    체크된 input에 따라 어떤 내용이 보일지 결정한다.
  5. 나머지 탭 내용은 display: none; 처리해서 안 보이게 함.
  6. 탭 디자인은 Flex로.

**

  • <input type=" radio "> → 하나만 선택할 수 있음.
  • label → 탭 역할. 누르면 해당 input이 체크됨.
  • :checked → 이걸로 "누른 탭" 찾기. CSS :checked 선택자를 이용
  • ~ → 형제 선택자! 이걸로 내용 보여줄 대상 찾기.
  • 탭 구조랑 내용은 순서 맞게 붙여야 작동함.
  • 탭을 Flex로 만들면 한 줄로 배열됨.
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS-only Tab Menu</title>
<style>
    body {
      font-family: sans-serif;
      background: #f7f7f7;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .tab-container {
      width: 300px;
    }

    /* 라디오 버튼 숨기기 */
    input[type="radio"] {
      display: none;
    }

    /* 탭 버튼 */
    .tabs {
      display: flex;
      gap: 5px;
    }

    .tabs label {
      flex: 1;
      text-align: center;
      padding: 10px;
      background: #ddd;
      cursor: pointer;
      border-radius: 5px 5px 0 0;
      transition: background 0.3s;
    }

    /* 선택된 탭 강조 */
    #tab1:checked ~ .tabs label[for="tab1"],
    #tab2:checked ~ .tabs label[for="tab2"],
    #tab3:checked ~ .tabs label[for="tab3"] {
      background: #333;
      color: #fff;
    }

    /* 콘텐츠 박스 */
    .content {
      border: 2px solid #333;
      padding: 20px;
      background: #fff;
      border-radius: 0 0 5px 5px;
    }

    .tab-content {
      display: none;
    }

    /* 선택된 탭만 표시 */
    #tab1:checked ~ .content .c1,
    #tab2:checked ~ .content .c2,
    #tab3:checked ~ .content .c3 {
      display: block;
    }
  </style>
</head>
<body>

  <div class="tab-container">
    <!-- radio buttons -->
    <input type="radio" id="tab1" name="tabs" checked>
    <input type="radio" id="tab2" name="tabs">
    <input type="radio" id="tab3" name="tabs">

    <!-- tab labels -->
    <div class="tabs">
      <label for="tab1">귀가하니 8시</label>
      <label for="tab2">저녁식사는</label>
      <label for="tab3">오레오 오즈+우유</label>
    </div>

    <!-- tab contents -->
    <div class="content">
      <div class="tab-content c1">저녁을 밥이 아니라 오레오 오즈로 먹다니</div>
      <div class="tab-content c2">밥먹을 시간을 버렸다.</div>
      <div class="tab-content c3">과제한다고 맘이 급해서 슬픈 선택을 하고 말았다.</div>
    </div>
  </div>

</body>
</html>

순서 요약 다시 정리

순서 작업내용
1 <input type="radio">로 탭 상태 관리
2 <label for="radio_id">로 클릭 가능하게 만듦
3 .tab-content는 전부 display: none 처리
4 선택된 라디오에 맞는 .tab-content만 display: block
5 .label도 :checked에 따라 스타일 변경

탭 애니메이션 넣기

.tab-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#tab1:checked ~ .content .c1,
#tab2:checked ~ .content .c2,
#tab3:checked ~ .content .c3 {
  display: block;
  opacity: 1;
}

(단, display: none은 트랜지션이 안 먹음)