T스킨은 부트스트랩을 기본 베이스로 사용합니다. 그 이야기는 무엇이냐 바로 본문에 부트스트랩의 기능을 쉽게 사용할 수 있다는 뜻입니다. 그중에 이번에는 Tab기능을 구현하는 방법을 설명하도록 하겠습니다.
사전지식
글쓰기를 하실 때 아래에 대한 약간의 사전지식이 있어야 원활하게 사용하실 수 있습니다.
- HTML
- CSS
- Bootstrap ( https://getbootstrap.com/ )
구현된 모습
글쓰기 구현하기
먼저 글쓰기 창으로 이동합니다. 글쓰기는 새로운 글쓰기를 기준으로 설명하겠습니다.
▲ 우상단에 있는 글쓰기 모드 중에 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>위의 class중 fade는 탭 전환히 부드럽게 전환하라는 class이고 active는 해당 Tab이 선택된 형태로 보여주라는 뜻입니다.
좀더 자세한 설명은 아래의 부트스트랩 웹사이트를 참고하세요.
