틀:탭: 두 판 사이의 차이

2020년 12월 18일 (금) 01:59 판

{{{제목1}}}

{{{내용1}}}

탭을 표시하는 틀입니다.

주의사항

일부 브라우저 (Internet Explorer, EdgeHTML 기반 마이크로소프트 엣지 등)에서 제대로 작동되지 않을 수 있습니다.

사용법

{{탭
|제목1 = 
|내용1 = 
|제목2 = 
|내용2 = 
|제목3 = 
|내용3 = 
·
·
·
|제목30 = 
|내용30 = 
}}

추가 기능

{{탭
|style = 
|버튼여백좁게 = <!-- 이 변수를 입력할 경우 탭 버튼 여백이 줄어듦-->
|제목너비고정 = <!-- **%로 입력, 한 줄당 탭 버튼 수를 강제로 고정하기 위해 사용함--> 
|여백좁게 = <!-- 이 변수를 입력할 경우 여백이 1.5 rem에서 0.5 rem으로 줄어듦-->
|여백 사용자지정 = <!-- 단위 (em, rem 등)를 포함해 입력-->
|제목1 = 
|내용1 = 
|제목2 = 
|내용2 = 
|제목3 = 
|내용3 = 
·
·
·
|제목30 = 
|내용30 = 
}}

연습장이나 사용자 문서에서 틀의 사용이나 수정을 연습할 수 있습니다.
분류는 /설명문서에 넣어주세요.

• 현재 페이지 URL 줄이기

