틀:나무위키 접기2: 두 판 사이의 차이

2024년 3월 30일 (토) 22:44 기준 최신판

분류:

틀:나무위키 접기2
사용문서	새로고침
넘겨주기	이동하기
2024-03-30에 마지막으로 수정됨

[ 주요 업데이트 노트 ]

2023.04.24	접기 제목에 드래그 방지 코드 적용
2023.05.21	모바일에서 제목 터치 시 잠깐 파란 박스 생성 (애니메이션 접기를 사용하는 모든 틀(틀:펼치기 접기, 틀:펼치기 접기/multi 등)에 함께 적용)단, 배경색의 명도가 낮거나 파란색에 가까울수록 파란 박스가 제대로 보이지 않는 현상이 있음. rgb(0, 0, 255)의 색을 투명도 90%로 깔아둔 것이므로, 이 현상을 해결할 수 있는 이보다 나은 표현법이 있다면 틀:펼치기 접기/styles.css 문서에서 `@keyframes btn-background`의 `from` 부분을 편집해 주길 바람.

설명

이 틀은 {{나무접기2}} 또는 {{namufolding2}} 또는 {{folding}}으로도 사용할 수 있습니다.

사이트 1.36.4.232 업데이트로 추가된 애니메이션 형식의 접기를 이용한 가장 기본적인 형태의 나무위키 접기 틀입니다.

사용법

기본 사용법
{{나무위키 접기2\|id=아이디\|내용}}
복잡한 문법 필요 시
{{나무위키 접기2\|id=아이디\|div=off}}내용{{접기끝}}
복잡한 문법 필요 및 contentspan 사용 시
{{나무위키 접기2\|id=아이디\|div=off\|contentspan=on}}내용{{접기끝\|span}}

틀 변수

변수	상태	설명
id	필수	접기의 아이디입니다. 기본값으로 default가 입력되지만 반드시 입력할 것을 권장합니다.
title	선택	접기의 제목입니다. 기본값으로 [ 펼치기 · 접기 ]가 입력됩니다.^{[제목]나무위키 접기는 제목을 입력하지 않으면 기본으로 More이 출력되지만 일반적으로 [ 펼치기 · 접기 ]가 가장 많이 사용되므로 이를 고려하였습니다.} 반드시 볼드체가 쳐져 있으며, 이를 해제하고자 할 경우 `title={{nobold\|제목}}`으로 입력하면 됩니다.
{{{1}}}	필수	접기의 내용입니다. 다른 변수들과 달리 파이프 문자(`\|`)를 치고 뒤에 바로 내용을 입력하면 인식됩니다.
titletype	선택	`media`를 입력하면 접기 제목이 나무위키 형태인 [ 펼치기 · 접기 ]에서 미디어위키 형태인 [보기]로 바뀝니다. 이 경우 아래 titlecolor 변수는 사용할 수 없습니다.
titlecolor	선택	접기 제목의 글씨 색입니다. 기본값은 inherit^{[inherit]부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.}입니다.
align	선택	접기 제목의 정렬입니다. 기본값은 inherit^{[inherit]부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.}입니다.
복사방지	선택	접기 제목은 기본적으로 드래그 및 복사가 불가능합니다. 이 변수를 `off`로 입력하면 드래그 및 복사가 가능해집니다.
style	선택	접기 제목이 들어가는 div에 추가로 style을 입력할 수 있습니다.
div	선택	`off`로 입력하면 내용에 해당하는 부분을 틀 바깥으로 뺄 수 있습니다. 일반적인 테이블 문법^{[참고]\| 대신 {{!}}를 쓰거나 <table>을 쓰면 가능합니다. 다만 여전히 문법은 복잡합니다.}, <div>, <span>, 외부 링크 등 틀 끼워넣기 안에서 입력하면 인식되지 않는 문법이 몇 개 있는데, 이러한 문법들이 사용되었을 때 내용 부분을 바깥으로 빼서 입력이 편하도록 합니다. 이때는 {{접기끝}}을 함께 사용해야 합니다.
titlespan	선택	일반적으로 제목과 내용은 문서에서 한 줄 전체를 차지하는 block 속성입니다. 이 변수들을 `on`으로 입력하면 제목 또는 내용에 해당하는 부분이 문서의 한 줄 전체에서 입력된 내용에 해당하는 너비만 차지하는 inline으로 바뀌게 됩니다. 만일 contentspan과 위의 div를 함께 사용했다면 {{접기끝}}에도 `\|span`을 붙여 `{{접기끝\|span}}`으로 사용해야 합니다.
contentspan	선택
table	선택	접기 안에 리스트나 표가 사용될 경우 접기를 펴고 접을 때마다 접기의 하단 부분이 통통 튑니다. 이때 이 변수에 아무 값이나 넣어 주면 접기 전체가 너비 100%의 표 안으로 들어가게 되어 이 현상을 방지할 수 있습니다. 만일 div 변수를 사용했다면 {{접기끝}}에도 이 변수를 사용해 주어야 합니다.

