신사: 새 문서: {{namucat|김찬/제작한 틀|문법 편의 틀|펼접틀}} {{틀 도움 |날짜1=2023.04.24|업데이트1=접기 제목에 드래그 방지 코드 적용 |날짜2=2023.05.21|업데이트2=모바일에서 제목 터치 시 잠깐 파란 박스 생성 (애니메이션 접기를 사용하는 모든 틀(틀:펼치기 접기, 틀:펼치기 접기/multi 등)에 함께 적용){{brbr}}단, 배경색의 명도가 낮거나 파란색에 가까울수록 파란 박스가 제대로...

2025-07-03T18:53:50Z

새 문서: {{namucat|김찬/제작한 틀|문법 편의 틀|펼접틀}} {{틀 도움 |날짜1=2023.04.24|업데이트1=접기 제목에 드래그 방지 코드 적용 |날짜2=2023.05.21|업데이트2=모바일에서 제목 터치 시 잠깐 파란 박스 생성 (애니메이션 접기를 사용하는 모든 틀(틀:펼치기 접기, 틀:펼치기 접기/multi 등)에 함께 적용){{brbr}}단, 배경색의 명도가 낮거나 파란색에 가까울수록 파란 박스가 제대로...

새 문서

{{namucat|김찬/제작한 틀|문법 편의 틀|펼접틀}}
{{틀 도움
|날짜1=2023.04.24|업데이트1=접기 제목에 드래그 방지 코드 적용
|날짜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> 부분을 편집해 주길 바람.
|날짜3=2024.06.02|업데이트3=hsla() 형식의 색 표현법으로 '''바로 위의 문제 해결'''. 이제 명도가 낮거나 파란색에 가까운 배경에서도 파란 박스가 잘 보임.
|날짜4=2024.06.03|업데이트4=위 업데이트 롤백. 생각보다 모바일에서 작동을 제대로 안 한다...
|날짜5=2024.12.07|업데이트5=본문에 쓰인 접기 틀에 자동으로 하단 여백 생성. {{--|하지만 부작용으로 변수가 복?잡해졌을지도}} {{--|이건 기술력 이슈로 어쩔 수 없다}}
}}
{{넘겨주기|틀=.|나무접기2|namufolding2|folding}}
{{관련 문서2|틀:나무위키 접기}}
<includeonly><onlyinclude>{{css|펼치기 접기}}{{#css:  .mw-parser-output > .namufolding-wrapper { margin-bottom: .8rem; } }}{{#if:{{{table|}}}|<table class="namufolding-wrapper" width=100%><td>|}}<{{#if:{{{titlespan|}}}|span|{{#if:{{{contentspan|}}}|span|{{#if:{{{allspan|}}}|span|div}}}}}} {{#if:{{{table|}}}||class="namufolding-wrapper"}}><{{#if:{{{titlespan|}}}|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: {{color-var|{{{titlecolor|inherit}}}}}; {{#ifeq:{{{복사방지|}}}|off||user-select: none;}} {{{style|{{{titlestyle|}}}}}}">{{{title|[ 펼치기 · 접기 ]}}}</{{#if:{{{titlespan|}}}|span|div}}><{{#if:{{{contentspan|}}}|span|div}} id="collapsible{{#if:{{{id|}}}|{{{id|default}}}|{{{1|default}}}}}" style="{{{contentstyle|}}}">{{#if:{{{2|}}}|{{{2|}}}|{{{1|}}}}}{{#if:{{{div|}}}||</{{#if:{{{contentspan|}}}|span|div}}></{{#if:{{{titlespan|}}}|span|{{#if:{{{contentspan|}}}|span|{{#if:{{{allspan|}}}|span|div}}}}}}>}}{{#if:{{{div|}}}||{{#if:{{{table|}}}|</td></table>}}}}</onlyinclude></includeonly>
== 설명 ==
{{exhide|ex=off|https://jwiki.kr/rhymix/index.php?mid{{=}}notice&document_srl{{=}}50991|사이트 1.36.4.232 업데이트}}로 추가된 애니메이션 형식의 접기를 이용한 '''가장 기본적인 형태'''의 나무위키 접기 틀입니다.

== 사용법 ==
{|{{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}}내용{{folding끝}}</pre>
|-
!{{left|{{nobold|복잡한 문법 필요 및 contentspan 사용 시}}}}
|-
|<pre style="user-select: all;">{{나무위키 접기2|id=아이디|div=off|contentspan=on}}내용{{folding끝|span}}</pre>
|}

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

=== 제목과 내용을 따로 ===
<pre>{{folding/title|id=아이디}}{{folding/content|id=아이디|내용}}</pre>

하위 틀인 [[틀:나무위키 접기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}}를 붙여 사용할 수 있습니다.

== 사용 주의 ==
[[특수:환경설정|환경설정]]의 [[특수:환경설정#mw-prefsection-editing|편집]] 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 '''편집 미리보기에서 접기가 작동하지 않습니다.'''

=== 사용 팁 ===
==== 리스트나 표가 사용된 접기 ====
본문에 사용된 접기 안에 리스트나 표가 들어가면 접기를 펴고 접을 때 하단 부분이 통통 튑니다. (이 문서에서는 [[틀:namucat]]으로 적용된 레이아웃 때문에 통통 튀는 현상이 두드러지지 않는데 기존 레이아웃은 하단 여백이 크므로 현상이 두드러지게 나타납니다.)

<pre>{{folding|id=list-example-1|
* 리스트
* 리스트
* 리스트
}}</pre>

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

{{hr|none|color=var(--box--border)}}

이를 방지하기 위해 접기 전체를 너비 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|
* 리스트
* 리스트
* 리스트
}}

== 기타 ==
* [[틀:나무위키 접기2/title]]
* [[틀:나무위키 접기2/content]]

== 둘러보기 ==
{{나무위키 형식 틀 모음}}
{{김찬 제작 틀}}

틀:Folding - 편집 역사