tab 연습하기

웹프로그래밍 CSS3/CSS 애니메이션

tab 연습하기

별초롱언니 2025. 3. 27. 17:26

탭이란?

많은 양의 정보를 "카테고리"별로 나누어 보여줄 때, 여러 항목을 비교해야 할 때 주로 사용함

탭의 구성

- 탭박스 : 탭의 버튼부, 탭의 콘텐츠부를 묶어주는 역할

- 탭버튼 : 탭의 버튼부로, 라벨테그로 구성

- 탭콘텐츠 : 탭의 콘텐츠부

탭의 원리 (html)

1. 카테고리별 input:radio 만들기

2. 탭버튼, 탭콘텐츠를 포함하는 탭박스 만들기

3. 탭버튼 안에 input:radio 각각에 연결되는 label 만들기

4. 탭콘텐츠 안에 모든 콘텐츠들 작성하기

탭의 원리 (css)

1. 크기 지정

- 탭 박스 : 탭 라벨과 콘텐츠가 보여지는 상자의 크기 조정 (width)

- 라벨 크기 지정 : 균등하게 너비를 가지려면 (100/라벨갯수)%를 주면 됨 (width)

2. 기능 구현

- 콘텐츠 모두 없애기 display:none;

- 특정 콘텐츠 나타내기 : 특정 카테고리 input:radio가 checked 되었다면 특정 카테고리에 맞는 콘텐츠를 모두 display:block;으로 나타내기

- 라벨의 배경 색상 바꾸기 : 어떤 카테고리가 선택 되었는지 티가 안나므로 배경색상 변경할 것 , 특정 카테고리 input:radio가 checked 되었다면, 해당하는 라벨을 선택하여 background-color 변경

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#tab-box {
  width: 50%;
  margin: 30px auto;
  border: 1px solid red;
}

#tab-button {
  font-size: 0px;
}

#tab-button label {
  width: 25%;
  display: inline-block;
  font-size: 16px;
  color: white;
  background-color: rgb(89, 89, 245);
  padding: 20px 0;
}

.all {
  display: none;
}

#a:checked ~ #tab-box #tab-content .a, 
#b:checked ~ #tab-box #tab-content .b, 
#c:checked ~ #tab-box #tab-content .c,
#d:checked ~ #tab-box #tab-content .d{
  display: block;
}

#a:checked ~ #tab-box #tab-button .a,
#b:checked ~ #tab-box #tab-button .b,
#c:checked ~ #tab-box #tab-button .c,
#d:checked ~ #tab-box #tab-button .d {
  background-color: pink;
}

#a,#b,#c,#d {
  display: none;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../CSS/ch1006/tab.css">
  <title>Document</title>
</head>

<body>
  <input type="radio" name="tab-radio" id="a">
  <input type="radio" name="tab-radio" id="b">
  <input type="radio" name="tab-radio" id="c">
  <input type="radio" name="tab-radio" id="d">

  <div id="tab-box">
    <div id="tab-button">
      <label for="a" class="a">aaa</label>
      <label for="b" class="b">bbb</label>
      <label for="c" class="c">ccc</label>
      <label for="d" class="d">ddd</label>
    </div>

    <div id="tab-content">
      <div class="all a">첫번째 상자입니다.</div>
      <div class="all a">첫번째 상자입니다.</div>
      <div class="all a">첫번째 상자입니다.</div>
      <div class="all b">두번째 상자입니다.</div>
      <div class="all b">두번째 상자입니다.</div>
      <div class="all b">두번째 상자입니다.</div>
      <div class="all b">두번째 상자입니다.</div>
      <div class="all c">세번째 상자입니다.</div>
      <div class="all c">세번째 상자입니다.</div>
      <div class="all c">세번째 상자입니다.</div>
      <div class="all c">세번째 상자입니다.</div>
      <div class="all c">세번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
      <div class="all d">네번째 상자입니다.</div>
    </div>
  </div>
</body>

</html>

See the Pen Untitled by byeolchorong (@byeolchorong) on CodePen.