Pure CSS radio로 탭 만들기

CSS로 탭을 만드는 방법 중 하나는 앵커 태그<a>로 마크업하여 CSS 선택자 :target으로 구현하는 방법이 있습니다. 이 방법은 몇 줄 안되는 CSS로 구현할 수 있지만 URL 해시를 사용하여 스크롤이 점프되는 이슈가 있기에 권장하지 않습니다.

이를 대체해주는 멋진 아이디어는 바로 input의 radio type을 이용하는 것이죵

 

체크박스, 스위치버튼을 커스텀할 때 label과 :checked를 활용하여 스타일링 하듯이 이 방법 또한 마찬가지입니다.

 

---

HTML

1. 탭 메뉴와 내용을 같은 div로 감쌉니다. .tab-label이 탭 메뉴의 역할을 합니다
2. input radio 기본 사용법처럼 name명은 모두 tabGroup으로 통일하고, 각 input id와 label for을 매칭합니다.

<div class="tab-wrapper">
  
  <div class="tab-item">
    <input type="radio" id="tab1" name="tabGroup">
    <label for="tab1" class="tab-label">Tab Menu 1</label>
    <div class="tab-content">
      This is first contents.
    </div>
  </div>
  
  <div class="tab-item">
    <input type="radio" id="tab2" name="tabGroup">
    <label for="tab2" class="tab-label">Tab Menu 2</label>
    <div class="tab-content">
      This is second contents.
    </div>
  </div>
 
  <div class="tab-item">
    <input type="radio" id="tab3" name="tabGroup">
    <label for="tab3" class="tab-label">Tab Menu 3</label>
    <div class="tab-content">
      This is third contents.
    </div>
  </div>
  
</div>

 

 

CSS

1. 부모 엘리먼트에 높이를 줘야 합니다. <div class="tab-wrapper">...</div>에 height: 500px; 을 주었습니다.
2. radio input은 기능만 필요하므로 display: none시킵니다. 다만 이렇게 숨기는 방법은 접근성 이슈가 있으므로, 접근성을 고려한다면 다른 방법으로 숨겨주세요. (참고: 접근 가능한 숨김 텍스트)
3. 이 방법의 핵심은 형제 선택자 ~입니다. 좀 더 명확하게 구분하고자 한다면 인접 형제 선택자 + 를 사용해도 무방합니다.
4. 컨텐츠 영역은 absolute로 같은 위치에 두고, 선택되는 내용은 z-index를 높여서 화면에 보여줍니다. 다른 내용들은 사라지는 것이 아니라 숨겨지는 원리입니다.

.tab-wrapper {
  position: relative;
  height: 500px;
  clear: both;
  padding: 6px 15px 0;
  overflow: hidden;
}

.tab-item {
  float: left;
  
  [type="radio"] {
    display: none;
    
    &:checked ~ .tab-label {
      background: #fff;
      border-bottom: 1px solid #fff;
      color: #2a2b39;
      z-index: 55;
      
      & ~ .tab-content {
        z-index: 50;  
      }
    }
  }
}

.tab-label {
  display: flex;
  align-items: center;
  position: relative;
  left: 1px;
  bottom: 2px;
  height: 36px;
  padding-right: 24px;
  padding-left: 24px;
  background: #d9dbe6;
  border: 1px solid #caccdb;
  margin-left: 2px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  color: #666;
}

.tab-content {
  position: absolute;
  top: 41px;
  right: 0;
  left: 0;
  bottom: 0;
  padding: 15px;
  background: #fff;
  border-top: 1px solid #caccdb;
  overflow: auto;
}

 

이렇게 작성한다면 자바스크립트 없이도, 간략한 마크업으로 탭이 구현됩니다.

 

 

구현 화면

codepen 

 

 

참고

functional CSS Tabs Revisted