편집 요약 없음 |
편집 요약 없음 |
||
| 37번째 줄: | 37번째 줄: | ||
|<tt><nowiki><s>취소선</s></nowiki></tt> | |<tt><nowiki><s>취소선</s></nowiki></tt> | ||
|rowspan="2"|<s>취소선</s> | |rowspan="2"|<s>취소선</s> | ||
|rowspan="2" {{style| | |rowspan="2" {{style|align=left}}|마우스를 올리거나 터치하면 취소선이 잠시 사라져 읽기 편해집니다. | ||
|- | |- | ||
|<tt><nowiki>{{--|취소선}}</nowiki></tt> | |<tt><nowiki>{{--|취소선}}</nowiki></tt> | ||
2023년 3월 22일 (수) 13:32 판
이 문서는 제이위키 초보자를 위한 문서로, 훌륭한 기여자 분들의 기여를 언제나 기다립니다.
아래는 위키를 작성하거나 편집할 때 사용되는 명령어들입니다. 이 중에 굵게, 기울임꼴, 링크 등 자주 사용하는 문법은 편집기 왼쪽 위에 보이는 아이콘으로도 해결할 수 있습니다.
텍스트
텍스트 형태
| 기능 | 문법 | 결과 | 비고 |
|---|---|---|---|
| 굵게 | '''굵게''' | 굵게 | |
| {{bold|굵게}} | font-family 속성이나 {{폰트}}로 글꼴을 바꾸었을 때 기존 따옴표 문법을 사용하면 기본 글꼴로 돌아옵니다. 하지만 {{bold}}를 사용하면 글꼴이 유지되면서 굵게 써집니다. | ||
| 기울임꼴 | ''기울임꼴'' | 기울임꼴 | |
| 굵게 기울임꼴 | '''''굵게 기울임꼴''''' | 굵게 기울임꼴 | |
| 밑줄 | <u>밑줄</u> | 밑줄 | |
| {{u|밑줄}} | |||
| 취소선 | <s>취소선</s> | 마우스를 올리거나 터치하면 취소선이 잠시 사라져 읽기 편해집니다. | |
| {{--|취소선}} | |||
| 취소선 | <del>취소선</del> | 이 취소선은 마우스를 올리거나 터치해도 취소선이 사라지지 않습니다. | |
| 강제 줄바꿈 | 1번째 줄<br>2번째 줄 | 1번째 줄 2번째 줄 |
|
| 위첨자 | 기준<sup>첨자</sup> | 기준첨자 | |
| 기준{{^^|첨자}} | |||
| 아래첨자 | 기준<sub>첨자</sub> | 기준첨자 | |
| 기준{{,,|첨자}} | |||
| 위키문법 끄기 | <nowiki>'''위키문법 끄기'''</nowiki> | '''위키문법 끄기''' |
텍스트 크기
자체 지원 태그
제이위키에 존재하는 자체적인 태그들을 통해 텍스트 크기를 변경할 수 있습니다.
| 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
|---|---|---|
| <small>작게</small> | 작게 | 텍스트를 <small>와 </small> 안에 입력한 상태입니다. |
| <big>크게</big> | 크게 | 텍스트를 <big>와 </big> 안에 입력한 상태입니다. |
| {{small|작게}} | 작게 | 텍스트를 틀:small 안에 입력한 상태입니다. (기본크기의 85%)[1] |
| {{larger|크게}} | 크게 | 텍스트를 틀:larger 안에 입력한 상태입니다. (기본크기의 110%) |
| {{big|더 크게}} | 더 크게 | 텍스트를 틀:big 안에 입력한 상태입니다. (기본크기의 120%) |
| {{huge|거대하게}} | 거대하게 | 텍스트를 틀:huge 안에 입력한 상태입니다. (기본크기의 180%) |
{{글씨 크기}} 이용
{{글씨 크기}}를 이용해 HTML의 pt 단위로 크기를 직접 정할 수 있습니다.
{{글씨 크기|크기(숫자)|내용}}
"글씨 크기"라는 틀 이름이 길다면 넘겨주기인 fontsize나 fs로도 사용할 수 있습니다.
| 입력한 내용 | 화면에 표시되는 내용 |
|---|---|
| {{글씨 크기|8|8pt로 작성된 내용}} | 8pt로 작성된 내용 |
| {{글씨 크기|10|10pt로 작성된 내용}} | 10pt로 작성된 내용 |
| 기본 크기로 작성된 내용 | 기본 크기로 작성된 내용[2] |
| {{글씨 크기|12|12pt로 작성된 내용}} | 12pt로 작성된 내용 |
| {{글씨 크기|14|14pt로 작성된 내용}} | 14pt로 작성된 내용 |
| {{글씨 크기|18|18pt로 작성된 내용}} | 18pt로 작성된 내용 |
| {{글씨 크기|24|24pt로 작성된 내용}} | 24pt로 작성된 내용 |
| {{글씨 크기|36|36pt로 작성된 내용}} | 36pt로 작성된 내용 |
{{나무위키 텍스트 크기}} 이용
{{나무위키 텍스트 크기}}를 이용하여 나무마크[3]처럼 크기를 조절할 수 있습니다.
틀 이름이 길기 때문에 넘겨주기인 {{fse}}로 사용할 것을 권장합니다.
{{fse|단계|내용}}
 |
1em | 기본 | 1em |
| +1단계 | 1.289em | -1단계 | 0.926em |
| +2단계 | 1.389em | -2단계 | 0.833em |
| +3단계 | 1.481em | -3단계 | 0.742em |
| +4단계 | 1.574em | -4단계 | 0.648em |
| +5단계 | 1.667em | -5단계 | 0.622em |
텍스트 색상
| 입력한 내용 | 화면에 표시되는 내용 | 텍스트 설명 |
|---|---|---|
| {{color|#ff0000|텍스트}} | 텍스트 | 헥스 코드와 CSS 색상명 모두 대소문자 구별없이 입력 가능합니다.예시와 같이 일부 색상의 경우 세 자리만 입력하는 축약형 헥스코드를 사용할 수도 있습니다. |
| {{color|#f00|텍스트}} | ||
| {{color|red|텍스트}} | ||
| {{color|rgba(255, 0, 0)|텍스트}} | ||
| <span style="color: red;">텍스트</span> | ||
| <span style="color: red;"><u>밑줄 포함</u></span> | 밑줄 포함 | 색상과 밑줄의 순서에 따라 밑줄에 색상 지정 여부가 다릅니다. |
| <u><span style="color: red;">밑줄 제외</span></u> | 밑줄 제외 | |
| <span style="color: blue;"><big>큰글자파랑</big></span> | 큰글자파랑 | 밑줄과 달리 크기 서식을 색상과 결합할 경우 문법의 순서가 출력에 영향을 미치지 않습니다. |
| <big><span style="color: blue;">큰글자파랑</span></big> |
링크
제이위키 내의 문서 링크
- [[문서 제목]]처럼 제목의 양 옆에 [[ ]]를 붙입니다.
- [[사와시로 미유키]] → 사와시로 미유키
- [[문서 제목|표시될 문장]]를 사용하면 링크 이름을 색다르게 넣을 수 있습니다.
( | (파이프)는 Shift + 역슬래시(￦)를 눌러서 입력)- [[사와시로 미유키|미유키치]] → 미유키치
- [[문서 제목#단락]]을 사용하면 문서의 특정 부분에 링크를 걸 수 있습니다.
- [[사와시로 미유키#TV 애니메이션]] → 사와시로 미유키#TV 애니메이션
- [[사와시로 미유키#TV 애니메이션|사와시로의 TVA 출연기록]] →사와시로의 TVA 출연기록
- [[#단락]]은 같은 문서내의 특정 단락으로 이동하는 링크입니다.
- [[#다른 사이트의 링크]] → #다른 사이트의 링크 (직접 눌러보세요)
- 링크를 넣으면 그 부분은 색깔이 다음과 같이 바뀝니다.
- 파란 글씨 : 문서가 존재할 경우
- 빨간 글씨 : 문서가 존재하지 않을 경우 (클릭하면 이 문서를 만들 수 있습니다.)
다른 사이트의 링크
제이위키, 저스트보드 외의 새로운 링크를 넣은 문서를 편집한 후 저장을 누르면 자동스팸 방지를 위한 간단한 CAPTCHA를 풀어야 합니다. 번거로울 수 있으나 깨끗한 위키를 위해 반드시 완료해 줍시다. 한번 CAPTCHA를 푼 링크는 다음에 다시 저장을 할 땐 CAPTCHA가 뜨지 않습니다.
- 웹 페이지 주소를 넣으면 자동으로 링크로서 인식됩니다.
- http://www.google.co.kr/ → http://www.google.co.kr/
- [ ]를 씌워주면 무명의 링크가 생깁니다.
- [http://www.google.co.kr/] → [2]
- 링크의 설명을 넣으려면 주소 뒤에 한 칸을 띄고 설명을 적습니다.
- [http://www.google.co.kr/ 구글 코리아] → 구글 코리아
- 이 자동 링크를 방지하려면 <nowiki></nowiki> 태그를 씌우면 됩니다.
- <nowiki>http://www.google.co.kr/</nowiki> → http://www.google.co.kr/
넘겨주기 문서
모든 문서는 정식 명칭으로 등록되지만, 공식 약어나 이명, 명의 등의 경우에는 문서의 바로가기를 만들어 줄 수 있습니다. 예를 들어, 제이위키의 약칭인 '제윜'을 문서에 연결해 주고 싶다면
반드시 문서 맨 위에 작성되어야 합니다.
큰제목, 작은제목
| 기능 | 입력할 명령어 | 출력되는 결과 |
|---|---|---|
| 1단계 제목 | == 제목 == | 제목 |
| 2단계 제목 | === 제목 === | 제목 |
| 3단계 제목 | ==== 제목 ==== | 제목 |
| 4단계 제목 | ===== 제목 ===== | 제목 |
목록 만들기
| 기능 | 입력할 명령어 | 출력되는 결과 | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 목록 |
* 목록 |
| |||||||||||||||
| 숫자가 매겨진 목록 |
# 목록 |
| |||||||||||||||
| 항목과 정의 |
; 항목 |
| |||||||||||||||
[ 목록에 대한 구체적인 설명 펼치기 · 접기 ]
| |||||||||||||||||
주석
주석은 문장에 부가설명을 달아주는 도구로서 부가적인 해설이나, 진위가 의심될 수 있는 문장의 출처 등을 표기할 때 유용합니다.
주석 기본 사용법
주석을 문서에 삽입하려면, 다음 2개의 태그를 사용해야 합니다.
<ref>: 감싸고 있는 문장을 주석화합니다. <ref>주석에 들어갈 문장</ref> 처럼 사용하면 됩니다.<references />: 주석화된 문장들을 묶어서 불러오는 역할을 합니다. == 주석 == 단락에 적어넣으면 됩니다.
이 두 가지 태그는 동시에 쓰이기 때문에, <ref> 태그를 사용한 뒤 <references /> 태그를 써서 마무리하지 않으면 주석이 표시되지 않거나 오류가 발생할 수 있습니다.
1화 영상이 유출되었다.<ref>2010년 8월 1일자 ○○신문 중에서.</ref> == 주석 == <references />
공동 주석 사용법
같은 주석을 여러 문장에 반복해서 사용해야 할 때는, 공동 주석을 붙일 수 있습니다.
<ref name="이름">: 나중에 재활용 가능하도록 주석에 이름을 달아줍니다. 첫 번째 사용할 장소에 붙입니다.<ref name="이름" />: 이름을 달았던 주석을 재활용합니다. 다른 장소에 붙입니다.
실제 경험을 바탕으로 제작됐으며<ref name="실존 모델">감독의 인터뷰, 2009년 8월 8일</ref> 주인공은 실존했던 그의 소꿉친구를 모델로 했다고 밝혔다.<ref name="실존 모델" /> == 주석 == <references />
테이블(표)
자세한 내용은 도움말:표 문서를 참고하십시오.
펼치기·접기
기본적인 펼치기·접기
펼치기·접기는 펼치고 접을 내용을 div 태그로 감싸고, 태그에 mw-collapsible 클래스를 추가하면 된다.
| 원본 코드 | 미리보기 |
|---|---|
신나는 [[제이위키]] 편집 <div class="mw-collapsible"> 이것은 [[스치]]가 작성한 예시 문장 </div> 다시 신나는 [[제이위키]] 편집 |
신나는 제이위키 편집
이것은 스치가 작성한 예시 문장 다시 신나는 제이위키 편집 |
문단을 기본적으로 접어두기 위해서는 mw-collapsed 클래스를 사용할 수 있다.
| 원본 코드 | 미리보기 |
|---|---|
신나는 [[제이위키]] 편집 <div class="mw-collapsible mw-collapsed"> 이것은 [[스치]]가 작성한 예시 문장 </div> 다시 신나는 [[제이위키]] 편집 |
신나는 제이위키 편집
이것은 스치가 작성한 예시 문장 다시 신나는 제이위키 편집 |
표에 펼치기·접기를 적용하기 위해서는 표 선언 부분에 나타나는 class="wikitable"에 새로운 클래스 mw-collapsible를 추가한다.
| 원본 코드 | 미리보기 | ||||
|---|---|---|---|---|---|
{| class="wikitable mw-collapsible"
| 스치
| 바보
|-
| 아니다
| ㅡㅡ
|}
|
|
커스텀 펼치기·접기
문법이 어렵다면 틀:나무위키 접기를 참고해 보세요.
커스텀 펼치기·접기를 활용하면 [여기]를 클릭해도, [여기]를 클릭해도 동작하는 펼치기·접기를 만들 수 있다.
이 부분이 생겼다 없어졌다 하지요
커스텀 펼치기·접기 문법에서 스위치(토글)로 작동하는 부분은 mw-customtoggle-<이름> 클래스를 가지게 된다. 여기서 <이름>은 본인이 직접 정하는 것이다. 따라서 실제로 적용되는 클래스는 mw-customtoggle-sch-1, mw-customtoggle-20220422-1과 같은 식이 된다.
또한, 내용(콜랩시블)으로 작동하는 부분은 mw-customcollapsible-<이름>라는 아이디를 가지게 된다. 또한, mw-collapsible 클래스도 가지고 있어야 한다. 여기서 <이름>에 해당하는 부분은 토글에서 설정한 이름과 같은 것을 사용한다.
아이디는 문서 내에 단 하나의 태그에만 적용할 수 있기 때문에, 다른 사람의 서술과 겹치지 않게 이름을 설정하는 것이 중요하다. 틀이나 표에서 다른 사람이 사용한 펼치기·접기 이름과 겹치지 않게 하기 위해서 스치는 수정한 날짜를 이름에 담는다. 위에 있는 펼치기·접기 예제에서는 20220422_help_wiki_syntax-1라는 이름을 사용했다.
| 원본 코드 | 미리보기 |
|---|---|
<span class="mw-customtoggle-20220422_help_wiki_syntax-2">[이 부분]</span>을 클릭해서 작동해용. <div class="mw-collapsible" id="mw-customcollapsible-20220422_help_wiki_syntax-2"> [이 부분이 숨겨질 것이오] </div> |
[이 부분]을 클릭해서 작동해용.
[이 부분이 숨겨질 것이오] |
이것을 활용하면 다음과 같은 서술을 할 수 있다.
| 무슨무슨 정보 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
[역사] · [문화] · [지리]
| ||||||||||||
애니메이션이 추가된 버전
문법이 어렵다면 틀:나무위키 접기2를 참고해 보세요.
사이트 1.36.4.232 업데이트로 펼치고 접을 때 애니메이션이 시각 효과로 추가된 커스텀 접기를 사용할 수 있습니다.
접기의 제목, 즉 스위치가 되는 부분은 toggle이름이라는 아이디, toggleBtn이라는 클래스, 그리고 추가적으로 data-target="collapsible이름"이라는 데이터 태그를 가집니다.
또한 접기로 접혀진 콘텐츠는 collapsible이름이라는 아이디를 가집니다.
마찬가지로 이름 부분에는 서로 다른 문자열이 지정되어야 합니다. 여기에 들어갈 수 있는 문자는 영어, 하이픈(-), 숫자입니다. 한글을 입력하면 작동하지 않으니 주의하세요.
애니메이션이 없는 커스텀 접기는 같은 이름을 가진 스위치와 콘텐츠가 몇 개가 있어도 어떤 스위치를 누르든 모든 콘텐츠가 한번에 펼쳐지고 접힙니다. 하지만 애니메이션이 있는 커스텀 접기는 같은 이름을 가진 콘텐츠가 둘 이상 있다면 문서에서 가장 먼저 사용된 콘텐츠만 펼쳐지고 접힙니다. 그 아래에 있는 것들은 아예 작동하지 않으니 주의하세요. 제목은 같은 이름을 가진 것이 여러 개 있어도 괜찮습니다.
다른 접기들과 다르게 기본적으로 접힌 상태로만 사용할 수 있습니다. 또한 스위치의 텍스트는 반드시 가운데 정렬이며, 굵은 꼴로 고정됩니다.[1]
| 입력 | 출력 |
|---|---|
아래 문법에서는 something이라는 임의의 이름을 입력하였습니다.<div id="togglesomething" class="toggleBtn" data-target="collapsiblesomething" style="text-align: left;">굵은 글씨를 눌러 보세요</div> <div id="collapsiblesomething">이렇게 애니메이션과 함께 펼쳐지며 보이게 됩니다</div> |
굵은 글씨를 눌러 보세요
이렇게 애니메이션과 함께 펼쳐지며 보이게 됩니다
|
표에서 응용하기
아래 문법이 어렵다면 틀:펼접을 사용하십시오. 사실 이 편을 더 권장합니다.
이 문단에서는 바로 위 애니메이션이 추가된 커스텀 접기를 기준으로 하나, 어떤 접기에서도 원리와 문법은 동일합니다.
제이위키에서는 wikitable 표가 자체적으로 가지고 있는 상하 margin 여백(2.4rem=12px), 각 칸의 내부에 padding 여백(상하 0.3rem=4.5px, 좌우 0.6rem=9px), 각 칸이 가지고 있는 border-width 테두리 두께(px)가 있습니다. 따라서 나무위키 디자인의 틀을 만들 때처럼 표 안에 접기로 새로운 표를 넣으면 넓은 여백이 생기는데, 이를 문법으로 제거하여 하나의 표인 것처럼 딱 맞게 만들 수 있습니다.
문법에 들어가기 전에, 표 내에 접기로 새로운 표를 넣을 때 가장 기본적인 형태를 보시겠습니다.
| 입력 | 출력 | |||
|---|---|---|---|---|
[ 문법 펼치기 · 접기 ] {|class="wikitable" style="background: #f5f5f5;"
|-
!틀 제목
|-
|<div id="toggletable-in-folding" class="toggleBtn" data-target="collapsibletable-in-folding">[ 펼치기 · 접기 ]</div>
<div id="collapsibletable-in-folding">
{|class="wikitable" style="width: 100%;"
|-
|style="text-align: center;"|틀 내용
|}</div>
|} |
|
접기 스위치의 좌우 여백 조절하기
접기 스위치 div의 style에 margin: 0px -{{#expr:9+2/3}}px;를 넣어 좌우 여백이 비지 않도록 지워 줍니다.
- {{#expr:9+2/3}}: 표 내부 좌우 여백인 9px[2]에 테두리 두께인 0.666…을 더한 값입니다. 일반적으로는 무한 소수를 표현할 수 없기 때문에 간단한 수식을 할 수 있는 파서 함수 expr을 이용해 9와 3분의 2를 더해 준 것입니다.
[ 펼치기 · 접기 ]
|
그러나 이렇게만 하면 접기 스위치의 양옆이 꽉 차버려서 보기 안 좋으므로, 다시 padding으로 지운 값만큼을 더해 줍니다. padding: 0px {{#expr:9+2/3}}px;을 추가로 작성해 주면 됩니다. 이 방법은 접기 제목이 가운데가 아닌 왼쪽이나 오른쪽으로 정렬되어도 보기 좋게 만들어 줍니다.
[ 펼치기 · 접기 ]
|
내부 표의 상하좌우 여백 조절하기
이제 접기의 내용이 되는 div의 style에 margin: 0px -{{#expr:9+2/3}}px -{{#expr:4.5+2/3}}px;를 넣어 좌우 여백과 하단 여백을 제거합니다.
- {{#expr:9+2/3}}px: 위와 마찬가지로 표 내부 좌우 여백인 9px에 테두리 두께인 0.666…을 더한 값입니다.
- {{#expr:4.5+2/3}}px: 이번에는 표 내부 하단 여백인 4.5px[3]에 테두리 두께인 0.666…을 더한 값입니다.
[ 펼치기 · 접기 ]
|
그러나 이렇게 해도 아직 표 자체의 상하 여백 탓에 위아래는 해결되지 않았습니다.
내부 표의 자체 상하 여백 조절하기
이제 접기의 내용이 되는 div가 아니라 내부 표의 style에 margin-top: 0.3rem; margin-bottom: -0.3rem;를 넣어 줍니다. 상하 여백을 직접 지정해 주면 기본 상하 여백인 12px에 더해지는 방식이 아닌, 기본값 12px는 사라지고 지정해 준 값만이 새로운 값으로 정해지는 방식입니다.
- margin-top: 0.3rem;: 접기 스위치와 내부 표 사이의 공간을 기존 칸 내부 상하 여백인 0.3rem으로 맞춥니다. 이렇게 하면 접기 칸의 하단 테두리와 내부 표의 상단 테두리가 하나인 것처럼 겹쳐집니다.
- margin-bottom: -0.3rem;: 위의 접기 내용 div에서 하단 여백을 제거해 주었지만 아직 하단 여백이 조금 남아 있습니다. 이는 접기가 들어간 칸 자체의 내부 여백이 남은 것으로, 0.3rem을 제거해 주면 딱 맞습니다. div에서 테두리 두께를 제거해 주었으니 여기서는 테두리를 신경쓰지 않아도 됩니다.
[ 펼치기 · 접기 ]
|
| 최종 문법입니다. |
[ 펼치기 · 접기 ] {|class="wikitable"
|- |<div id="toggletable-in-folding-example-4" class="toggleBtn" data-target="collapsibletable-in-folding-example-4" style="margin: 0px -{{#expr:9+2/3}}px; padding: 0px {{#expr:9+2/3}}px;">[ 펼치기 · 접기 ]</div> <div id="collapsibletable-in-folding-example-4" style="margin: 0px -{{#expr:9+2/3}}px -{{#expr:4.5+2/3}}px;"> {|class="wikitable" style="margin-top: 0.3rem; margin-bottom: -0.3rem;" |- |style="text-align: center;"|내용내용내용내용내용내용내용내용 |- |style="text-align: center;"|내용내용내용내용내용내용내용내용 |}</div> |} |
| 틀:펼접을 사용하여 더 간단히 사용할 수 있습니다. |
[ 펼치기 · 접기 ] {|class="wikitable"
|- |{{펼접|id=in-folding-example-4}} |- |style="text-align: center;"|내용내용내용내용내용내용내용내용 |- |style="text-align: center;"|내용내용내용내용내용내용내용내용 {{펼접끝}} |} |
단, 환경에 따라 테두리가 아주 미세하게 제대로 겹쳐지지 않을 수 있습니다. 특히 모바일에서 그러합니다. 이 문법은 Windows 11, Microsoft Edge 111.0.1661.44 버전 기준으로 작성되었습니다.
그 밖의 문법
편집 메모를 남겨야 할 때는, <!-- -->를 사용해 읽을 때는 보이지 않고, 편집할 때만 보이는 메모를 남길 수 있습니다.
<!-- 여기까지 번역 완료 -->본문