제목과 내용을 따로

{{folding/title|id=아이디}}{{folding/content|id=아이디|내용}}

하위 틀인 틀:나무위키 접기2/title과 틀:나무위키 접기2/content로 제목과 내용을 서로 다른 위치에 둘 수도 있습니다. /content에는 아이디 변수와 내용 변수뿐이며, /title에는 위에서 설명한 나머지 변수가 모두 들어가 있습니다. 마찬가지로 {{나무접기2}} 또는 {{namufolding2}} 또는 {{folding}} 뒤에 /title과 /content를 붙여 사용할 수 있습니다.

사용 주의

환경설정의 편집 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 편집 미리보기에서 접기가 작동하지 않습니다.

사용 팁

리스트나 표가 사용된 접기

본문에 사용된 접기 안에 리스트나 표가 들어가면 접기를 펴고 접을 때 하단 부분이 통통 튑니다.

{{folding|id=list-example-1|
* 리스트
* 리스트
* 리스트
}}

[ 펼치기 · 접기 ]

리스트
리스트
리스트

이를 방지하기 위해 접기 전체를 너비 100%의 표로 감싸 주거나 table 변수를 사용해 주면 좋습니다. 이때 표의 레이아웃이 보이지 않도록 class는 넣지 말아야 합니다.

{|width=100%
|-
|{{folding|id=list-example-2|
* 리스트
* 리스트
* 리스트
}}
|}

{{folding|id=list-example-2|table=on|
* 리스트
* 리스트
* 리스트
}}

[ 펼치기 · 접기 ]

리스트
리스트
리스트

본문과 붙어 있는 접기

본문 위아래에 접기가 사용될 경우, 접기 위의 본문은 무조건 두 줄 줄바꿈이 되며 아래의 본문은 무조건 접기와 붙게 됩니다. 이는 본문의 텍스트 내용은 <p> 태그에 쓰이는데, 위키 기본 시스템상 이 태그에는 0.8rem(=12px)의 하단 여백이 있고, 반대로 접기에 쓰인 <div> 태그에는 기본 하단 여백이 없기 때문입니다.

위쪽 본문
{{folding|id=text-example-1|접기 내용}}

아래쪽 본문

위쪽 본문

[ 펼치기 · 접기 ]

접기 내용

아래쪽 본문

위쪽 본문과 접기가 붙어 있게 하려면 위쪽 본문의 맨 뒤에 {{brbr|-12}}를, 아래쪽 본문과 접기를 떨어뜨리게 하려면 접기의 맨 뒤에 {{brbr}}을 덧붙이면 됩니다.

접기와 붙어 있는 위쪽 본문{{brbr|-12}}

{{folding|id=text-example-2|접기 내용}}{{brbr}}
접기와 떨어져 있는 아래쪽 본문

접기와 붙어 있는 위쪽 본문

[ 펼치기 · 접기 ]

접기 내용

접기와 떨어져 있는 아래쪽 본문

만일 table 변수가 사용되었고, 접기의 가장 아래에 표처럼 기본 여백이 있는 요소가 사용되었을 경우, 이 방법으로 아래 본문과 떨어뜨리면 접기를 펼쳤을 때는 더 큰 여백이 발생하게 됩니다.

{{folding|id=text-example-3|table=on|div=off}}
{{MT}}
|-
|모바일||가독성을||위해
|-
|MT를||썼을 뿐||일반 표
|-
|문법도
|colspan=2|다르진 않습니다
{{MT끝}}{{접기끝|table=on}}{{brbr}}

아래쪽 본문

[ 펼치기 · 접기 ]

모바일	가독성을	위해
MT를	썼을 뿐	일반 표
문법도	다르진 않습니다

