|
|
| 1번째 줄: |
1번째 줄: |
| {{namucat|namucat}} | | {{namucat}} |
| {{틀 도움}}
| |
| {|{{style|class=wiki|width=100%|border=#00a495}}
| |
| |-
| |
| !{{style|bg=linear-gradient(to right, #00a495 30%, #13ad65)}}|{{++1|{{cl|/업데이트 노트|white|틀 업데이트 노트}}}}
| |
| |-
| |
| |{{펼접|id=update-note}}
| |
| |-
| |
| |{{/업데이트 노트}}
| |
| {{펼접끝}}
| |
| |}
| |
| {{넘겨주기|틀=.|나무분류}}
| |
| {{다른 뜻2|설명1=리브레 위키 디자인의 분류 틀|제목1=틀:librecat}}
| |
| {{하위 문서2|업데이트 노트|blur|legacy}}
| |
| {{목차}}
| |
| == 틀 본문 == | | == 틀 본문 == |
| <onlyinclude><includeonly>{{navbarcolor|var(--namu--navibar)}}{{#ifeq:{{{type|}}}|dark|<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; background: #000;"></div>|}}{{#css: <!-- | | <onlyinclude><includeonly>{{navbarcolor|var(--namu--navibar)}}{{#ifeq:{{{type|}}}|dark|<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -3; background: #000;"></div>|}}{{#css: <!-- |
| 134번째 줄: |
120번째 줄: |
| background-color: var(--namu--table--td--background); | | background-color: var(--namu--table--td--background); |
| color: var(--namu--text); | | color: var(--namu--text); |
| }<!--
| |
|
| |
| 문단-->h1, h2, h3, h4, h5, h6 {
| |
| border-bottom: 1px solid var(--namu--horizentalline)!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;
| |
| }
| |
| .mw-page-title-namespace {
| |
| box-shadow: inset 0 -0.5rem 0 var(--namu--title--namespace);
| |
| }
| |
| .title h1 {
| |
| border: none!important;
| |
| display: inline-block;
| |
| 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: var(--namu--hyperlink);
| |
| 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: var(--namu--hyperlink--hover);
| |
| }
| |
| .number-link:active {
| |
| color: var(--namu--hyperlink--hover);
| |
| }
| |
| .mw-editsection-bracket {
| |
| margin: 0!important;
| |
| color: var(--namu--hyperlink)!important;
| |
| }
| |
| .mw-editsection-bracket:hover {
| |
| color: var(--namu--hyperlink--hover);
| |
| }
| |
| .mw-editsection-bracket:active {
| |
| color: var(--namu--hyperlink--hover);
| |
| }
| |
| hr {
| |
| border-top-color: var(--namu--horizentalline);
| |
| }
| |
| .tocnumber {
| |
| color: var(--namu--hyperlink);
| |
| padding-right: .3em!important;
| |
| }
| |
| .tocnumber:hover {
| |
| color: var(--namu--hyperlink);
| |
| }
| |
| .tocnumber:active {
| |
| color: var(--namu--hyperlink);
| |
| }
| |
| h2#mw-toc-heading {
| |
| font-weight: normal!important;
| |
| }
| |
| .toctext {
| |
| cursor: text!important;
| |
| }<!-- | | }<!-- |
|
| |
|
| 448번째 줄: |
375번째 줄: |
| -->{{#if:{{{39|}}}|[[분류:{{{39|}}}]]|}}<!-- | | -->{{#if:{{{39|}}}|[[분류:{{{39|}}}]]|}}<!-- |
| -->{{#if:{{{40|}}}|[[분류:{{{40|}}}]]|}}</includeonly></onlyinclude> | | -->{{#if:{{{40|}}}|[[분류:{{{40|}}}]]|}}</includeonly></onlyinclude> |
|
| |
| == 설명 ==
| |
| '''{{++1|[[김찬]]의 기술력의 집대성이자 최대 걸작.}}'''<br>{{--|음, 조금 오글거리나요? 그래도 그만큼 자부한다는 뜻입니다!}}
| |
|
| |
| 나무위키 형태의 분류를 삽입하는 틀입니다. 문서 맨 위에 사용하면 분류 목록이 문서 최상단에 나타납니다. 문서 맨 위가 아닌 곳에 사용하면 그 위치에 분류가 생성되니 '''반드시 맨 위에 사용'''해야 합니다. 분류 위치 외에도 이 틀은 하단에만 1rem(모바일에서는 0.6rem)의 여백을 가지므로 이 틀 위에 다른 내용이 있을 경우 그 내용과 이 틀이 딱 붙어 버리는 현상이 있을 수 있습니다. 이를 방지하기 위해서라도 반드시 문서의 맨 위에 사용해 주십시오.
| |
|
| |
| == 사용법 ==
| |
| <pre>{{namucat|분류1|분류2|분류3|…|분류40}}</pre>
| |
|
| |
| 분류는 총 40개까지 입력할 수 있으며, 입력할 땐 <code>분류:</code>라는 이름공간 없이 해당 분류 페이지의 제목만 입력하면 됩니다. 이 틀은 세로로 사용할 수 없는데, 세로로 사용하면 띄어쓰기가 생기는 탓에 링크가 제대로 적용되지 않고 깨지기 때문입니다.
| |
|
| |
| {|{{style|class=wiki|width=100%|layout=on}}
| |
| |-
| |
| !올바른 사용법||잘못된 사용법||대체 가능
| |
| |-
| |
| |<pre>{{namucat|제이위키|위키위키|위키미디어}}</pre>
| |
| |<pre>{{namucat
| |
| |제이위키
| |
| |위키위키
| |
| |위키미디어
| |
| }}</pre>
| |
| |<pre>{{namucat<!--
| |
| -->|제이위키<!--
| |
| -->|위키위키<!--
| |
| -->|위키미디어<!--
| |
| -->}}</pre>
| |
| |}
| |
|
| |
| <div style="margin: 12px 0; background: var(--namu--cat--background); border: 1px solid var(--namu--quote--otherborder); 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>
| |
|
| |
| 이와 같이 해당 분류 문서가 존재하는 경우 {{가짜 링크|notitle=on|파란색}}, 존재하지 않는 경우 {{가짜 링크|notitle=on|class=nolink|빨간색}}으로 표시됩니다.
| |
|
| |
| 틀만 삽입하고 아무 분류도 넣지 않으면 아래와 같은 미분류 박스가 나타납니다.
| |
|
| |
| <div style="margin: 12px 0; background: var(--namu--cat--background); border: 1px solid var(--namu--notice--border); padding: 10px; background: var(--namu--notice--background); border-radius: 5px; color: var(--namu--notice--color);">이 문서는 분류가 되어 있지 않습니다. [[특수:분류]]에서 적절한 분류를 찾아 문서를 분류해 주세요!</div>
| |
|
| |
| [[숨은 분류]]는 이 틀로 분류하지 말고 기존 분류 문법으로 분류할 것을 권장합니다.
| |
|
| |
| 어떤 틀 내에 분류 문법이 있어 틀을 삽입하면 분류도 함께 삽입될 때, 당연하게도 그 분류는 이 틀에 포함되지 않습니다. 이 경우 직접 그 분류를 추가해 주어야 합니다.
| |
|
| |
| === blur 변수 ===
| |
| <code>blur''숫자''=</code>라는 이름의 변수가 있습니다. 이 변수를 선언하면 숫자에 해당하는 순서의 분류가 [[틀:블러4|블러 처리]]됩니다. 예를 들어 <tt>blur3=on</tt>처럼 입력하면 세 번째에 입력한 분류가 블러 처리됩니다. 나무위키의 분류 블러처럼 마우스를 올려 원래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.
| |
|
| |
| <pre>{{namucat|제이위키|blur1=on|위키위키|위키미디어|blur3=on}}</pre>
| |
|
| |
| <div style="margin: 12px 0; background: var(--namu--cat--background); border: 1px solid var(--namu--quote--otherborder); 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>
| |
|
| |
| 블러된 각 분류에 마우스를 올리면 본래 글자를 볼 수 있습니다. 모바일에서는 일정 시간 꾹 누르면 링크로 이동되지 않고 원래 글자를 볼 수 있습니다.
| |
|
| |
| == 부가 기능 ==
| |
| 단순히 나무위키와 동일한 디자인의 분류라는 기능 외에, 이 틀을 사용한 문서에는 다음과 같은 부가 기능들이 함께 적용됩니다.
| |
|
| |
| 음, {{exhide|ex=off|https://jwiki.kr/rhymix/index.php?mid{{=}}notice&document_srl{{=}}61027|사이트 1.41.243 업데이트}} 이후로 제이위키의 기본 분류 창도 나무위키처럼 바뀌었으니 이제 이 틀의 핵심은 사실상 이 부가 기능들이 되지 않았나 싶기도 합니다.
| |
|
| |
| 그리고 이제는 단순히 '나무위키처럼 편집하고 싶다'를 넘어서 구상한 부가 기능들을 CSS로 구현하는 것이 [[김찬|제작자]] 스스로에 대한 도전이자 목표가 된 것 같기도 합니다(...).
| |
|
| |
| * 모바일에서 링크를 꾹 눌렀을 때 0.5초 동안 링크에 파란 박스가 생겼다가 사라집니다. 비슷하게 나무위키를 모방한 {{틀|나무위키 접기2}}와 {{틀|펼치기 접기}}도 마찬가지로 접기 제목에 같은 효과가 적용됩니다.
| |
|
| |
| * 모든 하이퍼링크의 색이 나무위키와 동일하게 바뀝니다. 아마 제이위키의 다른 문서들과 비교해 보면 링크의 파란색이 다소 진하다는 것을 체감하실 겁니다.
| |
|
| |
| * 리스트가 나무위키 디자인과 레이아웃으로 바뀝니다. 나무위키 형식의 리스트만 사용하고 싶다면 [[틀:namulist]]를 참고할 수 있습니다. 자세한 변경 내용도 위 틀을 참고하세요.
| |
|
| |
| * 문단과 목차가 나무위키 디자인으로 바뀝니다. 이 문서에서 직접 확인해 보세요.{{folding|id=paragraph-changes|title=[ 문단 변화 상세 ]|table=on|
| |
| ** 번호와 글씨가 볼드체로 변경
| |
| ** 제목 아랫줄이 실선의 #ccc 색으로 변경
| |
| ** 시각 편집기 버튼이 사라지고, 위치가 오른쪽으로 쏠림}}
| |
|
| |
| * 이미지 문법에 border 변수를 추가했을 때 나타나는 이미지의 테두리 색이 <span style="border: 1px solid #eaecf0;">#eaecf0</span>에서 테이블 기본 테두리 색인 <span style="border: 1px solid #ddd;">#ddd</span>로 변경됩니다.
| |
|
| |
| * 기본 글씨 크기가 15px로 바뀝니다. 기존 제이위키의 글씨 크기는 14.4px이므로, 눈으로 보기에도 조금은 커졌을지도 모르겠습니다. 이외 글꼴과 글씨 색도 다소 변경되었습니다.
| |
|
| |
| * 사이트 최상단 내비게이션 바의 색상이 제이위키의 상징색에서 나무위키의 상징색(그라데이션)으로 바뀝니다.
| |
|
| |
| * 문서의 제목 부분과 본문 부분의 경계가 사라집니다.
| |
|
| |
| * <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'가 됩니다.
| |
|
| |
| * 이름 공간이 있는 문서에서 문서의 제목이 영어로 시작하는 문서일 경우 첫 글자 알파벳이 반드시 소문자로 입력됩니다. 이는 미디어위키에서 첫 글자 알파벳을 반드시 대문자로 출력하는 현상을 방지하기 위함입니다. 하지만 대문자로 출력해야 하는 글자라면 <code><nowiki>|pagename=default</nowiki></code>라는 변수를 추가로 넣어 해제할 수 있습니다.
| |
|
| |
| * 이 틀을 사용한 문서는 각주 말풍선의 디자인이 나무위키처럼 변하게 되는데, 어떤 이유에서인지 말풍선의 디자인이 바뀌지 않을 때가 있습니다. 그럴 때는 디자인이 바뀔 때까지(...) 페이지를 새로고침하면 됩니다. 심하면 5번이 넘도록 새로고침해야 하는 경우도 있으니 인내심을 가져보세요.
| |
|
| |
| == 위상 ==
| |
| {{인용문1|[전략] … 특히, '''{{exhide|type=jwiki|틀:namucat}}은 역대 제이위키의 모든 틀을 통틀어, 가장 범용성 있고 유용한 틀'''로 인지하고 있습니다. … [후략]|[[사용자:멋진신세계|멋진신세계]]}}
| |
|
| |
| {{인용문1|[전략] … {{exhide|type=jwiki|틀:namucat|나무위키 분류}}의 경우 '''사용자가 굉장히 많아 이러한 지원을 할 예정이지만 다른 틀들은 그렇지 않을 예정입니다.''' … [후략]|[[사용자:모니터링|모니터링]]}}
| |
|
| |
| [[:분류:김찬/제작한 틀|제작자의 수많은 보급형 틀들]] 중에도 '''가장 많은 사용자가 가장 널리 사용하는 틀'''이며, 근거 없는 추측이지만 {{exhide|ex=off|https://jwiki.kr/rhymix/index.php?mid{{=}}notice&document_srl{{=}}61027|사이트 1.41.243 업데이트}}에서 사이트의 많은 디자인이 나무위키처럼 변화하게 된 데에도 적잖은 영향을 끼쳤을 것으로 추측됩니다. 이에 따라 일부 사용자들은 이 틀의 원리와 코드를 참고하여 자신만의 디자인과 형식대로 새로운 분류(+문서 디자인 변경) 틀을 만들어 내기도 했습니다. 대표적으로 [[사용자:윤마토군|윤마토군]]이 만든 [[틀:namucat-dark2]], [[사용자:리반|리반]]이 만든 [[틀:namucat-liban]], [[사용자:멋진신세계|멋진신세계]]가 만든 [[틀:노르웨이 왕국/테마]] 등이 있습니다. 이외에 [[틀:OEU 분류]]와 같은 것도 있습니다. namucat 틀의 생성 이후 이러한 '''"분류를 기존과 다른 방식 및 디자인으로 삽입하기 위한" 목적의 틀들이 크고 작은 유행을 만들어 냈습니다.'''
| |
|
| |
| 또한 이 틀을 시작으로 틀 스타일 CSS에서 새로운 클래스를 만들고 스타일을 적용하는 것이 아닌 '''사이트에 원래 존재하는 기존 클래스의 스타일을 새로 정의함으로써 레이아웃을 바꾸어 내는 방식도 널리 확산'''되게 되었습니다.{{툴팁|다만|이 부분은 다소 우려도 되는 것이, namucat 틀은 사이트의 기본 골자를 크게 해치지 않고 거의 유지한 채 일부 색상이나 디자인만 손보는 정도지만, 이러한 방식이 확산되면서 사이트의 기본 골자마저 '''아예 사용자의 입맛에 맞게 새로운 사이트인 것처럼 변형시키는''' 틀이나 사용자도 등장하기 시작했다는 것입니다. 디자인적으로 다양성을 표방할 수는 있겠지만 과연 그것이 '창작'을 지향하는 국내 최대 규모 창작위키인 [[제이위키|이곳]]에서 어느 정도까지 받아들여질지는 앞으로 주의깊게 두고봐야 할 부분입니다.}}
| |
|
| |
| 틀이 생성된 지 약 1년 9개월 정도가 지난 2024년 6월경{{툴팁|dark|이 시기 [[김찬|틀 제작자]]인 저는 다크모드 대응을 위해 온갖 노력 중이었습니다.}}에는 운영자님으로부터 틀의 다크모드 지원을 위해 틀에 쓰이는 색상들을 var(--변수) 구문으로 받고 서버의 css 및 php 파일을 직접 열어 적용해 주겠다는 제안까지 받았습니다.{{툴팁|?|말이 좀 어렵지만, 쉽게 말하자면 틀에서 변경한 링크 색상이나 글씨 색상 등을 다크모드에 대응하여 함께 변화하도록 할 수 있다는 뜻입니다.}} 적어도 제가 아는 한에선 운영자님께 직접 서버 간섭의 도움까지 받은 틀은 위키 '''최초'''이며, 운영자님 본인도 틀의 사용자가 많아 지원해 주는 것이고 다른 틀들은 이러한 지원이 없을 예정이라고 합니다.
| |
|
| |
| == 둘러보기 ==
| |
| {{나무위키 형식 틀 모음}}
| |
| {{나무위키 분류 틀}}
| |
| {{김찬 제작 틀}}
| |
| {{김찬 제작 틀/TOP3}}
| |
| {{문서 가져옴|틀:namucat/설명문서|385513}}
| |