틀:Namucat: 두 판 사이의 차이

편집 요약 없음
 
(같은 사용자의 중간 판 206개는 보이지 않습니다)
1번째 줄: 1번째 줄:
{{namucat|나무위키 분류 틀|김찬/제작한 틀}}
{{namucat|namucat}}
{{틀 도움
{{틀 도움
|css=, [[틀:namucat/dark.styles.css|dark]]
|css=, [[틀:namucat/dark.css|dark]]
|날짜1=2022.09.23|업데이트1=틀 생성
|날짜2=2022.09.25|업데이트2=분류 글자를 가릴 수 있는 '''블러 기능''' 추가
|날짜3=2023.03.30|업데이트3=마우스를 올려도 '''분류 문서 제목이 뜨지 않도록''' 변경
|날짜4=2023.04.23|업데이트4=[[틀:블러4|'''마우스를 올리기만 해도 블러가 해제'''되는 기능]] 추가<br>→ 이로써 '''진정한 의미의 나무위키 분류 모방''' 완료
|날짜5=2023.05.14|업데이트5=분류 제한 개수 20개에서 '''40개로 확장'''
|날짜6=2023.05.18|업데이트6=모바일(0.6rem)과 PC(1rem)의 본문 padding에 대응하여 '''하단 여백 따로 지정'''
|날짜7=2023.06.21|업데이트7=모바일에서 링크를 누를 때 0.5초 동안 파란 박스가 생성
|날짜8=2023.07.07|업데이트8=리스트가 나무위키 형식으로 변화
|날짜9=2023.07.09|업데이트9=목차가 나무위키 형식으로 변화
|날짜10=2023.07.10|업데이트10=문단이 나무위키 형식으로 변화
|날짜11=2023.07.15|업데이트11=다크 모드 대응 변수 추가(불완전)
|날짜12=2023.07.19|업데이트12={{tt|border}} 변수 이미지의 테두리 색 변경
|날짜13=2023.11.16|업데이트13=수평줄({{tt|<nowiki><hr></nowiki>}})의 색상이 #e1e8ed에서 #ccc로 변경
|날짜14=2023.11.24|업데이트14=테이블 셀 테두리의 색, 하이퍼링크들의 글씨 색이 나무위키와 동일하게 변경
|날짜15=2024.01.26|업데이트15='분류' 글자를 누르면 문서 새로고침, 넘겨주기 목록, 이동하기 버튼들이 나타나는 기능 추가
}}
}}
{{알림창|[[/업데이트 노트|여기]]에서 틀의 최신 업데이트 노트를 확인하세요!}}
{{넘겨주기|틀=.|나무분류}}
{{다른 뜻2|설명1=리브레 위키 디자인의 분류 틀|제목1=틀:librecat}}
{{다른 뜻2|설명1=리브레 위키 디자인의 분류 틀|제목1=틀:librecat}}
{{하위 문서2|업데이트 노트|blur|legacy}}
{{목차}}
{{목차}}
== 틀 본문 ==
== 틀 본문 ==
<onlyinclude><includeonly>{{#ifeq:{{{type|}}}|dark|<templatestyles src="namucat/dark.styles.css" />|<templatestyles src="namucat/styles.css" />}}{{#if:{{{1|}}}|<div class="namucat-main-box"><span id="togglenamucat-template-helper-btn" class="toggleBtn" data-target="collapsiblenamucat-template-helper-btn" style="font-weight: normal; cursor: text;">분류</span><span style="user-select: none;">:</span> <!--
<onlyinclude><includeonly>{{navbarcolor|linear-gradient(90deg,#00a69c,#00a69c,#28b472)}}{{#ifeq:{{{type|}}}|dark|<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; background: #000;"></div>|}}{{#css: <!--
문서 일괄 적용-->.mw-parser-output { font-size: 15px; color: #{{#ifeq:{{{type|}}}|dark|e0e0e0|212529}}; font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; line-height: 1.5; word-break: break-all; {{#ifeq:{{{type|}}}|dark|background: black; margin: -15px; padding: 15px;|}} } .contentSub { font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; } .Liberty .content-wrapper .liberty-content .liberty-content-header { border-bottom: none; background-color: {{#ifeq:{{{type|}}}|dark|#000|#fff}}; } <!--
링크-->a { color: #{{#ifeq:{{{type|}}}|dark|ec9f19|0275d8}}; transition: color .05s ease-in; } a:hover { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } a:active { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } a.new { color: #{{#ifeq:{{{type|}}}|dark|dc4343|ff0000}}; } a.new:hover { color: #{{#ifeq:{{{type|}}}|dark|dc4343|ff0000}}; } a.new:active { color: #{{#ifeq:{{{type|}}}|dark|dc4343|ff0000}}; } a.external { color: #009900; } a.external:hover { color: #009900; } a.external:active { color: #009900; } .plainlinks a.external { color: #0275d8; transition: color .05s ease-in; } .plainlinks:hover a.external { color: #0263d8; } .plainlinks:active a.external { color: #0263d8; } .plainlinks a.external:before { display: none; } .plainlinks:hover a.external:before { display: none; } .plainlinks:active a.external:before { display: none; } a.external:before { font-size: .8em; padding: .2em; color: #ffffff; background: #008000; } a.selflink { color: inherit; } a.selflink:hover { color: inherit; } a.selflink:active { color: inherit; } .rssh:hover, .rssh:active { color: black; } <!--
테이블-->table.wikitable { margin: .8rem 0; } .wikitable td { border: 1px solid #{{#ifeq:{{{type|}}}|dark|383b40|ddd}}!important; } .wikitable th { border: 1px solid #{{#ifeq:{{{type|}}}|dark|383b40|ddd}}!important; } <!--
문단-->h1, h2, h3, h4, h5, h6 { border-bottom: 1px solid #{{#ifeq:{{{type|}}}|dark|383b40|ccc}}!important; font-weight: bold!important; font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; } .title h1 { border: none!important; display: inline-block; color: #{{#ifeq:{{{type|}}}|dark|e0e0e0|212529}}!important; font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; } .title h1:hover { cursor: pointer; text-decoration: underline; } .number-link { font-weight: bold; color: #{{#ifeq:{{{type|}}}|dark|ec9f19|0275d8}}; font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; transition: color .05s ease-in; } .number-link:hover { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } .number-link:active { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } .mw-editsection-bracket { margin: 0!important; color: #{{#ifeq:{{{type|}}}|dark|ec9f19|0275d8}}!important; } .mw-editsection-bracket:hover { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } .mw-editsection-bracket:active { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } hr { border-top-color: #{{#ifeq:{{{type|}}}|dark|383b40|ccc}}; } .toc { border: 1px solid #{{#ifeq:{{{type|}}}|dark|383b40|ccc}}!important; } .toctext { color: #{{#ifeq:{{{type|}}}|dark|e0e0e0|212529}}!important; } .tocnumber { color: #{{#ifeq:{{{type|}}}|dark|ec9f19|0275d8}}; padding-right: .3em!important; } .tocnumber:hover { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } .tocnumber:active { color: #{{#ifeq:{{{type|}}}|dark|bd7f14|0263d8}}; } h2#mw-toc-heading { font-weight: normal!important; } <!--
각주-->.RTsettings { display: none; } .mw-parser-output ol.references { font-size: 15px!important; } .reference-text { font-size: 15px!important; } .referencetooltip li { background: #fff; border: none; border-radius: 3px; box-shadow: 0 0 2px rgba(0, 0, 0, .5); max-width: 400px; padding: 15px; word-break: break-all; } .referencetooltip li+li { border-top-color: transparent; margin-top: 0; margin-bottom: -5px; } .referencetooltip>li+li::after { border-top-color: #ddd; } sup.reference { font-weight: inherit; font-style: inherit; } .mw-references-wrap, .mw-references-columns { border-top: 1px solid #777!important; margin: 1.5em 0; padding: .5em 0; }<!--
기타-->pre:not(.wikiEditor-ui) { background-color: #{{#ifeq:{{{type|}}}|dark|2d2f34|eee}}; border: 1px solid #{{#ifeq:{{{type|}}}|dark|383b40|ddd}}; border-radius: 3px; padding: 7px; {{#ifeq:{{{type|}}}|dark|color: #ddd;}} font-family: monospace; text-align: left; } code { padding: 0.2rem 0.4rem; font-size: 90%; color: #bd4147; background-color: #f7f7f9; border-radius: 0.25rem; } .wikiEditor-ui pre { border: none!important; font-family: monospace; } .CodeMirror { font-family: monospace,monospace; } .mw-category-generated .number-link { display: none!important; } b { font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "NanumBarunGothic", Roboto, "Segoe UI", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif, emoji; } .Liberty .nav-wrapper .navbar .navbar-nav .nav-item .nav-link:hover { background-color: hsla(0,0%,100%,.1); } .Liberty .nav-wrapper .navbar .navbar-nav .nav-item .nav-link:focus { background-color: hsla(0,0%,100%,.1); } .dropdown-item { color: #212529; } .dropdown-menu .dropdown-item:hover { background-color: #f2f2f2; color: #212529; } .dropdown-menu .dropdown-item:focus { background-color: #f2f2f2; color: #212529; } }}<!--
 
문서 제목 조정-->{{#ifeq:{{{DISPLAYTITLE|}}}|none||{{#ifeq:{{{pagename|}}}|default<!--
첫 알파벳 대문자-->|{{#if:{{NAMESPACE}}|{{보일제목:<span style="box-shadow: inset 0 -0.5rem 0 #d4f0e3;">{{NAMESPACE}}</span>:{{{DISPLAYTITLE|{{PAGENAME}}}}}}}|{{보일제목:{{{DISPLAYTITLE|{{FULLPAGENAME}}}}}}}}}<!--
첫 알파벳 소문자-->|{{#if:{{NAMESPACE}}|{{보일제목:<span style="box-shadow: inset 0 -0.5rem 0 #d4f0e3;">{{NAMESPACE}}</span>:{{첫소문자:{{{DISPLAYTITLE|{{PAGENAME}}}}}}}}}|{{보일제목:{{{DISPLAYTITLE|{{FULLPAGENAME}}}}}}}}}}}}}<!--
 
CSS 선언--><templatestyles src="namucat/styles.css" /><!--
 
분류 창 시작-->{{#if:{{{1|}}}|<div class="namucat-main-box"><span style="font-weight: normal; cursor: text;">분류</span><span style="user-select: none;">:</span> <!--


-->{{#if:{{{1|}}}|{{#if:{{{blur1|}}}|<div {{#if:{{{2|}}}|class="namucat-stick"|}} style="display: inline;">{{namucat/blur|[[:분류:{{{1|}}}|{{title|2={{{1|}}}}}]]}}</div>|<div {{#if:{{{2|}}}|class="namucat-stick"|}} style="display: inline;">[[:분류:{{{1|}}}|{{title|2={{{1|}}}}}]]</div>}}}}<!--
-->{{#if:{{{1|}}}|{{#if:{{{blur1|}}}|<div {{#if:{{{2|}}}|class="namucat-stick"|}} style="display: inline;">{{namucat/blur|[[:분류:{{{1|}}}|{{title|2={{{1|}}}}}]]}}</div>|<div {{#if:{{{2|}}}|class="namucat-stick"|}} style="display: inline;">[[:분류:{{{1|}}}|{{title|2={{{1|}}}}}]]</div>}}}}<!--
103번째 줄: 105번째 줄:
-->{{#if:{{{40|}}}|{{#if:{{{blur40|}}}|<div style="display: inline;">{{namucat/blur|[[:분류:{{{40|}}}|{{title|2={{{40|}}}}}]]}}</div>|<div style="display: inline;">[[:분류:{{{40|}}}|{{title|2={{{40|}}}}}]]</div>}}}}<!--
-->{{#if:{{{40|}}}|{{#if:{{{blur40|}}}|<div style="display: inline;">{{namucat/blur|[[:분류:{{{40|}}}|{{title|2={{{40|}}}}}]]}}</div>|<div style="display: inline;">[[:분류:{{{40|}}}|{{title|2={{{40|}}}}}]]</div>}}}}<!--


--></div>|<div class="namucat-no-box">이 문서는 분류가 되어 있지 않습니다. [[도움말:분류]]를 참고하여 적절한 분류로 문서를 분류해 주세요!</div>}}<!--
--></div>|<div class="namucat-no-box">이 문서는 <span id="togglenamucat-template-helper-btn" class="toggleBtn" data-target="collapsiblenamucat-template-helper-btn" style="font-weight: normal; cursor: text;">분류</span>가 되어 있지 않습니다. [[도움말:분류]]를 참고하여 적절한 분류로 문서를 분류해 주세요!</div>}}<!--
-->{{#if:{{{1|}}}|[[분류:{{{1|}}}]]|}}<!--
-->{{#if:{{{1|}}}|[[분류:{{{1|}}}]]|}}<!--
-->{{#if:{{{2|}}}|[[분류:{{{2|}}}]]|}}<!--
-->{{#if:{{{2|}}}|[[분류:{{{2|}}}]]|}}<!--
143번째 줄: 145번째 줄:
-->{{#if:{{{38|}}}|[[분류:{{{38|}}}]]|}}<!--
-->{{#if:{{{38|}}}|[[분류:{{{38|}}}]]|}}<!--
-->{{#if:{{{39|}}}|[[분류:{{{39|}}}]]|}}<!--
-->{{#if:{{{39|}}}|[[분류:{{{39|}}}]]|}}<!--
-->{{#if:{{{40|}}}|[[분류:{{{40|}}}]]|}}<!--
-->{{#if:{{{40|}}}|[[분류:{{{40|}}}]]|}}</includeonly></onlyinclude>


--><div id="collapsiblenamucat-template-helper-btn"><!--
== 설명 ==
--><div style="width: 100%; height: 50px;"><!--
'''{{++1|[[김찬]]의 기술력의 집대성이자 최대 걸작.}}'''<br>{{--|음, 조금 오글거리나요? 그래도 그만큼 자부한다는 뜻입니다!}}
-->{{purge|{{div|atr=class="namucat-helper-btn" title="이 틀을 새로고침"|새로고침}}}}<!--
--><div class="namucat-helper-btn-margin"></div><!--
--><span class="plainlinks">[{{fullurl:특수:가리키는문서/{{FULLPAGENAME}}|hidetrans=1&hidelinks=1}} <div class="namucat-helper-btn" title="이 틀의 넘겨주기">넘겨주기</div>]</span><!--
--><div class="namucat-helper-btn-margin"></div><!--
-->[[특수:이동/{{FULLPAGENAME}}|<div class="namucat-helper-btn" title="이 틀을 이동하기">이동하기</div>]]<!--
--></div><!--
--></div></includeonly></onlyinclude>


== 설명 ==
나무위키 형태의 분류를 삽입하는 틀입니다. 문서 맨 위에 사용하면 분류 목록이 문서 최상단에 나타납니다. 문서 맨 위가 아닌 곳에 사용하면 그 위치에 분류가 생성되니 '''반드시 맨 위에 사용'''해야 합니다. 분류 위치 외에도 이 틀은 하단에만 1rem(모바일에서는 0.6rem)의 여백을 가지므로 이 틀 위에 다른 내용이 있을 경우 그 내용과 이 틀이 딱 붙어 버리는 현상이 있을 수 있습니다. 이를 방지하기 위해서라도 반드시 문서의 맨 위에 사용해 주십시오.
나무위키 형태의 분류를 삽입하는 틀입니다. 문서 맨 위에 사용하면 분류 목록이 문서 최상단에 나타납니다. 문서 맨 위가 아닌 곳에 사용하면 그 위치에 분류가 생성되니 '''반드시 맨 위에 사용'''해야 합니다. 분류 위치 외에도 이 틀은 하단에만 1rem(모바일에서는 0.6rem)의 여백을 가지므로 이 틀 위에 다른 내용이 있을 경우 그 내용과 이 틀이 딱 붙어 버리는 현상이 있을 수 있습니다. 이를 방지하기 위해서라도 반드시 문서의 맨 위에 사용해 주십시오.


165번째 줄: 159번째 줄:
{|{{style|class=wiki|width=100%|layout=on}}
{|{{style|class=wiki|width=100%|layout=on}}
|-
|-
!올바른 사용법||잘못된 사용법
!올바른 사용법||잘못된 사용법||대체 가능
|-
|-
|<pre>{{namucat|제이위키|위키위키|위키미디어}}</pre>
|<pre>{{namucat|제이위키|위키위키|위키미디어}}</pre>
171번째 줄: 165번째 줄:
|제이위키
|제이위키
|위키위키
|위키위키
|위키미디어}}</pre>
|위키미디어
}}</pre>
|<pre>{{namucat<!--
-->|제이위키<!--
-->|위키위키<!--
-->|위키미디어<!--
-->}}</pre>
|}
|}


<pre>{{namucat|제이위키|위키위키|위키미디어}}</pre>
<div style="margin: 12px 0; border: 1px solid #ccc; padding: 3px 3px 3px 5px; border-radius: 4px;">분류<span style="user-select: none;">:</span> [[:분류:제이위키|{{title|2=제이위키}}]]<div style="border-left: 1px solid #888; display: inline-block; height: 0.8rem; margin: 0 0.4rem -0.1rem;"></div>[[:분류:위키위키|{{title|2=위키위키}}]]<div style="border-left: 1px solid #888; display: inline-block; height: 0.8rem; margin: 0 0.4rem -0.1rem;"></div>[[:분류:위키미디어|{{title|2=위키미디어}}]]</div>
 
<div style="margin: 12px 0; border: 1px solid #ccc; padding: 3px 3px 3px 5px; border-radius: 4px;">분류<span style="user-select: none;">:</span> [[:분류:제이위키|{{title|2=제이위키}}]]<div style="display: inline; padding: 0 5px; user-select: none;">{{!}}</div>[[:분류:위키위키|{{title|2=위키위키}}]]<div style="display: inline; padding: 0 5px; user-select: none;">{{!}}</div>[[:분류:위키미디어|{{title|2=위키미디어}}]]</div>


이와 같이 해당 분류 문서가 존재하는 경우 {{가짜 링크|notitle=on|파란색}}, 존재하지 않는 경우 {{가짜 링크|notitle=on|class=nolink|빨간색}}으로 표시됩니다.
이와 같이 해당 분류 문서가 존재하는 경우 {{가짜 링크|notitle=on|파란색}}, 존재하지 않는 경우 {{가짜 링크|notitle=on|class=nolink|빨간색}}으로 표시됩니다.
183번째 줄: 181번째 줄:


<div style="margin: 12px 0; border: 1px solid #bcdff1; padding: 10px; background: #d9edf7; border-radius: 5px; color: #31708f;">이 문서는 분류가 되어 있지 않습니다. [[도움말:분류]]를 참고하여 적절한 분류로 문서를 분류해 주세요!</div>
<div style="margin: 12px 0; border: 1px solid #bcdff1; padding: 10px; background: #d9edf7; border-radius: 5px; color: #31708f;">이 문서는 분류가 되어 있지 않습니다. [[도움말:분류]]를 참고하여 적절한 분류로 문서를 분류해 주세요!</div>
이 틀로 문서를 분류하면 실제 분류에도 적용됩니다. 다만 문서 최하단의 실제 분류는 감추거나 숨길 수 없으므로 문서에서는 이 틀로 만들어진 분류와 실제 분류 둘로 중복되어 나타납니다. 환경설정에서도 분류의 위치를 옮기거나 보이지 않게 하는 항목은 없고, 기능적인 문제이므로 해결 방법은 아직 없습니다.


[[숨은 분류]]는 이 틀로 분류하지 말고 기존 분류 문법으로 분류할 것을 권장합니다.
[[숨은 분류]]는 이 틀로 분류하지 말고 기존 분류 문법으로 분류할 것을 권장합니다.
195번째 줄: 191번째 줄:
<pre>{{namucat|제이위키|blur1=on|위키위키|위키미디어|blur3=on}}</pre>
<pre>{{namucat|제이위키|blur1=on|위키위키|위키미디어|blur3=on}}</pre>


<div style="margin: 12px 0; border: 1px solid #ccc; padding: 3px 3px 3px 5px; border-radius: 4px;">분류<span style="user-select: none;">:</span> <div style="display: inline;">{{namucat/blur|[[:분류:제이위키|{{title|2=제이위키}}]]}}</div><div style="display: inline; padding: 0 5px; user-select: none;">{{!}}</div>[[:분류:위키위키|{{title|2=위키위키}}]]<div style="display: inline; padding: 0 5px; user-select: none;">{{!}}</div><div style="display: inline;">{{namucat/blur|[[:분류:위키미디어|{{title|2=위키미디어}}]]}}</div></div>
<div style="margin: 12px 0; border: 1px solid #ccc; padding: 3px 3px 3px 5px; border-radius: 4px;">분류<span style="user-select: none;">:</span> <div style="display: inline;">{{namucat/blur|[[:분류:제이위키|{{title|2=제이위키}}]]}}</div><div style="border-left: 1px solid #888; display: inline-block; height: 0.8rem; margin: 0 0.4rem -0.1rem;"></div>[[:분류:위키위키|{{title|2=위키위키}}]]<div style="border-left: 1px solid #888; display: inline-block; height: 0.8rem; margin: 0 0.4rem -0.1rem;"></div><div style="display: inline;">{{namucat/blur|[[:분류:위키미디어|{{title|2=위키미디어}}]]}}</div></div>


블러된 각 분류에 마우스를 올리면 본래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.
블러된 각 분류에 마우스를 올리면 본래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.
=== 다크 모드 ===
<nowiki>{{namucat|</nowiki>{{bold|type{{=}}dark}}|분류1|분류2|…}}
위처럼 사용하면 제이위키의 다크 모드에 대응하여 일부 색상이 바뀝니다. 대표적으로 하이퍼링크, 수평줄, 테이블 테두리 등입니다. '''제이위키에서 제공하는 다크 모드를 켜야만''' 정상 작동하니 참고하세요. (틀의 다크 모드만 켜면 테이블의 기본 배경 색 등은 바뀌지 않아서 다소 가독성이 떨어집니다.)


== 부가 기능 ==
== 부가 기능 ==
단순히 분류 디자인을 나무위키처럼 바꾼다 외에, 이 틀을 사용한 문서에는 다음과 같은 부가 기능들이 함께 적용됩니다. , 오로지 본문 안에서만 적용되며, 분류 문서일 경우 분류된 문서 목록에도 적용되지 않습니다. 명목상으로는 사이트의 기본 골자를 크게 해치지 않기 위함이며, 시스템상으로는 본문까지만 간섭할 수 있기 때문입니다.
단순히 나무위키와 동일한 디자인의 분류라는 기능 외에, 이 틀을 사용한 문서에는 다음과 같은 부가 기능들이 함께 적용됩니다.
 
, {{exhide|ex=off|https://jwiki.kr/rhymix/index.php?mid{{=}}notice&document_srl{{=}}61027|사이트 1.41.243 업데이트}} 이후로 제이위키의 기본 분류 창도 나무위키처럼 바뀌었으니 이제 이 틀의 핵심은 사실상 이 부가 기능들이 되지 않았나 싶기도 합니다.


* 모바일에서 링크를 꾹 눌렀을 때 0.5초 동안 링크에 파란 박스가 생겼다가 사라집니다. 비슷하게 나무위키를 모방한 {{틀|나무위키 접기2}}와 {{틀|펼치기 접기}}도 마찬가지로 접기 제목에 같은 효과가 적용됩니다.
* 모바일에서 링크를 꾹 눌렀을 때 0.5초 동안 링크에 파란 박스가 생겼다가 사라집니다. 비슷하게 나무위키를 모방한 {{틀|나무위키 접기2}}와 {{틀|펼치기 접기}}도 마찬가지로 접기 제목에 같은 효과가 적용됩니다.
218번째 줄: 221번째 줄:


* 이미지 문법에 border 변수를 추가했을 때 나타나는 이미지의 테두리 색이 <span style="border: 1px solid #eaecf0;">#eaecf0</span>에서 테이블 기본 테두리 색인 <span style="border: 1px solid #e1e8ed;">#e1e8ed</span>로 변경됩니다.
* 이미지 문법에 border 변수를 추가했을 때 나타나는 이미지의 테두리 색이 <span style="border: 1px solid #eaecf0;">#eaecf0</span>에서 테이블 기본 테두리 색인 <span style="border: 1px solid #e1e8ed;">#e1e8ed</span>로 변경됩니다.
{{brbr}}
* 기본 글씨 크기가 15px로 바뀝니다. 기존 제이위키의 글씨 크기는 14.4px이므로, 눈으로 보기에도 조금은 커졌을지도 모르겠습니다. 이외 글꼴과 글씨 색도 다소 변경되었습니다.
{{brbr}}
* 사이트 최상단 내비게이션 바의 색상이 제이위키의 상징색에서 나무위키의 상징색(그라데이션)으로 바뀝니다.
{{brbr}}
* 문서의 제목 부분과 본문 부분의 경계가 사라집니다.
{{brbr}}
* <code><nowiki><pre></nowiki></code> 태그의 디자인이 (나무위키와 동일하도록) 다소 바뀝니다. 음, 조금 어색한가요?
== 주의 ==
* 이 틀을 사용한 문서에는 <code><nowiki>{{DISPLAYTITLE:보일 제목}}</nowiki></code>을 사용할 수 없습니다. 이미 틀 안에 보일 제목이 사용되어 있기 때문에 새로 보일 제목을 사용하면 오류가 나 버립니다. 보일 제목을 사용해야겠다면 {{code|DISPLAYTITLE}} 변수로 대신 가능합니다. <code><nowiki>{{namucat|DISPLAYTITLE=보일 제목|분류1|분류2|…}}</nowiki></code> 이렇게 사용할 수 있습니다. 하지만 <code>|DISPLAYTITLE=none</code>으로 입력할 경우 틀 바깥에서 <code><nowiki>{{DISPLAYTITLE:보일 제목}}</nowiki></code>을 원래처럼 사용할 수 있게 됩니다.
** 틀 문서, 분류 문서 등 이름 공간이 있는 문서에서 {{code|DISPLAYTITLE}} 변수를 사용한다면 이름 공간이 유지된 채 변수에 넣은 값은 그 뒤에 출력됩니다. 예를 들어 [[:분류:제이위키]] 문서에서 <code><nowiki>{{namucat|DISPLAYTITLE=Jwiki|…}}</nowiki></code>를 사용한다면 보이는 제목은 'Jwiki'가 아니라 '분류:Jwiki'가 됩니다.
{{brbr}}
* 이름 공간이 있는 문서에서 문서의 제목이 영어로 시작하는 문서일 경우 첫 글자 알파벳이 반드시 소문자로 입력됩니다. 이는 미디어위키에서 첫 글자 알파벳을 반드시 대문자로 출력하는 현상을 방지하기 위함입니다. 하지만 대문자로 출력해야 하는 글자라면 <code><nowiki>|pagename=default</nowiki></code>라는 변수를 추가로 넣어 해제할 수 있습니다.
{{brbr}}
== 위상 ==
[[:분류:김찬/제작한 틀|제작자의 수많은 보급형 틀들]] 중에도 '''가장 많은 사용자가 가장 널리 사용하는 틀'''이며, 근거 없는 추측이지만 {{exhide|ex=off|https://jwiki.kr/rhymix/index.php?mid{{=}}notice&document_srl{{=}}61027|사이트 1.41.243 업데이트}}에서 사이트의 많은 디자인이 나무위키처럼 변화하게 된 데에도 적잖은 영향을 끼쳤을 것으로 보인다. 이에 따라 일부 사용자들은 이 틀의 원리와 코드를 참고하여 자신만의 디자인과 형식대로 새로운 분류(+문서 디자인 변경) 틀을 만들어 내기도 했다. 대표적으로 [[사용자:윤마토군|윤마토군]]이 만든 [[틀:namucat-dark2]]와 [[사용자:리반|리반]]이 만든 [[틀:namucat-liban]]이 있다. 이외에도  [[틀:OEU 분류]] 등도 있다. namucat 틀의 생성 이후 이러한 '''"분류를 기존과 다른 방식 및 디자인으로 삽입하기 위한" 목적의 틀들이 크고 작은 유행을 만들어 냈다.'''


== 기타 ==
또한 이 틀을 시작으로 스타일 CSS에서 새로운 클래스를 만들고 스타일을 적용하는 것이 아닌 '''사이트에 원래 존재하는 기존 클래스의 스타일을 새로 정의함으로써 레이아웃을 바꾸어 내는 방식도 널리 확산'''되게 되었다.
{{css/s}}
* {{|namucat/blur}}


== 둘러보기 ==
== 둘러보기 ==

2024년 5월 22일 (수) 23:48 기준 최신판

분류:
:namucat
사용문서
새로고침
넘겨주기
이동하기

여기에서 틀의 최신 업데이트 노트를 확인하세요!

 이 틀은 {{나무분류}}로도 사용할 수 있습니다.  리브레 위키 디자인의 분류 틀에 대한 내용은 틀:librecat 문서를 참고하십시오.  하위 문서: 업데이트 노트, blur, legacy

틀 본문

설명

김찬의 기술력의 집대성이자 최대 걸작.
음, 조금 오글거리나요? 그래도 그만큼 자부한다는 뜻입니다!

나무위키 형태의 분류를 삽입하는 틀입니다. 문서 맨 위에 사용하면 분류 목록이 문서 최상단에 나타납니다. 문서 맨 위가 아닌 곳에 사용하면 그 위치에 분류가 생성되니 반드시 맨 위에 사용해야 합니다. 분류 위치 외에도 이 틀은 하단에만 1rem(모바일에서는 0.6rem)의 여백을 가지므로 이 틀 위에 다른 내용이 있을 경우 그 내용과 이 틀이 딱 붙어 버리는 현상이 있을 수 있습니다. 이를 방지하기 위해서라도 반드시 문서의 맨 위에 사용해 주십시오.

사용법

{{namucat|분류1|분류2|분류3|…|분류40}}

분류는 총 40개까지 입력할 수 있으며, 입력할 땐 분류:라는 이름공간 없이 해당 분류 페이지의 제목만 입력하면 됩니다. 이 틀은 세로로 사용할 수 없는데, 세로로 사용하면 띄어쓰기가 생기는 탓에 링크가 제대로 적용되지 않고 깨지기 때문입니다.

올바른 사용법 잘못된 사용법 대체 가능
{{namucat|제이위키|위키위키|위키미디어}}
{{namucat
|제이위키
|위키위키
|위키미디어
}}
{{namucat<!--
-->|제이위키<!--
-->|위키위키<!--
-->|위키미디어<!--
-->}}

이와 같이 해당 분류 문서가 존재하는 경우 파란색, 존재하지 않는 경우 빨간색으로 표시됩니다.

틀만 삽입하고 아무 분류도 넣지 않으면 아래와 같은 미분류 박스가 나타납니다.

이 문서는 분류가 되어 있지 않습니다. 도움말:분류를 참고하여 적절한 분류로 문서를 분류해 주세요!

숨은 분류는 이 틀로 분류하지 말고 기존 분류 문법으로 분류할 것을 권장합니다.

어떤 틀 내에 분류 문법이 있어 틀을 삽입하면 분류도 함께 삽입될 때, 당연하게도 그 분류는 이 틀에 포함되지 않습니다. 이 경우 직접 그 분류를 추가해 주어야 합니다.

blur 변수

blur숫자=라는 이름의 변수가 있습니다. 이 변수를 선언하면 숫자에 해당하는 순서의 분류가 블러 처리됩니다. 예를 들어 blur3=on처럼 입력하면 세 번째에 입력한 분류가 블러 처리됩니다. 나무위키의 분류 블러처럼 마우스를 올려 원래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.

{{namucat|제이위키|blur1=on|위키위키|위키미디어|blur3=on}}

블러된 각 분류에 마우스를 올리면 본래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.

다크 모드

{{namucat|type=dark|분류1|분류2|…}}

위처럼 사용하면 제이위키의 다크 모드에 대응하여 일부 색상이 바뀝니다. 대표적으로 하이퍼링크, 수평줄, 테이블 테두리 등입니다. 제이위키에서 제공하는 다크 모드를 켜야만 정상 작동하니 참고하세요. (틀의 다크 모드만 켜면 테이블의 기본 배경 색 등은 바뀌지 않아서 다소 가독성이 떨어집니다.)

부가 기능

단순히 나무위키와 동일한 디자인의 분류라는 기능 외에, 이 틀을 사용한 문서에는 다음과 같은 부가 기능들이 함께 적용됩니다.

음, 사이트 1.41.243 업데이트 이후로 제이위키의 기본 분류 창도 나무위키처럼 바뀌었으니 이제 이 틀의 핵심은 사실상 이 부가 기능들이 되지 않았나 싶기도 합니다.

  • 모바일에서 링크를 꾹 눌렀을 때 0.5초 동안 링크에 파란 박스가 생겼다가 사라집니다. 비슷하게 나무위키를 모방한 {{나무위키 접기2}}와 {{펼치기 접기}}도 마찬가지로 접기 제목에 같은 효과가 적용됩니다.

  • 링크에 마우스를 올리거나 클릭한 상태여도 내부 링크는 #337ab7에서 #23527c로, 없는 문서는 #ba0000에서 #7c2323로, 외부 링크는 #33b733에서 #2ca02c로 바뀌지 않고 처음 보이는 색이 그대로 유지됩니다.

  • 리스트가 나무위키 디자인과 레이아웃으로 바뀝니다. 나무위키 형식의 리스트만 사용하고 싶다면 틀:namulist를 참고할 수 있습니다. 자세한 변경 내용도 위 틀을 참고하세요.

  • 문단과 목차가 나무위키 디자인으로 바뀝니다. 이 문서에서 직접 확인해 보세요.
    [ 문단 변화 상세 ]
    • 번호와 글씨가 볼드체로 변경
    • 제목 아랫줄이 실선의 #ccc 색으로 변경
    • 시각 편집기 버튼이 사라지고, 위치가 오른쪽으로 쏠림

  • 이미지 문법에 border 변수를 추가했을 때 나타나는 이미지의 테두리 색이 #eaecf0에서 테이블 기본 테두리 색인 #e1e8ed로 변경됩니다.

  • 기본 글씨 크기가 15px로 바뀝니다. 기존 제이위키의 글씨 크기는 14.4px이므로, 눈으로 보기에도 조금은 커졌을지도 모르겠습니다. 이외 글꼴과 글씨 색도 다소 변경되었습니다.

  • 사이트 최상단 내비게이션 바의 색상이 제이위키의 상징색에서 나무위키의 상징색(그라데이션)으로 바뀝니다.

  • 문서의 제목 부분과 본문 부분의 경계가 사라집니다.

  • <pre> 태그의 디자인이 (나무위키와 동일하도록) 다소 바뀝니다. 음, 조금 어색한가요?

주의

  • 이 틀을 사용한 문서에는 {{DISPLAYTITLE:보일 제목}}을 사용할 수 없습니다. 이미 틀 안에 보일 제목이 사용되어 있기 때문에 새로 보일 제목을 사용하면 오류가 나 버립니다. 보일 제목을 사용해야겠다면 DISPLAYTITLE 변수로 대신 가능합니다. {{namucat|DISPLAYTITLE=보일 제목|분류1|분류2|…}} 이렇게 사용할 수 있습니다. 하지만 |DISPLAYTITLE=none으로 입력할 경우 틀 바깥에서 {{DISPLAYTITLE:보일 제목}}을 원래처럼 사용할 수 있게 됩니다.
    • 틀 문서, 분류 문서 등 이름 공간이 있는 문서에서 DISPLAYTITLE 변수를 사용한다면 이름 공간이 유지된 채 변수에 넣은 값은 그 뒤에 출력됩니다. 예를 들어 분류:제이위키 문서에서 {{namucat|DISPLAYTITLE=Jwiki|…}}를 사용한다면 보이는 제목은 'Jwiki'가 아니라 '분류:Jwiki'가 됩니다.

  • 이름 공간이 있는 문서에서 문서의 제목이 영어로 시작하는 문서일 경우 첫 글자 알파벳이 반드시 소문자로 입력됩니다. 이는 미디어위키에서 첫 글자 알파벳을 반드시 대문자로 출력하는 현상을 방지하기 위함입니다. 하지만 대문자로 출력해야 하는 글자라면 |pagename=default라는 변수를 추가로 넣어 해제할 수 있습니다.

위상

제작자의 수많은 보급형 틀들 중에도 가장 많은 사용자가 가장 널리 사용하는 틀이며, 근거 없는 추측이지만 사이트 1.41.243 업데이트에서 사이트의 많은 디자인이 나무위키처럼 변화하게 된 데에도 적잖은 영향을 끼쳤을 것으로 보인다. 이에 따라 일부 사용자들은 이 틀의 원리와 코드를 참고하여 자신만의 디자인과 형식대로 새로운 분류(+문서 디자인 변경) 틀을 만들어 내기도 했다. 대표적으로 윤마토군이 만든 틀:namucat-dark2리반이 만든 틀:namucat-liban이 있다. 이외에도 틀:OEU 분류 등도 있다. namucat 틀의 생성 이후 이러한 "분류를 기존과 다른 방식 및 디자인으로 삽입하기 위한" 목적의 틀들이 크고 작은 유행을 만들어 냈다.

또한 이 틀을 시작으로 틀 스타일 CSS에서 새로운 클래스를 만들고 스타일을 적용하는 것이 아닌 사이트에 원래 존재하는 기존 클래스의 스타일을 새로 정의함으로써 레이아웃을 바꾸어 내는 방식도 널리 확산되게 되었다.

둘러보기

+
나무위키 형식 틀 모음
[ 펼치기 · 접기 ]

나무위키 분류 틀
와르샤와 제작 김찬 제작
+
김찬이 제작한 188개의 틀
[ A~Z & etc. ]
[ ㄱ~ㅅ ]
틀:가로 목록 틀:가로세로비 틀:가로줄 틀:가입일 유저박스
틀:가짜 링크 틀:가짜 문단 틀:갤러리 (김찬) 틀:공백
틀:관련 문서 틀 제목 틀:광과민성 주의 틀:군대 유저박스
(상세)
틀:굵게
틀:그라데이션 글씨 틀:글리치 틀:글배경 틀:글씨 테두리
틀:나무링크 틀:나무마크 틀 틀:나무위키 둘러보기 틀:나무위키 접기
틀:나무위키 접기2
(제목 / 내용)
틀:나무위키 테이블 틀:나무위키 텍스트 크기 틀:나무위키 틀 접기
(애니메이션)
틀:나무위키 틀 접기 끝 틀:나무위키식 문서 상태 틀 틀:내비게이션 바 색상 틀:너비맞춤
틀:넘겨주기 틀:넘겨주기 안내 틀:네온 글씨
틀:다크모드 틀:댓글 금지 틀:둥근 이미지 틀:등급 유저박스
틀:루비 문자
틀:막대 그래프 틀:말풍선 틀:말풍선 각주
(버튼 / 내용 / 시작 / )
틀:메타 분류
틀:메타 틀 틀:명도 틀:모바일 테이블
(/tag)
틀:모바일 테이블 끝
(/tag)
틀:목차제거 틀:문단접기 틀:문단접기2 틀:문서 가져옴
틀:문서 보충 틀:미공개 틀:미디어위키 접기 V2 틀:밑줄 없는 링크
틀:반전 틀:반전2 틀:배경색 명도 조절 틀:백분율
틀:별점 틀:복사방지 틀:부계정 유저박스 틀:분류 바로가기
틀:분류앵커 틀:불법2 틀:블러2 틀:블러3
틀:블러4 틀:블링크 틀:비공식 설정 틀:빈 이미지
틀:사건사고 틀:산문적 문서 틀:상징색 틀:색상 수평줄
틀:성적 요소 틀:세계관 무관 틀:세계관 별점 틀:소설
(시작 / / 버튼 / 클립보드)
틀:소속단체 유저박스 틀:수평줄 꾸미기 틀:순차형3 틀:스포일러 강조
틀:실루엣 틀:씹덕주의
[ ㅇ~ㅎ ]
※ 더 이상 사용하지 않거나 사용할 필요가 없는 경우 취소선 처리
※ 일부 극히 단순한 틀은 본 틀 목록에 미포함
KimChan Template
BEST TOP 3
[ 펼치기 · 접기 ]
제작자 개인이 생각하기에 편의성, 기술성, 혁신성 등 여러 면에서 다른 틀에 비해 뛰어난 틀을 선정함.
TOP 2
틀:나무위키 틀 접기
TOP 1
틀:namucat
TOP 3
틀:말풍선 각주
나무위키 둘러보기 틀 디자인을 더 쉽게 만들 수 있게 해 주는 틀. 제이위키 커스텀 접기에 애니메이션이 추가되고 정확한 여백 값을 수정하면서 더욱 완전해지는 중. 나무위키 디자인의 분류 틀. 분류 목록을 문서 최상단에서 볼 수 있으며, 분류를 블러 처리하여 가리는 기능이나 문서 전체의 일부 디자인을 나무위키처럼 바꾸는 기능까지 있음. 각주처럼 생긴 버튼을 누르면 화면에 말풍선이 띄워지는 틀. 각주에 이름을 따로 달거나 같은 내용을 가진 각주를 여러 곳에 써야 할 때 유용함.
[ 그외 ]
이 문서의 내용 중 전체 또는 일부는 틀:namucat/설명문서 문서의 385513판에서 가져왔습니다. 문서 역사 보러가기