<p>탭 하나만 드러나 있으면 보기 안 좋습니다.</p>
<ul class="tabs">
  <li class="tab  active" style="display: block;">
    제품 스펙
  </li>
</ul>
<div class="tab-content">
  <h2>제품 스펙</h2>
  <p>스펙은 이러합니다... 블라블라...</p>
</div>


<p>이럴 땐 탭을 감추는 게 나을 수 있습니다.</p>
<ul class="tabs">
  <li class="tab  active">제품 스펙</li>
</ul>
<div class="tab-content">
  <h2>제품 스펙</h2>
  <p>스펙은 이러합니다... 블라블라...</p>
</div>


<p>탭이 여러 개인 경우엔 괜찮습니다.</p>
<ul class="tabs">
  <li class="tab  active">제품 스펙</li>
  <li class="tab">다운로드</li>
  <li class="tab">보도자료</li>
</ul>
<div class="tab-content">
  <h2>제품 스펙</h2>
  <p>스펙은 이러합니다... 블라블라...</p>
</div>
.tab:only-child {
  display: none;
}

.tabs {
  list-style: none;
  display: flex;
  max-width: 500px;
  margin: 0;
  padding: 0;
  gap: 1px;
}

.tab {
  background-color: lightgray;
  padding: 10px 20px;
  color: black;
  flex-grow: 1;
  text-align: center;
}

.tab-content {
  padding: 1em;
  max-width: 500px;
  border: 1px solid lightgray;
  margin-bottom: 3em;
  *:first-child {
    margin-top: 0;
  }
  *:last-child {
    margin-bottom: 0;
  }
}

.active {
  background-color: blue;
  color: white;
}

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.