아래쪽 본문

이때는 추가적으로 접기 안쪽의 가장 뒤에 사용된 것이 테이블일 경우 그 뒤에 {{brbr|-18}}, 리스트일 경우 {{brbr|-12}}^{[값]값은 때에 따라 달라질 수 있습니다. 여백을 확인해 가며 6의 배수의 음수로 직접 맞추어 보세요.}를 덧붙여 주면 됩니다.

{{folding|id=text-example-4|table=on|div=off}}
{{MT}}
|-
|모바일||가독성을||위해
|-
|MT를||썼을 뿐||일반 표
|-
|문법도
|colspan=2|다르진 않습니다
{{MT끝}}{{brbr|-18}}{{접기끝|table=on}}{{brbr}}

아래쪽 본문

{{folding|id=text-example-5|table=on|
* 리스트도
* 똑같습니다
* 다만 -18이 아니라
* -12로{{brbr|-12}}}}{{brbr}}

아래쪽 본문

[ 펼치기 · 접기 ]

모바일	가독성을	위해
MT를	썼을 뿐	일반 표
문법도	다르진 않습니다

아래쪽 본문

[ 펼치기 · 접기 ]

리스트도
똑같습니다
다만 -18이 아니라
-12로

아래쪽 본문

기타

둘러보기

+

나무위키 형식 틀 모음

[ 펼치기 · 접기 ]

계파 정보	국가 정보 (공산1968 / 주니)	국회의원 선거 정보	교섭단체 정보
기업 정보	내각 정보	노래 가사 정보	도시 정보
둘러보기 (와르샤와 / 김찬)	목차	문단	방송국 정보
선거 정보	언어 정보	언론사 정보	애니메이션 정보
의원 역임 정보	인물 정보 (간편 버전)	전쟁 정보	정당 정보
종교 정보	소속 정당 정보	지역구 국회의원 정보	정당별 국회의원 정보
인터넷 사이트 정보	선거 이력	영화 정보	분류 (와르샤와 / 김찬)
틀 접기 (애니메이션)	접기 (애니메이션)	테이블	텍스트 크기
인용문	링크	리스트
이 틀은 에른스트의 아무튼 공방이 미디어위키로 구현한 나무위키 형식의 틀을 모은 틀입니다. 비공방 소속이 제작한 나무위키 구현 틀은 제외하였습니다.
나무위키 문단 관련 틀

+

김찬이 제작한 183개의 틀

[ A~Z & etc. ]

etc.
틀:,,	틀:--	틀:--2	틀:^^
틀:?div
A~M
틀:bg	틀:BMI	틀:center	틀:cursor
틀:DDAY	틀:div	틀:ffms	틀:full block
틀:jp	틀:leet	틀:librecat	틀:list margin remove
틀:MBTI
N~Z
틀:namucat	틀:namulist	틀:namutoc	틀:nowiki
틀:nowiki2	틀:ol	틀:onbold	틀:PC 열람 권장
틀:pf-c	틀:pre	틀:rotate	틀:snowfalling
틀:span	틀:style	틀:syntaxhighlight	틀:title
틀:tp	틀:tt	틀:u	틀:widen
틀:wingdings

[ ㄱ~ㅅ ]

ㄱ
틀:가로세로비	틀:가로줄	틀:가입일 유저박스	틀:가짜 링크
틀:가짜 문단	틀:갤러리 (김찬)	틀:공백	틀:관련 문서 틀 제목
틀:광과민성 주의	틀:군대 유저박스 (상세)	틀:굵게	틀:그라데이션 글씨
틀:글리치	틀:글배경	틀:글씨 테두리
ㄴ
틀:나무링크	틀:나무마크 틀	틀:나무위키 둘러보기	틀:나무위키 접기
틀:나무위키 접기2 (제목 / 내용)	틀:나무위키 테이블	틀:나무위키 텍스트 크기	틀:나무위키 틀 접기 (애니메이션)
틀:나무위키 틀 접기 끝	틀:나무위키식 문서 상태 틀	틀:너비맞춤	틀:넘겨주기
틀:넘겨주기 안내	틀:네온 글씨
ㄷ
틀:다크모드	틀:댓글 금지	틀:둥근 이미지	틀:등급 유저박스
ㄹ
틀:루비 문자
ㅁ
틀:막대 그래프	틀:말풍선	틀:말풍선 각주 (버튼 / 내용 / 시작 / 끝)	틀:메타 분류
틀:메타 틀	틀:모바일 테이블 (/tag)	틀:모바일 테이블 끝 (/tag)	틀:목차제거
틀:문단접기	틀:문단접기2	틀:문서 가져옴	틀:문서 보충
틀:미공개	틀:미디어위키 접기 V2	틀:밑줄 없는 링크
ㅂ
틀:반전	틀:반전2	틀:배경색 명도 조절	틀:별점
틀:복사방지	틀:부계정 유저박스	틀:분류 바로가기	틀:분류앵커
틀:불법2	틀:블러2	틀:블러3	틀:블러4
틀:블링크	틀:비공식 설정	틀:빈 이미지
ㅅ
틀:사건사고	틀:산문적 문서	틀:상징색	틀:색상 수평줄
틀:성적 요소	틀:세계관 무관	틀:세계관 별점	틀:소설 (시작 / 끝 / 버튼 / 클립보드)
틀:소속단체 유저박스	틀:수평줄 꾸미기	틀:순차형3	틀:스포일러 강조
틀:실루엣	틀:씹덕주의

