탭

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 21번째.

탭은 모든 내용을 한 페이지에 유지하면서 콘텐츠를 별도의 섹션으로 구성하는 방법입니다. 긴 페이지를 스크롤하는 대신, 사용자는 탭을 클릭하여 콘텐츠 패널 사이를 전환할 수 있습니다. 설정 페이지, 대시보드 또는 제품 설명(예: 상세 정보, 리뷰, FAQ)에서 탭을 자주 볼 수 있습니다.

JavaScript 없이 다음을 사용하여 탭을 만들 수 있습니다:

라디오 버튼 (한 번에 하나의 탭만 활성화될 수 있도록 함)
클릭 가능한 탭 버튼 역할을 하는 레이블
올바른 콘텐츠를 표시하기 위한 CSS 선택자 (:checked)

HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">This is the content of Tab 1.</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">This is the content of Tab 2.</div>
   
   <input type="radio" id="tab3" name="tab">
   <label for="tab3">Tab 3</label>
   <div id="content3" class="tab-content">This is the content of Tab 3.</div>
 </div>

CSS:

<style>
  /* 라디오 버튼 숨기기 */
  input { display: none; }

  /* 탭 레이블 */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* 기본적으로 콘텐츠 숨김 */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* 라디오 버튼이 선택되었을 때 콘텐츠 표시 */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* 활성화된 탭 강조 */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

학생들에게 줄 수 있는 간단한 참고 사항입니다:

+ (인접 형제) → 바로 다음 요소를 선택합니다.
~ (일반 형제) → (다음 요소뿐만 아니라) 뒤에 오는 모든 형제 요소를 선택합니다.

챌린지

쉬움

두 개의 탭이 이미 설정된 시작 HTML이 제공됩니다. 여러분의 작업은 이 탭 시스템을 확장하고 개선하는 것입니다.

“Sleep”을 위한 또 다른 탭을 추가하세요:
- 레이블: Sleep
- 내용: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
체크되었을 때 탭 내용을 보여주는 CSS 선택자에 #tab3:checked ~ #content3를 추가하세요.

치트 시트

라디오 버튼, 레이블, 그리고 CSS 선택자를 사용하여 JavaScript 없이 탭을 만듭니다:

HTML 구조:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">Content for Tab 1</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">Content for Tab 2</div>
</div>

탭 기능을 위한 CSS:

/* 라디오 버튼 숨기기 */
input { display: none; }

/* 탭 레이블 스타일 지정 */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

/* 기본적으로 콘텐츠 숨기기 */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* 라디오 버튼이 체크되었을 때 콘텐츠 표시 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* 활성화된 탭 강조 표시 */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

CSS 형제 선택자:

+ (인접 형제 선택자) → 바로 다음에 오는 요소를 선택합니다.
~ (일반 형제 선택자) → 다음에 오는 모든 형제 요소를 선택합니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Tabs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }

    .tabs {
      display: flex;
      flex-direction: column;
      width: 350px;
    }

    /* Hide the radio inputs */
    .tabs input {
      display: none;
    }

    /* Tab labels */
    .tabs label {
      padding: 10px;
      background: #eee;
      cursor: pointer;
      border: 1px solid #ccc;
    }

    .tabs label:hover {
      background: #ddd;
    }

    /* Tab content */
    .tab-content {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background: #fff;
      line-height: 1.5;
    }

    /* Show content when radio is checked */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2 {
      display: block;
    }

    /* Highlight active tab */
    #tab1:checked + label,
    #tab2:checked + label,
    #tab3:checked + label {
      background: #4cafef;
      color: white;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">Nutrition</label>
    <div id="content1" class="tab-content">
      <h3>Nutrition</h3>
      <p>A balanced diet fuels your body and mind. Focus on fruits, vegetables, whole grains, and lean proteins. Avoid too much processed food.</p>
    </div>

    <input type="radio" id="tab2" name="tab">
    <label for="tab2">Exercise</label>
    <div id="content2" class="tab-content">
      <h3>Exercise</h3>
      <p>Daily movement strengthens your body and reduces health risks. Even a 30-minute walk or stretching makes a difference.</p>
    </div>

  </div>
</body>
</html>