CSS에서만 탭 전환을 구현하는 방법

이 기사에서는 웹 페이지에서 자주 사용되는 탭 구현에 대해 실제로 만들어 온 절차를 기록해 갑니다.

또한,
· Ruby on Rails로 메르카리의 클론 앱을 만들고 있다.
· 표기는 haml, Scss입니다.
이상이 전제 조건입니다.

원래 왜 탭을 만드는가?

1 페이지에 포함되어 있는 정보량이 많을 때에, 예를 들면 2 섹션으로 나누어지는 정보가 있으면, 한쪽의 정보를 숨겨 두는 것으로 페이지의 외관이 깨끗이 합니다.

실제로 구현의 순서를 설명해 갑니다.

우선, 간단한 형태를 만듭니다.

haml

.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1
  %input#tab-2{:name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-2"} ページ2
  .tab-content.tab-1-content
    ここはタブ１です。
  .tab-content.tab-2-content
    ここはタブ２です。

scss

.tabs {
  margin-top: 12px;
  width:700px;
  .tab-label {
    display: inline-block;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #999;
    background-color: #f3f3f3;
    margin-left: 1px;
    margin-right: 1px;
    padding: 3px 6px;
    border-bottom: none;
    font-size: 0.9em;
    &:hover {
      opacity: 0.7;
    }
  }
  input[name="tab-radio"] {
    display: none;
  }
  .tab-content {
    display: none;
    border: 1px solid #999;
    padding: 10px;
    min-height: 200px;
  }
  #tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content, #tab-3:checked ~ .tab-3-content, #tab-4:checked ~ .tab-4-content, #tab-5:checked ~ .tab-5-content {
    display: block;
  }
  input[name="tab-radio"]:checked + .tab-label {
    background-color: #fff;
  }
}

이 시점에서 다음과 같은 표시를 할 수 있습니다.



코드의 세부 사항을 살펴 보겠습니다.

haml

.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1
  %input#tab-2{:name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-2"} ページ2
  .tab-content.tab-1-content
    ここはタブ１です。
  .tab-content.tab-2-content
    ここはタブ２です。

haml

.tabs
  %input#tab-1{:checked => "checked", :name => "tab-radio", :type => "radio"}/
  %label.tab-label{:for => "tab-1"} ページ1

input과 label이 간이 됩니다.

input에 #tab-1이라는 id를 붙여, label에 같은 tab-1이라는 이름을 for로 붙여 줍니다.

이제 input과 rabel이 상호 대응할 수 있습니다.
input은 :type => "radio"로 라디오 버튼의 요소를 갖게 하는 것으로 클릭이 가능하게 됩니다.
이것을 label과 조합하는 것으로, 실제로 tab가 밀릴 수 있게 되어 있다는 것이 됩니다.

tab-content.tab-1-content
다음은 탭 내용이 표시되는 영역입니다.

다음으로 CSS를 살펴 보겠습니다.

scss

.tabs {
  margin-top: 12px;
  width:700px;
  .tab-label {
    display: inline-block;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border: 1px solid #999;
    background-color: #f3f3f3;
    margin-left: 1px;
    margin-right: 1px;
    padding: 3px 6px;
    border-bottom: none;
    font-size: 0.9em;
    &:hover {
      opacity: 0.7;
    }
  }
  input[name="tab-radio"] {
    display: none;
  }
  .tab-content {
    display: none;
    border: 1px solid #999;
    padding: 10px;
    min-height: 200px;
  }
  #tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content, #tab-3:checked ~ .tab-3-content, #tab-4:checked ~ .tab-4-content, #tab-5:checked ~ .tab-5-content {
    display: block;
  }
  input[name="tab-radio"]:checked + .tab-label {
    background-color: #fff;
  }
}

scss

 input[name="tab-radio"] {
    display: none;

input[name="tab-radio"]
에 display:none;
붙여 드리겠습니다.



이 라디오 버튼을 지워주는 표기가 됩니다.

scss

#tab-1:checked ~ .tab-1-content, #tab-2:checked ~ .tab-2-content {
    display: block;
  }

다음 중요한 것은이 설명입니다.

id: tab-1에 체크(클릭)되었을 경우에 .tab-1-content 이하를 표시한다.
마찬가지로 tab-2에 체크(클릭)되었을 경우에 .tab-2-content 이하를 표시한다.
라는 설명입니다.

마지막으로

scss

input[name="tab-radio"]:checked + .tab-label {
    background-color:red;
  }

이하의 설명으로,
선택한 탭의 내용을 변경할 수 있습니다.

이 절차를 사용하면 간단한 탭을 만들 수 있습니다.