[ ㅇ~ㅎ ]

ㅇ
틀:안내문	틀:알림창	틀:오류창	틀:외부 라이선스
틀:외부링크숨김	틀:원형 그래프	틀:유저박스 틀	틀:이미지 가림
틀:이미지 넣기 (/tag)	틀:이미지 변화	틀:이미지 여백 제거	틀:인용문D
틀:인용문N → 틀:인용문1	틀:인용문SCP	틀:인용문W
ㅈ
틀:접기변화	틀:주의 가림막	틀:줄바꿈
ㅊ
틀:체크리스트
ㅋ
틀:코드 예제	틀:코드 예제 끝
ㅌ
틀:테두리 그라데이션	틀:텍스트 가림	틀:툴팁	틀:툴팁2
틀:틀 도움
ㅍ
틀:파일	틀:펼치기 접기/multi (제목 / 내용)	틀:폰트	틀:폴리비오스 암호
틀:표 안의 표
ㅎ
틀:하위 문서3	틀:하이라이트	틀:혐오적 요소

※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함

@@ 2번째 줄: / 2번째 줄: @@
 {{틀 도움
 |날짜1=2023.04.24|업데이트1=접기 제목에 드래그 방지 코드 적용
-|날짜2=2023.05.21|업데이트2=모바일에서 제목 터치 시 잠깐 파란 박스 생성 (애니메이션 접기를 사용하는 모든 틀([[틀:펼치기 접기]], [[틀:펼치기 접기/multi]] 등)에 함께 적용){{brbr}}단, 배경색의 명도가 낮거나 파란색에 가까울수록 파란 박스가 제대로 보이지 않는 현상이 있음. rgb(0, 0, 255)의 색을 투명도 90%로 깔아둔 것이므로, 이 현상을 해결할 수 있는 이보다 나은 표현법이 있다면 [[틀:펼치기 접기/styles.css]] 문서에서 <tt>{{c|green|'''@keyframes btn-background'''}}</tt>의 <tt>{{c|green|'''from'''}}</tt> 부분을 편집해 주길 바람.}}
+|날짜2=2023.05.21|업데이트2=모바일에서 제목 터치 시 잠깐 파란 박스 생성 (애니메이션 접기를 사용하는 모든 틀([[틀:펼치기 접기]], [[틀:펼치기 접기/multi]] 등)에 함께 적용){{brbr}}단, 배경색의 명도가 낮거나 파란색에 가까울수록 파란 박스가 제대로 보이지 않는 현상이 있음. rgb(0, 0, 255)의 색을 투명도 90%로 깔아둔 것이므로, 이 현상을 해결할 수 있는 이보다 나은 표현법이 있다면 [[틀:펼치기 접기/styles.css]] 문서에서 <tt>{{c|green|{{bold|@keyframes btn-background}}}}</tt>의 <tt>{{c|green|{{bold|from}}}}</tt> 부분을 편집해 주길 바람.}}
-<includeonly><onlyinclude>{{css|펼치기 접기}}<{{#ifeq:{{{titlespan|}}}|on|span|div}} id="toggle{{{id|default}}}" class="toggleBtn" data-target="collapsible{{{id|default}}}" style="text-align: {{{align|inherit}}}; color: {{{titlecolor|#373a3c}}}; {{#ifeq:{{{복사방지|}}}|off||user-select: none;}} {{{style|}}}">{{{title|[ 펼치기 · 접기 ]}}}</{{#ifeq:{{{titlespan|}}}|on|span|div}}><{{#ifeq:{{{contentspan|}}}|on|span|div}} id="collapsible{{{id|default}}}">{{{1|}}}{{#ifeq:{{{div|}}}|off||</{{#ifeq:{{{contentspan|}}}|on|span|div}}>}}</onlyinclude></includeonly>
 {{관련 문서2|틀:나무위키 접기}}
+<includeonly><onlyinclude>{{css|펼치기 접기}}{{#if:{{{table|}}}|<table width=100%><td>|}}<{{#ifeq:{{{titlespan|}}}|on|span|div}} id="toggle{{#if:{{{id|}}}|{{{id|default}}}|{{{1|default}}}}}" class="toggleBtn mobileBtn" data-target="collapsible{{#if:{{{id|}}}|{{{id|default}}}|{{{1|default}}}}}" style="text-align: {{{align|inherit}}}; color: {{#switch:{{{titlecolor|}}}|link = #0275d8|nolink = #ff0000|exlink = #009900|darklink = #ec9f19|jwiki = #880e4f|default = #373a3c|{{{titlecolor|inherit}}}}}; {{#ifeq:{{{복사방지|}}}|off||user-select: none;}} {{{style|{{{titlestyle|}}}}}}">{{#ifeq:{{{titletype|}}}|media|{{nobold|[{{가짜 링크|notitle=on|{{{title|보기}}}}}]}}|{{{title|[ 펼치기 · 접기 ]}}}}}</{{#ifeq:{{{titlespan|}}}|on|span|div}}><{{#ifeq:{{{contentspan|}}}|on|span|div}} id="collapsible{{#if:{{{id|}}}|{{{id|default}}}|{{{1|default}}}}}" style="{{{contentstyle|}}}">{{#if:{{{2|}}}|{{{2|}}}|{{{1|}}}}}{{#ifeq:{{{div|}}}|off||</{{#ifeq:{{{contentspan|}}}|on|span|div}}>}}{{#ifeq:{{{div|}}}|off||{{#if:{{{table|}}}|</td></table>|}}}}</onlyinclude></includeonly>
 == 설명 ==
 이 틀은 <code><nowiki>{{나무접기2}}</nowiki></code> 또는 <code><nowiki>{{namufolding2}}</nowiki></code> 또는 <code><nowiki>{{folding}}</nowiki></code>으로도 사용할 수 있습니다.
@@ 10번째 줄: / 10번째 줄: @@
 [https://jwiki.kr/rhymix/index.php?mid=notice&document_srl=50991 사이트 1.36.4.232 업데이트]로 추가된 애니메이션 형식의 접기를 이용한 '''가장 기본적인 형태'''의 나무위키 접기 틀입니다.
-<pre>{{나무위키 접기2|id=아이디|내용}}</pre>
+== 사용법 ==
+{|{{style|class=wiki|width=100%}}
+|-
+!{{left|{{nobold|기본 사용법}}}}
+|-
+|<pre style="user-select: all;">{{나무위키 접기2|id=아이디|내용}}</pre>
+|-
+!{{left|{{nobold|복잡한 문법 필요 시}}}}
+|-
+|<pre style="user-select: all;">{{나무위키 접기2|id=아이디|div=off}}내용{{접기끝}}</pre>
+|-
+!{{left|{{nobold|복잡한 문법 필요 및 contentspan 사용 시}}}}
+|-
+|<pre style="user-select: all;">{{나무위키 접기2|id=아이디|div=off|contentspan=on}}내용{{접기끝|span}}</pre>
+|}
-으로 사용합니다. <code>title</code> 변수로 접기의 제목 부분을 바꾸거나 <code>titlecolor</code> 변수로 제목의 글씨 색을 바꿀 수 있습니다.
+=== 틀 변수 ===
+{|{{style|class=wiki|width=100%}}
+|-
+!변수||상태||설명
+|-
+!id
+|'''{{c|red|필수}}'''
+|접기의 아이디입니다. 기본값으로 default가 입력되지만 '''{{u|반드시}} 입력할 것을 권장합니다.'''
+|-
+!title
+|선택
+|접기의 제목입니다. 기본값으로 '''[ 펼치기 · 접기 ]'''가 입력됩니다.{{툴팁2|제목|나무위키 접기는 제목을 입력하지 않으면 기본으로 '''More'''이 출력되지만 일반적으로 '''[ 펼치기 · 접기 ]'''가 가장 많이 사용되므로 이를 고려하였습니다.}} 반드시 볼드체가 쳐져 있으며, 이를 해제하고자 할 경우 <tt><nowiki>title={{nobold|</nowiki><code>제목</code>}}</tt>으로 입력하면 됩니다.
+|-
+!<nowiki>{{{1}}}</nowiki>
+|'''{{c|red|필수}}'''
+|접기의 내용입니다. 다른 변수들과 달리 파이프 문자({{code|{{!}}}})를 치고 뒤에 바로 내용을 입력하면 인식됩니다.
+|-
+!titletype
+|선택
+|{{code|media}}를 입력하면 접기 제목이 나무위키 형태인 '''[ 펼치기 · 접기 ]'''에서 미디어위키 형태인 [{{가짜 링크|notitle=on|보기}}]로 바뀝니다. 이 경우 아래 titlecolor 변수는 사용할 수 없습니다.
+|-
+!titlecolor
+|선택
+|접기 제목의 글씨 색입니다. 기본값은 inherit{{툴팁2|inherit|부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.}}입니다.
+|-
+!align
+|선택
+|접기 제목의 정렬입니다. 기본값은 inherit{{툴팁2|inherit|부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.}}입니다.
+|-
+!복사방지
+|선택
+|접기 제목은 기본적으로 드래그 및 복사가 불가능합니다. 이 변수를 {{code|off}}로 입력하면 드래그 및 복사가 가능해집니다.
+|-
+!style
+|선택
+|접기 제목이 들어가는 div에 추가로 style을 입력할 수 있습니다.
+|-
+!div
+|선택
+|{{code|off}}로 입력하면 내용에 해당하는 부분을 틀 바깥으로 뺄 수 있습니다. 일반적인 테이블 문법{{툴팁2|참고|{{code|{{!}}}} 대신 {{code|<nowiki>{{!}}</nowiki>}}를 쓰거나 {{nowiki|<table>}}을 쓰면 가능합니다. 다만 여전히 문법은 복잡합니다.}}, {{nowiki|<div>}}, {{nowiki|<span>}}, 외부 링크 등 틀 끼워넣기 안에서 입력하면 인식되지 않는 문법이 몇 개 있는데, 이러한 문법들이 사용되었을 때 내용 부분을 바깥으로 빼서 입력이 편하도록 합니다. 이때는 {{틀|접기끝}}을 함께 사용해야 합니다.
+|-
+!titlespan
+|rowspan=2|선택
+|rowspan=2|일반적으로 제목과 내용은 문서에서 한 줄 전체를 차지하는 block 속성입니다. 이 변수들을 {{code|on}}으로 입력하면 제목 또는 내용에 해당하는 부분이 문서의 한 줄 전체에서 입력된 내용에 해당하는 너비만 차지하는 inline으로 바뀌게 됩니다. 만일 contentspan과 위의 div를 함께 사용했다면 {{틀|접기끝}}에도 {{code|{{!}}span}}을 붙여 {{tt|<nowiki>{{접기끝|span}}</nowiki>}}으로 사용해야 합니다.
+|-
+!contentspan
+|-
+!table
+|선택
+|접기 안에 리스트나 표가 사용될 경우 접기를 펴고 접을 때마다 접기의 하단 부분이 통통 튑니다. 이때 이 변수에 아무 값이나 넣어 주면 접기 전체가 너비 100%의 표 안으로 들어가게 되어 이 현상을 방지할 수 있습니다. 만일 div 변수를 사용했다면 {{틀|접기끝}}에도 이 변수를 사용해 주어야 합니다.
+|}
-<code>align</code> 변수로 제목의 정렬을 바꿀 수 있습니다. 기본값은 inherit{{b-fn-b|align-ref|inherit}}이며 left, center, right 등을 입력 가능합니다.
+=== 제목과 내용을 따로 ===
+<pre>{{folding/title|id=아이디}}{{folding/content|id=아이디|내용}}</pre>
-제목과 내용 모두 기본적으로 한 줄 전체를 차지하는 div 태그입니다. <code>titlespan</code> 변수를 on으로 하면 제목이 span 태그로, <code>contentspan</code> 변수를 on으로 하면 내용이 span 태그로 바뀝니다.
+하위 틀인 [[틀:나무위키 접기2/title]]과 [[틀:나무위키 접기2/content]]로 제목과 내용을 서로 다른 위치에 둘 수도 있습니다. {{tt|/content}}에는 아이디 변수와 내용 변수뿐이며, {{tt|/title}}에는 위에서 설명한 나머지 변수가 모두 들어가 있습니다. 마찬가지로 <code><nowiki>{{나무접기2}}</nowiki></code> 또는 <code><nowiki>{{namufolding2}}</nowiki></code> 또는 <code><nowiki>{{folding}}</nowiki></code> 뒤에 {{tt|/title}}과 {{tt|/content}}를 붙여 사용할 수 있습니다.
-접기 내용에 복잡한 위키 문법이 들어갈 경우 틀 변수로 제대로 인식되지 않을 수 있습니다. 대표적으로 테이블 문법이나 div, span 등의 HTML 태그입니다. 이 경우 <code>div</code> 변수를 {{u|off}}로 한 후, 내용 변수를 입력하지 말고 접기에 들어갈 내용을 틀 바로 다음에 따로 적습니다. 이후 접기를 끝낼 지점에 {{틀|접기끝}}을 입력하면 됩니다. 만일 contentspan을 사용했다면 접기끝에도 span을 넣어 주어야 합니다.
+== 사용 주의 ==
+[[특수:환경설정|환경설정]]의 [[특수:환경설정#mw-prefsection-editing|편집]] 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 '''편집 미리보기에서 접기가 작동하지 않습니다.'''
+=== 사용 팁 ===
+==== 리스트나 표가 사용된 접기 ====
+본문에 사용된 접기 안에 리스트나 표가 들어가면 접기를 펴고 접을 때 하단 부분이 통통 튑니다.
+<pre>{{folding|id=list-example-1|
+* 리스트
+* 리스트
+* 리스트
+}}</pre>
+{{folding|id=list-example-1|
+* 리스트
+* 리스트
+* 리스트
+}}{{brbr}}
+이를 방지하기 위해 접기 전체를 너비 100%의 표로 감싸 주거나 {{code|table}} 변수를 사용해 주면 좋습니다. 이때 표의 레이아웃이 보이지 않도록 class는 넣지 말아야 합니다.
+<pre>{|width=100%
+|-
+|{{folding|id=list-example-2|
+* 리스트
+* 리스트
+* 리스트
+}}
+|}</pre>
+<pre>{{folding|id=list-example-2|table=on|
+* 리스트
+* 리스트
+* 리스트
+}}</pre>
+{{folding|id=list-example-2|table=on|
+* 리스트
+* 리스트
+* 리스트
+}}
+==== 본문과 붙어 있는 접기 ====
+본문 위아래에 접기가 사용될 경우, 접기 위의 본문은 무조건 두 줄 줄바꿈이 되며 아래의 본문은 무조건 접기와 붙게 됩니다. 이는 본문의 텍스트 내용은 {{nowiki|<p>}} 태그에 쓰이는데, 위키 기본 시스템상 이 태그에는 0.8rem(=12px)의 하단 여백이 있고, 반대로 접기에 쓰인 {{nowiki|<div>}} 태그에는 기본 하단 여백이 없기 때문입니다.
+<pre>위쪽 본문
+{{folding|id=text-example-1|접기 내용}}
+아래쪽 본문</pre>
+위쪽 본문
+{{folding|id=text-example-1|접기 내용}}
+아래쪽 본문
+{{hr|none|color=black}}<!------------ 구분선 ------------>
+위쪽 본문과 접기가 붙어 있게 하려면 위쪽 본문의 맨 뒤에 {{code|<nowiki>{{brbr|-12}}</nowiki>}}를, 아래쪽 본문과 접기를 떨어뜨리게 하려면 접기의 맨 뒤에 {{code|<nowiki>{{brbr}}</nowiki>}}을 덧붙이면 됩니다.
+<pre>접기와 붙어 있는 위쪽 본문{{brbr|-12}}
+{{folding|id=text-example-2|접기 내용}}{{brbr}}
+접기와 떨어져 있는 아래쪽 본문</pre>
+접기와 붙어 있는 위쪽 본문{{brbr|-12}}
-<pre>{{나무위키 접기2|id=아이디|div=off}}내용{{접기끝}}
+{{folding|id=text-example-2|접기 내용}}{{brbr}}
-{{나무위키 접기2|id=아이디|div=off|contentspan=on}}내용{{접기끝|span}}</pre>
+접기와 떨어져 있는 아래쪽 본문
-한 문서 안에 이 틀을 사용한 같은 아이디를 가진 접기가 있을 경우 가장 먼저 사용된 접기만 활성화됩니다. 이후의 접기들은 제목을 눌러도 가장 먼저 사용된 접기만 펼쳤다 접혀집니다.
+{{hr|none|color=black}}<!------------ 구분선 ------------>
-나무위키의 접기를 모방한 틀이기 때문에 접기의 제목은 기본적으로 드래그 및 복사가 불가합니다. <code>복사방지</code> 변수를 off로 하면 드래그와 복사가 가능해집니다.
+만일 {{code|table}} 변수가 사용되었고, 접기의 가장 아래에 표처럼 기본 여백이 있는 요소가 사용되었을 경우, 이 방법으로 아래 본문과 떨어뜨리면 접기를 펼쳤을 때는 더 큰 여백이 발생하게 됩니다.
-[[특수:환경설정|환경설정]]의 [[특수:환경설정#mw-prefsection-editing|편집]] 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 '''편집 미리보기에서 접기가 작동하지 않습니다.'''
+<pre>{{folding|id=text-example-3|table=on|div=off}}
+{{MT}}
+|-
+|모바일||가독성을||위해
+|-
+|MT를||썼을 뿐||일반 표
+|-
+|문법도
+|colspan=2|다르진 않습니다
+{{MT끝}}{{접기끝|table=on}}{{brbr}}
+아래쪽 본문</pre>
+{{folding|id=text-example-3|table=on|div=off}}
+{{MT}}
+|-
+|모바일||가독성을||위해
+|-
+|MT를||썼을 뿐||일반 표
+|-
+|문법도
+|colspan=2|다르진 않습니다
+{{MT끝}}{{접기끝|table=on}}{{brbr}}
+아래쪽 본문
+{{hr|none|color=black}}<!------------ 구분선 ------------>
+이때는 추가적으로 접기 안쪽의 가장 뒤에 사용된 것이 테이블일 경우 그 뒤에 {{code|<nowiki>{{brbr|-18}}</nowiki>}}, 리스트일 경우 {{code|<nowiki>{{brbr|-12}}</nowiki>}}{{툴팁2|값|값은 때에 따라 달라질 수 있습니다. 여백을 확인해 가며 '''6의 배수의 음수'''로 직접 맞추어 보세요.}}를 덧붙여 주면 됩니다.
+<pre>{{folding|id=text-example-4|table=on|div=off}}
+{{MT}}
+|-
+|모바일||가독성을||위해
+|-
+|MT를||썼을 뿐||일반 표
+|-
+|문법도
+|colspan=2|다르진 않습니다
+{{MT끝}}{{brbr|-18}}{{접기끝|table=on}}{{brbr}}
+아래쪽 본문
+{{folding|id=text-example-5|table=on|
+* 리스트도
+* 똑같습니다
+* 다만 -18이 아니라
+* -12로{{brbr|-12}}}}{{brbr}}
+아래쪽 본문</pre>
+{{folding|id=text-example-4|table=on|div=off}}
+{{MT}}
+|-
+|모바일||가독성을||위해
+|-
+|MT를||썼을 뿐||일반 표
+|-
+|문법도
+|colspan=2|다르진 않습니다
+{{MT끝}}{{brbr|-18}}{{접기끝|table=on}}{{brbr}}
+아래쪽 본문
+{{folding|id=text-example-5|table=on|
+* 리스트도
+* 똑같습니다
+* 다만 -18이 아니라
+* -12로{{brbr|-12}}}}{{brbr}}
+아래쪽 본문
+== 기타 ==
+* [[틀:나무위키 접기2/title]]
+* [[틀:나무위키 접기2/content]]
 == 둘러보기 ==
 {{나무위키 형식 틀 모음}}
 {{김찬 제작 틀}}
-{{b-fn-cs}}
-{{b-fn-c|align-ref|inherit|부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.}}
-{{b-fn-ce}}