제이위키의 규정 |
기본방침 (문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침 · 운영 관리 방침) · 편집지침 · 커뮤니티 가이드라인 · 동음이의 리다이렉트 요청 |
제이위키의 도움말 |
FAQ · 도움말 (사이트 소개 · 저작권 · 운영진 · 단축키 · 편집 · 문법 (표 · HTML · CSS) · 틀 · 분류 · 등급 (등급 목록) · 동음이의) · 유저가이드 (기초문법 · 고급문법 · 정치 창작 팁 · 전쟁 창작 팁 · 판타지 창작 팁 · 언어 창작 팁 · 종교 창작 팁) · 권리침해 · 다른 위키와의 차이점 |
제이위키의 운영 |
운영진 (관리자 · 중재자) · 관리자 선거 (2018 · 2019 · 2021) · 투명성 보고서 · 재정 보고서 |
제이위키의 인정단체 |
인정단체 · 에른스트의 아무튼 공방 (아무거나 월간공방) · 그리다 · 감성위키 · 와르샤와웍스 · 연필이 닿는 곳 · 철통팀 · 오펜시브 프로젝트 팀 |
제이위키의 앙케이트 |
이 창작이 대단하다! (2021 세계관 · 2021 창작자 · 2020 세계관 · 2020 창작자 · 2020 편의성) · 연말시리즈 (2022 · 2023) |
아래는 위키를 작성하거나 편집할 때 사용되는 명령어들입니다. 이 중에 굵게, 기울임꼴, 링크 등 자주 사용하는 문법은 편집기 왼쪽 위에 보이는 아이콘으로도 해결할 수 있습니다.
텍스트
텍스트 형태
문법 | 결과 | 비고 |
---|---|---|
'''굵게''' | 굵게 | font-family 속성이나 {{폰트}}로 글꼴을 바꾸었을 때 기존 따옴표 문법을 사용하면 기본 글꼴로 돌아옵니다. 하지만 {{bold}}를 사용하면 글꼴이 유지되면서 굵게 써집니다. |
{{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> |
링크
기능 | 문법 | 결과 | 비고 |
---|---|---|---|
기본 | [[제이위키]] | 제이위키 | |
보일 글자를 다르게 | [[제이위키|보일 글자]] | 보일 글자 | 표를 만들 때 쓰이는 파이프 문자(| )를 사용합니다.
|
링크에 텍스트 문법 적용 | [[제이위키|{{color|jwiki|제이위키}}]] | 제이위키 | 예시로는 색상만 적용했지만 [[제이위키|{{글씨 크기|14|제이위키}}]] 등 글씨 크기도, 그외 대부분의 텍스트 문법도 모두 적용 가능합니다.
|
이미지에 링크 걸기 | [[파일:제이위키 로고.png|20px|link=제이위키]] | 이미지를 넣는 문법에 매개변수 link=로 링크를 걸 수 있습니다. 일반 문자열만 입력하면 내부 링크로 연결되며, http를 포함한 URL 전부를 입력하면 외부 링크로 연결됩니다.
| |
이미지와 텍스트를 한 링크에 | <span class="plainlinks">[https://jwiki.kr/wiki/index.php/제이위키 [[파일:제이위키 로고.png|20px|link=]] 제이위키]</span> | 제이위키 | 내부 링크를 넣는 대괄호 두 쌍이 아닌 외부 링크를 넣는 대괄호 한 쌍에 이미지와 텍스트를 함께 넣고 외부 링크임을 숨기고 내부 링크처럼 보이게 만들어 주는 plainlinks 클래스를 사용하면 가능합니다. 이때 반드시 이미지에는 |link=를 넣어 원본 이미지로 이동하는 링크를 없애야 합니다. {{외부링크숨김}}을 사용하면 더 간편하게 사용할 수 있습니다.
|
외부 링크 | [http://www.example.com] | [1] | |
[http://www.example.com 보일 글자] | 보일 글자 | ||
http://www.example.com | http://www.example.com | ||
넘겨주기 | #넘겨주기 [[넘겨줄 문서]] | (이 문서를 열면 넘겨줄 문서로 이동.) | 반드시 문서의 맨 위에 작성되어야 합니다. 그렇지 않으면 넘겨주기가 작동하지 않습니다.
|
제이위키 내의 문서 링크
- [[문서 제목]]처럼 제목의 양 옆에 [[ ]]를 붙입니다.
- [[사와시로 미유키]] → 사와시로 미유키
- [[문서 제목|표시될 문장]]를 사용하면 링크 이름을 색다르게 넣을 수 있습니다.
( | (파이프)는 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단계 제목 | ===== 제목 ===== |
인용문
일반적으로 미디어위키에서 인용문은 <blockauote> 태그를 사용합니다.
문법 | 결과 |
---|---|
<blockquote>안녕하세요</blockquote> |
|
그러나 제이위키에서는 제대로 나오지 않기 때문에, 대신 사용자들이 제작한 인용문 틀을 사용할 것을 권장합니다. 대표적으로는 {{인용문1}}이 있습니다.[4]
문법 | 결과 |
---|---|
{{인용문1|안녕하세요}} |
안녕하세요 |
인용문 심화
※ 다음 문법은 {{인용문1}}을 기준으로 합니다.
인용문은 기본적으로 왼쪽 정렬이며 align이라는 매개변수를 통해 가운데 또는 오른쪽으로 정렬할 수 있습니다.
문법 | 결과 |
---|---|
{{인용문1|왼쪽 정렬<br>(기본값)}} {{인용문1|align=center|가운데 정렬<br>글씨는<br>왼쪽}} {{인용문1|align=right|오른쪽 정렬<br>글씨는<br>왼쪽}} |
왼쪽 정렬 (기본값) 가운데 정렬 글씨는 왼쪽 오른쪽 정렬 글씨는 왼쪽 |
또한 color 변수를 통해 인용문의 왼쪽 테두리의 색을 바꿀 수도 있습니다. 기본값은 나무위키 인용문과 같은 #71bc6d입니다.
문법 | 결과 |
---|---|
{{인용문1|기본 색상}} {{인용문1|color=black|검은색}} {{인용문1|color=blue|파란섹}} {{인용문1|color=red|빨간색}} |
기본 색상 검은색 파란섹 빨간색 |
목록 만들기
기능 | 입력할 명령어 | 출력되는 결과 | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
목록 |
* 목록 |
| |||||||||||||||
숫자가 매겨진 목록 |
# 목록 |
| |||||||||||||||
항목과 정의 |
; 항목 |
| |||||||||||||||
[ 목록에 대한 구체적인 설명 펼치기 · 접기 ]
|
주석
주석은 문장에 부가설명을 달아주는 도구로서 부가적인 해설이나, 진위가 의심될 수 있는 문장의 출처 등을 표기할 때 유용합니다.
주석 기본 사용법
주석을 문서에 삽입하려면, 다음 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)가 있습니다.[2] 따라서 나무위키 디자인의 틀을 만들 때처럼 표 안에 접기로 새로운 표를 넣으면 넓은 여백이 생기는데, 이를 문법으로 제거하여 하나의 표인 것처럼 딱 맞게 만들 수 있습니다.
문법에 들어가기 전에, 표 내에 접기로 새로운 표를 넣을 때 가장 기본적인 형태를 보시겠습니다.
입력 | 출력 | |||
---|---|---|---|---|
[ 문법 펼치기 · 접기 ] {|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[3]에 테두리 두께인 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[4]에 테두리 두께인 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 버전 기준으로 작성되었습니다.
그 밖의 문법
편집 메모를 남겨야 할 때는, <!-- -->를 사용해 읽을 때는 보이지 않고, 편집할 때만 보이는 메모를 남길 수 있습니다.
<!-- 여기까지 번역 완료 -->본문