틀:Namucat
틀:틀 도움
틀:넘겨주기
틀:관련 문서2
설명
사이트 1.36.4.232 업데이트로 추가된 애니메이션 형식의 접기를 이용한 가장 기본적인 형태의 나무위키 접기 틀입니다.
사용법
기본 사용법
|
{{나무위키 접기2|id=아이디|내용}}
|
복잡한 문법 필요 시
|
{{나무위키 접기2|id=아이디|div=off}}내용{{folding끝}}
|
복잡한 문법 필요 및 contentspan 사용 시
|
{{나무위키 접기2|id=아이디|div=off|contentspan=on}}내용{{folding끝|span}}
|
틀 변수
| 변수 |
상태 |
설명
|
| id
|
필수
|
접기의 아이디입니다. 기본값으로 default가 입력되지만 반드시 입력할 것을 권장합니다.
|
| title
|
선택
|
접기의 제목입니다. 기본값으로 [ 펼치기 · 접기 ]가 입력됩니다.{{#css: .mw-parser-output {
counter-reset: number 0;
}
.tooltip-template-trigger {
cursor: pointer;
color: var(namuhyperlink);
user-select: none;
}
.tooltip-template-trigger-numbering-bracket::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\005B' counter(number) '\005D';
}
.tooltip-template-trigger-numbering-number::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: counter(number);
}
.tooltip-template-trigger-numbering-parentheses::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\0028' counter(number) '\0029';
}
.tooltip-template-trigger-2 {
cursor: pointer;
color: inherit;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid var(namucite--border);
background: var(namucite--background);
color: var(namutext);
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
}
.tooltip-template-trigger:hover, .tooltip-template-trigger-numbering-bracket:hover, .tooltip-template-trigger-numbering-number:hover, .tooltip-template-trigger-numbering-parentheses:hover {
text-decoration: underline;
}
.tooltip-template-trigger:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template:hover {
display: block;
}
}}나무위키 접기는 제목을 입력하지 않으면 기본으로 More이 출력되지만 일반적으로 [ 펼치기 · 접기 ]가 가장 많이 사용되므로 이를 고려하였습니다. 반드시 볼드체가 쳐져 있으며, 이를 해제하고자 할 경우 title={{nobold|제목}}으로 입력하면 됩니다.
|
| {{{1}}}
|
필수
|
접기의 내용입니다. 다른 변수들과 달리 파이프 문자(|)를 치고 뒤에 바로 내용을 입력하면 인식됩니다.
|
| titlecolor
|
선택
|
접기 제목의 글씨 색입니다. 기본값은 inherit{{#css: .mw-parser-output {
counter-reset: number 0;
}
.tooltip-template-trigger {
cursor: pointer;
color: var(namuhyperlink);
user-select: none;
}
.tooltip-template-trigger-numbering-bracket::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\005B' counter(number) '\005D';
}
.tooltip-template-trigger-numbering-number::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: counter(number);
}
.tooltip-template-trigger-numbering-parentheses::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\0028' counter(number) '\0029';
}
.tooltip-template-trigger-2 {
cursor: pointer;
color: inherit;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid var(namucite--border);
background: var(namucite--background);
color: var(namutext);
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
}
.tooltip-template-trigger:hover, .tooltip-template-trigger-numbering-bracket:hover, .tooltip-template-trigger-numbering-number:hover, .tooltip-template-trigger-numbering-parentheses:hover {
text-decoration: underline;
}
.tooltip-template-trigger:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template:hover {
display: block;
}
}}부모 요소의 값에 따라 달라짐. 예를 들어 글씨 색이 흰색인 표 안에선 흰색, 빨간색인 표 안에선 빨간색.입니다.
|
| align
|
선택
|
접기 제목의 정렬입니다. 기본값은 inherit{{#css: .mw-parser-output {
counter-reset: number 0;
}
.tooltip-template-trigger {
cursor: pointer;
color: var(namuhyperlink);
user-select: none;
}
.tooltip-template-trigger-numbering-bracket::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\005B' counter(number) '\005D';
}
.tooltip-template-trigger-numbering-number::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: counter(number);
}
.tooltip-template-trigger-numbering-parentheses::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\0028' counter(number) '\0029';
}
.tooltip-template-trigger-2 {
cursor: pointer;
color: inherit;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid var(namucite--border);
background: var(namucite--background);
color: var(namutext);
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
}
.tooltip-template-trigger:hover, .tooltip-template-trigger-numbering-bracket:hover, .tooltip-template-trigger-numbering-number:hover, .tooltip-template-trigger-numbering-parentheses:hover {
text-decoration: underline;
}
.tooltip-template-trigger:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template:hover {
display: block;
}
}}부모 요소의 값에 따라 달라짐. 예를 들어 텍스트 정렬이 왼쪽인 표 안에선 왼쪽, 가운데인 표 안에선 가운데.입니다.
|
| 복사방지
|
선택
|
접기 제목은 기본적으로 드래그 및 복사가 불가능합니다. 이 변수를 off로 입력하면 드래그 및 복사가 가능해집니다.
|
| style
|
선택
|
접기 제목이 들어가는 div에 추가로 style을 입력할 수 있습니다.
|
| titlestyle
|
| contentstyle
|
선택
|
접기 내용이 들어가는 div에 추가로 style을 입력할 수 있습니다.
|
| div
|
선택
|
off로 입력하면 내용에 해당하는 부분을 틀 바깥으로 뺄 수 있습니다. 일반적인 테이블 문법{{#css: .mw-parser-output {
counter-reset: number 0;
}
.tooltip-template-trigger {
cursor: pointer;
color: var(namuhyperlink);
user-select: none;
}
.tooltip-template-trigger-numbering-bracket::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\005B' counter(number) '\005D';
}
.tooltip-template-trigger-numbering-number::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: counter(number);
}
.tooltip-template-trigger-numbering-parentheses::before {
cursor: pointer;
color: var(namuhyperlink);
counter-increment: number 1;
content: '\0028' counter(number) '\0029';
}
.tooltip-template-trigger-2 {
cursor: pointer;
color: inherit;
user-select: none;
}
.tooltip-template {
display: none;
margin: 5px 0;
border: 1px solid var(namucite--border);
background: var(namucite--background);
color: var(namutext);
padding: 12px;
border-radius: 3px;
text-align: left;
user-select: text;
}
.tooltip-template-trigger:hover, .tooltip-template-trigger-numbering-bracket:hover, .tooltip-template-trigger-numbering-number:hover, .tooltip-template-trigger-numbering-parentheses:hover {
text-decoration: underline;
}
.tooltip-template-trigger:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:hover + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-2:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-bracket:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-number:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template-trigger-numbering-parentheses:active + .tooltip-template {
display: block;
user-select: none;
}
.tooltip-template:hover {
display: block;
}
}}| 대신 {{!}}를 쓰거나 틀:Nowiki을 쓰면 가능합니다. 다만 여전히 문법은 복잡합니다., 틀:Nowiki, 틀:Nowiki, 외부 링크 등 틀 끼워넣기 안에서 입력하면 인식되지 않는 문법이 몇 개 있는데, 이러한 문법들이 사용되었을 때 내용 부분을 바깥으로 빼서 입력이 편하도록 합니다. 이때는 {{folding끝}}을 함께 사용해야 합니다.
|
| titlespan
|
선택
|
일반적으로 제목과 내용은 문서에서 한 줄 전체를 차지하는 block 속성입니다. 이 변수들을 on으로 입력하면 제목 또는 내용에 해당하는 부분이 문서의 한 줄 전체에서 입력된 내용에 해당하는 너비만 차지하는 inline으로 바뀌게 됩니다. 만일 contentspan과 위의 div를 함께 사용했다면 {{folding끝}}에도 |span을 붙여 {{folding끝|span}}으로 사용해야 합니다.
|
| contentspan
|
| allspan
|
선택
|
제이위키의 커스텀 접기는 구조적으로 크게 제목 부분과 내용 부분으로 나누어져 있습니다. 그리고 이 접기 틀은 제목 부분과 내용 부분을 통째로 감싸는 하나의 보이지 않는 박스가 있는데, 이 변수는 그 박스를 inline 속성으로 바꾸는 것입니다. 위의 titlespan과 contentspan 중 하나를 사용했다면 이변수는 자동으로 사용되니 크게 신경쓸 필요는 없습니다.
|
| table
|
선택
|
접기 안에 리스트나 표가 사용될 경우 접기를 펴고 접을 때마다 접기의 하단 부분이 통통 튑니다. 이때 이 변수에 아무 값이나 넣어 주면 접기 전체가 너비 100%의 표 안으로 들어가게 되어 이 현상을 방지할 수 있습니다. 만일 div 변수를 사용했다면 {{folding끝}}에도 이 변수를 사용하여 {{folding끝|table=on}}처럼 써야 합니다.
|
제목과 내용을 따로
{{folding/title|id=아이디}}{{folding/content|id=아이디|내용}}
하위 틀인 틀:나무위키 접기2/title과 틀:나무위키 접기2/content로 제목과 내용을 서로 다른 위치에 둘 수도 있습니다. /content에는 아이디 변수와 내용 변수뿐이며, /title에는 위에서 설명한 나머지 변수가 모두 들어가 있습니다. 마찬가지로 {{나무접기2}} 또는 {{namufolding2}} 또는 {{folding}} 뒤에 /title과 /content를 붙여 사용할 수 있습니다.
사용 주의
환경설정의 편집 부분의 "페이지를 다시 불러오지 않고 미리 보기 표시"를 활성화할 경우 편집 미리보기에서 접기가 작동하지 않습니다.
사용 팁
리스트나 표가 사용된 접기
본문에 사용된 접기 안에 리스트나 표가 들어가면 접기를 펴고 접을 때 하단 부분이 통통 튑니다. (이 문서에서는 틀:namucat으로 적용된 레이아웃 때문에 통통 튀는 현상이 두드러지지 않는데 기존 레이아웃은 하단 여백이 크므로 현상이 두드러지게 나타납니다.)
{{folding|id=list-example-1|
* 리스트
* 리스트
* 리스트
}}
<templatestyles src="틀:펼치기 접기/styles.css"></templatestyles>{{#css: .mw-parser-output > .namufolding-wrapper { margin-bottom: .8rem; } }}
틀:Brbr
이를 방지하기 위해 접기 전체를 너비 100%의 표로 감싸 주거나 table 변수를 사용해 주면 좋습니다. 이때 표의 레이아웃이 보이지 않도록 class는 넣지 말아야 합니다.
{|width=100%
|-
|{{folding|id=list-example-2|
* 리스트
* 리스트
* 리스트
}}
|}
{{folding|id=list-example-2|table=on|
* 리스트
* 리스트
* 리스트
}}
<templatestyles src="틀:펼치기 접기/styles.css"></templatestyles>{{#css: .mw-parser-output > .namufolding-wrapper { margin-bottom: .8rem; } }}
기타
둘러보기
틀:나무위키 형식 틀 모음
틀:김찬 제작 틀