틀:펼치기 접기 문서 원본 보기

문서 편집 권한이 없습니다. 다음 이유를 확인해주세요:

---

문서의 원본을 보거나 복사할 수 있습니다.

{{목차제거}} {{다른 뜻2}} {|{{style|class=wiki|align=center}} |- !설명||문서||문단 |- |틀의 원리||[[도움말:위키 문법]]||[[도움말:위키 문법#표에서 응용하기|표에서 응용하기]] |- |한 줄에 여러 개의 접기를 넣는 틀||[[틀:펼치기 접기/multi]] |- |애니메이션이 없는 커스텀 접기로 만든 같은 틀||[[틀:나무위키 틀 접기]] |- |애니메이션이 있는 커스텀 접기 간략화 틀||[[틀:나무위키 접기2]] |} {{안내문|'''틀의 margin과 padding 값은 가능한 수정하지 말아 주세요.''' 현재 값은 브라우저의 F12 개발자 도구로 위키에 적용된 정확한 값을 수정한 것입니다.}} == 틀 본문 == <onlyinclude><includeonly>{{css|펼치기 접기}}{{#css: .toggleBtn:has(+ #collapsible{{{id|jwiki-1}}}:not([style*="display"])) { width: calc(100% + 20px)!important; display: inline-block!important; margin: 0 -10px!important; } }}<div id="toggle{{{id|jwiki-1}}}" class="toggleBtn mobileBtn" data-target="collapsible{{{id|jwiki-1}}}" style="text-align: center; margin: 0 -10px; padding: 0 .6rem; color: {{color-var|{{{titlecolor|inherit}}}}}; text-align:{{{align|center}}}; white-space: nowrap; {{#ifeq:{{{복사방지|}}}|off||user-select: none;}} {{#if:{{{multi|}}}|display: inline-block; width: {{{multiwidth|}}};|}} {{{divstyle|}}}">{{#ifeq:{{{titletype|}}}|media|{{nobold|[{{가짜 링크|notitle=on|{{{title|보기}}}}}]}}|{{{title|[ 펼치기 · 접기 ]}}}}}</div> <div id="collapsible{{{id|jwiki-1}}}" class="{{#if:{{{multi|}}}|{{#ifeq:{{{multi|}}}|bottom|folding-margin-remove-width|folding-margin-remove-width-multi}}|folding-margin-remove-width}}"> {|class="wikitable {{{class|}}}" {{{tag|}}} style="width: {{{width|100%}}}; margin: .3rem 0 {{#if:{{{multi|}}}|{{#ifeq:{{{multi|}}}|bottom|-.3rem|.3rem}}|-.3rem}}; {{#if:{{{max-width|}}}|max-width: {{{max-width|}}};|}} {{#if:{{{bg|}}}|background: {{{bg|}}};|}} {{#if:{{{text|}}}|text-align: {{{text|}}};|}} {{#if:{{{layout|}}}|table-layout: fixed;|}} {{{style|}}}"</includeonly></onlyinclude> == 설명 == [[사용자:Kimchan]]의 [[틀:나무위키 틀 접기|틀]]을 바탕으로 나무위키처럼 애니메이션 효과가 추가된 틀입니다. 아래의 설명 역시 부분만 변형했습니다. 이 틀을 이용하면 마지막에 [[틀:펼치기 접기 끝]]을 넣어서 틀을 끝내줘야합니다. [[특수:환경설정|환경설정]]의 [[특수:환경설정#mw-prefsection-editing|편집]] 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 '''편집 미리보기에서 접기가 작동하지 않습니다.''' == 변수 == {|{{style|class=wiki|width=100%}} |- !colspan=2|모든 변수는 선택입니다. |- !id |접기의 클래스와 아이디입니다. 입력하지 않으면 jwiki-1라는 아이디가 기본으로 입력되나, '''{{++1|반드시}} 입력할 것을 권장합니다.''' |- !title |접기의 제목입니다. 입력하지 않으면 '''[ 펼치기 · 접기 ]'''가 기본으로 입력됩니다. |- !titlecolor |접기 제목의 글씨 색입니다. 기본값은 부모 요소로부터 전해받는 inherit입니다. 이 틀이 들어가는 행의 배경 색에 따라, 또는 단지 꾸미고 싶을 때 다른 색으로 입력할 수 있습니다. |- !divstyle |접기 제목이 들어가는 div의 style 태그에 추가로 넣을 코드를 입력할 수 있습니다. |- !class |안쪽 테이블의 class를 지정할 수 있습니다. |- !style |안쪽 테이블의 style 태그에 추가로 넣을 코드를 입력할 수 있습니다. |- !tag |안쪽 테이블에 class나 style 외에 다른 태그를 추가로 입력할 수 있습니다. |- !width |간혹 표 내의 크기 지정이 안되면 이용할 수 있습니다. 보통 문제가 생길시 auto만 입력해도 됩니다. |- !align |제목의 위치를 조절합니다. left, center, right 등을 입력할 수 있습니다. 기본값은 center. |} == 사용법 == 틀 접기가 들어갈 행에 이 틀을 넣고, 그 다음 새 행부터 시작하면 됩니다. 즉 [[틀:전설의 기수]]를 예로 들면 다음과 같습니다. <nowiki>{|class="wikitable" style="width: 100%; border: 2px solid #00beff; text-align: center;" |- !style="background: #00beff;"|{{cl|전설의 기수|white}} |- |</nowiki>{{bold|<nowiki>{{펼접|id=legend-period-about-template|style=table-layout: fixed;}}</nowiki>}}<nowiki> |- |{{cl|강수진|default}} |{{cl|길령|default}} …</nowiki> 틀 안에 div와 테이블 문법이 시작되어 있고 닫혀 있는 문법은 없으므로, 작성할 내용을 모두 작성한 후 테이블을 종료할 땐 [[틀:펼접끝]]을 넣어 주거나 {{폰트|monospace|<nowiki>|}</div></nowiki>}}를 넣어 주어야 합니다. 마찬가지로 [[틀:전설의 기수]]를 예로 들면 다음과 같습니다. {|class="wikitable" style="width: 100%; table-layout: fixed;" |- | <nowiki>… |{{cl|임봄|default}} |{{cl|황민호|default}} |- |colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}} </nowiki>{{bold|<nowiki>{{펼접끝}}</nowiki>}}<nowiki> |}</nowiki> | <nowiki>… |{{cl|임봄|default}} |{{cl|황민호|default}} |- |colspan="5"|{{--2|※ 둘러보기: {{cl|틀:잊혀진 영웅|default|잊혀진 영웅}} · {{cl|틀:환장의 기수|default|환장의 기수}}}} </nowiki>{{bold|<nowiki>|} </div> |}</nowiki>}} |} == 사용 예제 == {|{{style|class=wiki}} |- !문법 |{{folding|id=example|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="text-align: center;" |- |틀 사용 |- |{{펼접|id=example-one}} |- |내용내용내용내용내용내용내용내용 |- |내용내용내용내용내용내용내용내용 {{펼접끝}} |}</pre>}} |- !결과 |style="vertical-align: top;"|<div style="display: inline-block; vertical-align: top;"> {|class="wikitable" style="text-align: center;" |- |틀 미사용 |- |{{folding|id=example-two|align=center| {{(!}}{{style|class=wiki|width=100%}} {{!-}} {{!}}{{style|bg=header}}{{!}}내용내용내용내용내용내용내용내용 {{!-}} {{!}}{{style|bg=header}}{{!}}내용내용내용내용내용내용내용내용 {{!)}}}} |}</div>{{여백}}<div style="display: inline-block; vertical-align: top;"> {|class="wikitable" style="text-align: center;" |- |틀 사용 |- |{{펼접|id=example-one}} |- |{{style|bg=header}}|내용내용내용내용내용내용내용내용 |- |{{style|bg=header}}|내용내용내용내용내용내용내용내용 {{펼접끝}} |}</div> |} == 한 줄에 여러 개의 접기 == 새로운 변수들을 사용합니다. {|{{style|class=wiki|width=100%}} |- !변수||설명 |- !multi |본격적으로 여러 개의 접기를 선언하는 변수입니다. 아무 값이나 입력해도 되지만, '''가장 마지막에 오는 펼접 틀에서는 {{u|bottom}}으로 입력합니다.''' 모든 펼접 틀에 전부 입력해야 합니다. |- !multiwidth |각 접기의 너비를 정합니다. 마찬가지로 모든 펼접 틀에 전부 입력해야 합니다. |} 단순히 하나의 펼접 틀이 끝나는 곳, 즉 <nowiki>{{펼접끝}}</nowiki>이 오는 뒤에 새로운 펼접 틀을 이어서 작성하면 됩니다. === [[틀:펼치기 접기/multi]]와의 차이 === 멀티 펼접 틀은 접기를 전부 펼치면 접기 제목은 여전히 그 줄에 전부 있고 테이블은 그 아래에 전부 있지만, 위 방법은 접기를 전부 펼치면 접기 제목이 해당하는 테이블의 윗줄에 놓이게 됩니다. {{--|나무위키에서는 이러한 형태의 접기 표에서 하나의 접기를 펼치면 펼쳐진 접기 제목은 온전한 한 줄을 차지하게 되는데{{--2|({{exhide|ex=off|type=namu|틀:역대 가톨릭 교황}} 참고. 직접 접기를 눌러보세요.)}} 이 부분은 제이위키 문법 한계상 구현할 수 없습니다.}} → 제이위키에서도 구현했습니다. 이제 나무위키처럼 펼쳐진 접기의 제목은 온전한 한 줄을 차지합니다. 나무위키의 예시로 링크한 {{exhide|ex=off|type=namu|틀:역대 가톨릭 교황}}과 유사한 디자인으로 만든 제이위키의 [[틀:교황]]이 있습니다. {|{{style|class=wiki|width=100%|layout=on}} |- !문법||결과 |- !colspan=2|멀티 틀 |- |{{style|vertical=top}}|{{folding|id=gram1|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;" |- |틀 사용 |- |{{펼접/mt |id1=1|title1=[ 1의 제목 ] |id2=2|title2=[ 2의 제목 ] }} {{펼접/mc|id=1}} |- |1의 내용 {{펼접끝}} {{펼접/mc|id=2}} |- |2의 내용 {{펼접끝}} |}</pre>}} |{{style|vertical=top}}| {|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;" |- |틀 사용 |- |{{펼접/mt |width=2 |id1=1|title1=[ 1의 제목 ] |id2=2|title2=[ 2의 제목 ] }} {{펼접/mc|id=1}} |- |1의 내용 {{펼접끝}} {{펼접/mc|id=2}} |- |2의 내용 {{펼접끝}} |} |- !colspan=2|멀티 변수 |- |{{style|vertical=top}}|{{folding|id=gram2|title=[ 문법 펼치기 · 접기 ]|<pre>{|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;" |- |변수 사용 |- |{{펼접|id=3|title=　[ 1의 제목 ]　|multi=on}} |- |1의 내용 {{펼접끝}} {{펼접|id=4|title=　[ 2의 제목 ]　|multi=bottom}} |- |2의 내용 {{펼접끝}} |}</pre>}} |{{style|vertical=top}}| {|class="wikitable" style="width: 100%; margin: 12px auto; text-align: center;" |- |변수 사용 |- |{{펼접|id=3|title=　[ 1의 제목 ]　|multi=on|multiwidth=50%}} |- |1의 내용 {{펼접끝}} {{펼접|id=4|title=　[ 2의 제목 ]　|multi=bottom|multiwidth=50%}} |- |2의 내용 {{펼접끝}} |} |} == 기타 == * {{css/s}} == 둘러보기 == {{나무위키 형식 틀 모음}} {{문서 가져옴|틀:펼치기 접기/설명문서|392539}}

틀:펼치기 접기 문서로 돌아갑니다.