@@ 1번째 줄: / 1번째 줄: @@
 <onlyinclude><templatestyles src="틀:탭/styles.css" /><div class="libre" style="padding: 0em;"><div class="libre-tab" {{#if:{{{style|}}}|style="{{{style}}}"}}>
-<ul class="libre-tab-btns"><li class="libre-tab-btn libre-tab-btn-active">{{{제목1}}}</li>{{#if:{{{제목2|}}}|<li class="libre-tab-btn">{{{제목2}}}</li>}}{{#if:{{{제목3|}}}|<li class="libre-tab-btn">{{{제목3}}}</li>}}{{#if:{{{제목4|}}}|<li class="libre-tab-btn">{{{제목4}}}</li>}}{{#if:{{{제목5|}}}|<li class="libre-tab-btn">{{{제목5}}}</li>}}{{#if:{{{제목6|}}}|<li class="libre-tab-btn">{{{제목6}}}</li>}}{{#if:{{{제목7|}}}|<li class="libre-tab-btn">{{{제목7}}}</li>}}{{#if:{{{제목8|}}}|<li class="libre-tab-btn">{{{제목8}}}</li>}}{{#if:{{{제목9|}}}|<li class="libre-tab-btn">{{{제목9}}}</li>}}{{#if:{{{제목10|}}}|<li class="libre-tab-btn">{{{제목10}}}</li>}}{{#if:{{{제목11|}}}|<li class="libre-tab-btn">{{{제목11}}}</li>}}{{#if:{{{제목12|}}}|<li class="libre-tab-btn">{{{제목12}}}</li>}}{{#if:{{{제목13|}}}|<li class="libre-tab-btn">{{{제목13}}}</li>}}{{#if:{{{제목14|}}}|<li class="libre-tab-btn">{{{제목14}}}</li>}}{{#if:{{{제목15|}}}|<li class="libre-tab-btn">{{{제목15}}}</li>}}{{#if:{{{제목16|}}}|<li class="libre-tab-btn">{{{제목16}}}</li>}}{{#if:{{{제목17|}}}|<li class="libre-tab-btn">{{{제목17}}}</li>}}{{#if:{{{제목18|}}}|<li class="libre-tab-btn">{{{제목18}}}</li>}}{{#if:{{{제목19|}}}|<li class="libre-tab-btn">{{{제목19}}}</li>}}{{#if:{{{제목20|}}}|<li class="libre-tab-btn">{{{제목20}}}</li>}}{{#if:{{{제목21|}}}|<li class="libre-tab-btn">{{{제목21}}}</li>}}{{#if:{{{제목22|}}}|<li class="libre-tab-btn">{{{제목22}}}</li>}}{{#if:{{{제목23|}}}|<li class="libre-tab-btn">{{{제목23}}}</li>}}{{#if:{{{제목24|}}}|<li class="libre-tab-btn">{{{제목24}}}</li>}}{{#if:{{{제목25|}}}|<li class="libre-tab-btn">{{{제목25}}}</li>}}{{#if:{{{제목26|}}}|<li class="libre-tab-btn">{{{제목26}}}</li>}}{{#if:{{{제목27|}}}|<li class="libre-tab-btn">{{{제목27}}}</li>}}{{#if:{{{제목28|}}}|<li class="libre-tab-btn">{{{제목28}}}</li>}}{{#if:{{{제목29|}}}|<li class="libre-tab-btn">{{{제목29}}}</li>}}{{#if:{{{제목30|}}}|<li class="libre-tab-btn">{{{제목30}}}</li>}}</ul>
+<div class="libre-tab-btns"><div class="libre-tab-btn libre-tab-btn-active">{{{제목1}}}</div>{{#if:{{{제목2|}}}|<div class="libre-tab-btn">{{{제목2}}}</div>}}{{#if:{{{제목3|}}}|<div class="libre-tab-btn">{{{제목3}}}</div>}}{{#if:{{{제목4|}}}|<div class="libre-tab-btn">{{{제목4}}}</div>}}{{#if:{{{제목5|}}}|<div class="libre-tab-btn">{{{제목5}}}</div>}}{{#if:{{{제목6|}}}|<div class="libre-tab-btn">{{{제목6}}}</div>}}{{#if:{{{제목7|}}}|<div class="libre-tab-btn">{{{제목7}}}</div>}}{{#if:{{{제목8|}}}|<div class="libre-tab-btn">{{{제목8}}}</div>}}{{#if:{{{제목9|}}}|<div class="libre-tab-btn">{{{제목9}}}</div>}}{{#if:{{{제목10|}}}|<div class="libre-tab-btn">{{{제목10}}}</div>}}{{#if:{{{제목11|}}}|<div class="libre-tab-btn">{{{제목11}}}</div>}}{{#if:{{{제목12|}}}|<div class="libre-tab-btn">{{{제목12}}}</div>}}{{#if:{{{제목13|}}}|<div class="libre-tab-btn">{{{제목13}}}</div>}}{{#if:{{{제목14|}}}|<div class="libre-tab-btn">{{{제목14}}}</div>}}{{#if:{{{제목15|}}}|<div class="libre-tab-btn">{{{제목15}}}</div>}}{{#if:{{{제목16|}}}|<div class="libre-tab-btn">{{{제목16}}}</div>}}{{#if:{{{제목17|}}}|<div class="libre-tab-btn">{{{제목17}}}</div>}}{{#if:{{{제목18|}}}|<div class="libre-tab-btn">{{{제목18}}}</div>}}{{#if:{{{제목19|}}}|<div class="libre-tab-btn">{{{제목19}}}</div>}}{{#if:{{{제목20|}}}|<div class="libre-tab-btn">{{{제목20}}}</div>}}{{#if:{{{제목21|}}}|<div class="libre-tab-btn">{{{제목21}}}</div>}}{{#if:{{{제목22|}}}|<div class="libre-tab-btn">{{{제목22}}}</div>}}{{#if:{{{제목23|}}}|<div class="libre-tab-btn">{{{제목23}}}</div>}}{{#if:{{{제목24|}}}|<div class="libre-tab-btn">{{{제목24}}}</div>}}{{#if:{{{제목25|}}}|<div class="libre-tab-btn">{{{제목25}}}</div>}}{{#if:{{{제목26|}}}|<div class="libre-tab-btn">{{{제목26}}}</div>}}{{#if:{{{제목27|}}}|<div class="libre-tab-btn">{{{제목27}}}</div>}}{{#if:{{{제목28|}}}|<div class="libre-tab-btn">{{{제목28}}}</div>}}{{#if:{{{제목29|}}}|<div class="libre-tab-btn">{{{제목29}}}</div>}}{{#if:{{{제목30|}}}|<div class="libre-tab-btn">{{{제목30}}}</div>}}</div>
 <div class="libre-tab-main" style="{{#if:{{{여백 사용자지정|}}}|padding:{{{여백 사용자지정|}}}|{{#if:{{{여백좁게|}}}|padding:0.5rem}}}}">
 <div class="libre-tab-main-content libre-tab-main-content-active">