본문 바로가기
반응형

T스킨은 부트스트랩을 기본 베이스로 사용합니다. 그 이야기는 무엇이냐 바로 본문에 부트스트랩의 기능을 쉽게 사용할 수 있다는 뜻입니다. 그중에 이번에는 Tab기능을 구현하는 방법을 설명하도록 하겠습니다.

사전지식

글쓰기를 하실 때 아래에 대한 약간의 사전지식이 있어야 원활하게 사용하실 수 있습니다.

구현된 모습

첫번째 탭 내용..
두번째 탭 내용..
세번째 탭 내용..

글쓰기 구현하기

먼저 글쓰기 창으로 이동합니다. 글쓰기는 새로운 글쓰기를 기준으로 설명하겠습니다.


▲ 우상단에 있는 글쓰기 모드 중에 HTML로 변경을 합니다. HTML 모드에서는 바탕색이 검정색으로 나타납니다. 이 모드에서는 작성하는 글은 HTML형태로 적용이 됩니다.


▲ 내용에 아래의 코드를 삽입합니다.

<ul class="nav nav-tabs" id="postTab">
  <li class="nav-item"><a data-toggle="tab" href="#tab1" class="nav-link active" >첫번째 탭</a></li>
  <li class="nav-item"><a data-toggle="tab" href="#tab2" class="nav-link">두번째 탭</a></li>
  <li class="nav-item"><a data-toggle="tab" href="#tab3" class="nav-link">세번째 탭</a></li>
</ul>
<div class="tab-content" id="postTabContent">
  <div id="tab1" class="tab-pane fade show active"> 첫번째 탭 내용.. </div>
  <div id="tab2" class="tab-pane fade"> 두번째 탭 내용.. </div>
  <div id="tab3" class="tab-pane fade"> 세번째 탭 내용.. </div>
</div>


그러면 위와 같이 탭형태가 나옵니다.

코드 설명

<ul></ul> 사이에 있는 <li></li>의 갯수가 탭의 갯수라고 보면됩니다.
그리고 <div class="tab-content" id="postTabContent"></div>사이에 있는 <div></div>의 갯수가 해당 탭을 눌렀을 때 나오는 내용의 갯수이며 위에 작성한 <li></li>와 1:1매칭이 되어야 합니다.

두개를 매칭시키는 코드가 <li></li>에서는 href="#tab1"이고 <div></div>에서는 id="tab1" 입니다. tab1이 동일해야 합니다.

아래와 같이 쌍으로 있으면 됩니다.

<li class="nav-item"><a data-toggle="tab" href="#tab1" class="nav-link active" >첫번째 탭</a></li>

...

<div id="tab1" class="tab-pane fade show active"> 첫번째 탭 내용.. </div>
<li class="nav-item"><a data-toggle="tab" href="#tab1" class="nav-link active">첫번째 탭</a></li>
<li class="nav-item"><a data-toggle="tab" href="#tab2" class="nav-link">두번째 탭</a></li>
<li class="nav-item"><a data-toggle="tab" href="#tab3" class="nav-link">세번째 탭</a></li>

...

<div id="tab1" class="tab-pane fade show active"> 첫번째 탭 내용.. </div>
<div id="tab2" class="tab-pane fade"> 두번째 탭 내용.. </div>
<div id="tab3" class="tab-pane fade"> 세번째 탭 내용.. </div>

위의 classfade는 탭 전환히 부드럽게 전환하라는 class이고 active는 해당 Tab이 선택된 형태로 보여주라는 뜻입니다.

좀더 자세한 설명은 아래의 부트스트랩 웹사이트를 참고하세요.

https://getbootstrap.com/docs/4.5/components/navs

728x90

UX 공작소

고급지게 만들어 저렴하게 배포는 공작소