도움말:위키 문법: 두 판 사이의 차이

2025년 12월 27일 (토) 09:48 기준 최신판

도움말

[ 펼치기 · 접기 ]

위키 문법
1장 「기초」	2장 「표」	3장 「HTML」
4장 「스타일링」	5장 「응용」
개별 기능
보일 제목	틀 제작	파일 삽입

😣 내용이 너무 긴가요? 요약판이 있습니다.

개념

HTML 태그

HTML에 대한 심층적인 내용은 3장 「HTML」에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.

HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <〇〇>으로 열고, </〇〇>으로 닫습니다.

대표적인 태그로는 span가 있는데, 이는 글자 자체를 선택하며, div는 안의 내용을 둘러싸는 상자를 만듭니다.

HTML 태그에는 속성^attribute을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <〇〇 abc="123">과 같이 넣을 수 있고, 여러 개 넣을 때는 <〇〇 abc="123" def="456">처럼 쓰면 됩니다.

스타일링 기초 1

스타일링에 대한 심층적인 내용은 4장 「스타일링」에서 다룹니다.

스타일을 적용할 때 HTML 태그 중 여는 태그에 틀:스타일을 {{스타일|스타일 구문}}과 같이 사용합니다. 스타일 구문을 쓸 때는 속성-값 형태로 쓰며, 띄어쓰기로 구분합니다.

종합적으로 파란 배경 빨간 글자처럼 쓸 수 있습니다.

자세한 내용은 4장에서 소개할 것이니, 알고 있으면 좋은 서식 3개를 소개합니다.

서식	설명	예시	출력^[1]
`c`	글자 색상	`{{스타일\|c-red}}`	예시
`bg`	배경 색상	`{{스타일\|bg-#a0f0f0}}`	예시
`fs`	글자 크기	`{{스타일\|fs-18px}}`	예시

글자 서식

글꼴

현재 위키에서는 네 가지 글꼴을 제공하고 있습니다. 굵게와 기울이기는 각각 따옴표 3개와 2개로 입력할 수 있고, 밑줄과 취소선은 태그나 틀을 이용합니다.

입력	출력
`'''굵게'''`	굵게
`<b>굵게</b>`	굵게
`''기울이기''`	기울이기
`<i>기울이기</i>`	기울이기
`<u>밑줄</u>`	밑줄
`{{--\|취소선}}`	~~취소선~~
`<s>취소선</s>`	~~취소선~~

색상

글자의 색을 바꾸기 위해서는 span 태그에 style 속성을 부여하고 그 안에 CSS로 color을 지정하면 됩니다. 예를 들어, 빨간 글자와 같이 쓰면 됩니다.

그러나, 너무 코드가 길고 사용하기 어렵기 때문에 보통은 틀을 사용하여 간략하게 사용합니다. RGB 6자리 색상 코드나 CSS 색상 등을 사용할 수 있습니다.

입력	출력
`{{색\|red\|빨강}}`	빨강
`{{색\|#2a6db0\|파랑}}`	파랑

글씨 색상을 지정하면 다크 모드에서는 안 보이는 경우가 있습니다. 이때 ##색상처럼 # 대신 ##를 사용하면 됩니다. 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.

입력	다크모드 출력
`{{색\|#000000\|검정}}` `{{색\|#0000ff\|파랑}}`	검정 파랑
`{{색\|##000000}}\|대응}}` `{{색\|##0000ff}}\|대응}}`	대응 대응

내용

문단

문단을 나누려면 줄을 두 번 띄우면 됩니다. 한 줄만 띄우면 줄바꿈은 되지 않고, 대신 같은 문단 안에서 연결됩니다.

문단 안에서 줄바꿈을 할 때는 br 태그를 열기만 하면 됩니다 ( ). 두 방식은 행끼리 떨어지는 거리가 달라 서로 다른 용도로 사용합니다. 이때, 두 번 개행하는 방식을 표 안에 넣는 것은 권장되지 않습니다.

두 번 개행	br 태그 사용
동해 물과 백두산이 마르고 닳도록	동해 물과 백두산이 마르고 닳도록

목록

목록은 크게 번호 없는 목록과 번호 있는 목록으로 나뉩니다.

별표(*)를 사용하면 번호 없는 목록이 됩니다.
- 두 개 이상의 별표를 쓰면 들여쓰기가 됩니다.

샵(#)을 사용하면 번호 있는 목록이 됩니다.
1. 역시 여러 개를 쓰면 들여쓰기가 됩니다.
번호는 자동으로 부여됩니다.

링크

내부 링크는 [[링크]]로 사용하면 됩니다. 이때, 링크되는 대상과 표시되는 내용을 다르게 하려면 [[링크|표시]]처럼 쓸 수 있습니다. 간혹 내부 링크에 색을 넣을 때 간결하게 {{색링크|링크|색상|표시}}를 사용해도 됩니다.

외부 링크는 [URL 제목]으로 씁니다. 파이프(|) 대신 그냥 띄어쓰기로 구분하며, URL에는 띄어쓰기가 없어야 하지만 제목에는 띄어쓰기가 있을 수 있음에 유의하세요.

나무위키 링크는 나무위키의 문서로 연결해주는데, 나무연결 틀을 {{나무연결|링크}} 또는 {{나무연결|링크|표시}}처럼 사용하면 됩니다.

입력	출력
`[[제21대 대통령 선거]]`	제21대 대통령 선거
`[[제21대 대통령 선거\|21대 대선]]`	21대 대선
`{{색링크\|청광광역시\|violet}}`	청광광역시
`{{색링크\|청광광역시\|violet\|청광}}`	청광
`[https://youtube.com 유튜브]`	유튜브
`{{나무연결\|경기외국어고등학교}}`	경기외국어고등학교
`{{나무연결\|경기외국어고등학교\|경기외고}}`	경기외고

각주

각주를 사용하려면 ref 태그를 사용합니다. <ref>내용</ref>으로 사용하면 자동으로 사용된 순서대로 번호가 부여됩니다.^[2]

틀

틀을 만드는 것에 대해서는 틀 만들기 도움말을 별도로 두어 다룹니다.

주요 공용 틀의 약어는 틀 도움말에서 볼 수 있습니다.

틀 문서에 있는 내용을 문서에 바로 삽입할 수 있습니다. 틀은 자주 사용되는 내용, 틀, 서식을 쉽게 쓸 수 있게 합니다.

'나무연결' 또한 틀의 하나로, 나무위키 링크의 긴 내용을 쉽게 사용할 수 있도록 압축한 것입니다.

{{〇〇|값|값|이름=값}}처럼 쓴다고 했을 때 〇〇는 틀의 이름이며, 그 뒤부터는 매개변수들입니다. 매개변수는 순서에 따라 자동으로 인식되도록 할 수도, 각각 이름이 있는 경우도 있는데, 전자의 경우 값만 쓰면 되고, 이름이 있는 경우에는 이름=값으로 입력합니다.

틀의 이름과 매개변수, 그리고 매개변수끼리 구분할 때는 파이프(|)를 사용하는데, 틀의 매개변수가 많아 헷갈릴 때는 각 파이프 문자가 나오기 전에 줄바꿈을 해도 됩니다.

공용으로 만들어진 틀의 경우, 각 틀을 어떻게 사용하는지는 주로 틀 문서에 기록되어 있습니다. 틀:이름을 검색해 확인해보세요.

↑ span에 적용했을 때
↑ 이와 같이 표시됩니다.

[1] span에 적용했을 때

[2] 이와 같이 표시됩니다.

[1]

[2]

@@ 1번째 줄: / 1번째 줄: @@
-{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법{{부제| 1장 「기초」}}}}
+{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법<span style="display: block">{{부제| 1장 「기초」}}</span>}}
 {{분류|도움말}}
-{{공용 문서}}{{도움말}}
+{{도움말}}{{위키 문법}}
 {{목차}}
-== 기초 개념 ==
+{{조문|😣 '''내용이 너무 긴가요?''' [[도움말:위키 문법/요약|요약판]]이 있습니다.}}
+== 개념 ==
 === HTML 태그 ===
-{{참고|HTML에 대한 심층적인 내용은 [[도움말:위키 문법/CSS|4장 「HTML」]]에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.}}
+{{참고|HTML에 대한 심층적인 내용은 [[도움말:위키 문법/HTML|3장 「HTML」]]에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.}}
-HTML 태그는 문서를 더 다채롭게 꾸미기 위해 기초적인 내용을 알 필요가 있습니다. HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <code><〇〇></code>으로 열고, <code></〇〇></code>으로 닫습니다. 〇〇의 자리에는 태그의 이름을 넣으면 됩니다.
+HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <code><〇〇></code>으로 열고, <code></〇〇></code>으로 닫습니다.
+대표적인 태그로는 <code>span</code>가 있는데, 이는 글자 자체를 선택하며, <code>div</code>는 안의 내용을 둘러싸는 상자를 만듭니다.
+HTML 태그에는 속성<sup>attribute</sup>을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <code><〇〇 abc="123"></code>과 같이 넣을 수 있고, 여러 개 넣을 때는 <code><〇〇 abc="123" def="456"></code>처럼 쓰면 됩니다.
-일부 HTML 태그에는 속성을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <code><〇〇 abc="123"></code>과 같이 넣을 수 있고, 여러 개 넣을 때는 <code><〇〇 abc="123" def="456"></code>처럼 쓰면 됩니다. 이때 <code>abc</code>는 속성의 이름을, <code>123</code>은 속성의 값입니다.
+=== 스타일링 기초 1 ===
+{{참고|스타일링에 대한 심층적인 내용은 [[도움말:위키 문법/스타일링|4장 「스타일링」]]에서 다룹니다.}}
-대표적인 속성은 <code>style</code>이 있는데, 이 값에는 이 대상에 대한 CSS 스타일을 넣으면 됩니다. CSS 스타일에 대한 내용은 [[도움말:위키 문법/CSS|5장 「CSS」]]를 확인하세요.
+스타일을 적용할 때 HTML 태그 중 여는 태그에 [[틀:스타일]]을 <code><nowiki>{{스타일|</nowiki>{{c|##81B11F|스타일 구문}}<nowiki>}}</nowiki></code>과 같이 사용합니다. 스타일 구문을 쓸 때는 <code>속성-값</code> 형태로 쓰며, 띄어쓰기로 구분합니다.
-=== 틀 ===
+종합적으로 <code>&lt;span <nowiki>{{스타일|c-red bg-blue}}</nowiki>&gt;파란 배경 빨간 글자&lt;/span&gt;</code>처럼 쓸 수 있습니다.
-틀은 코딩에서 함수를 사용하듯이 자주 사용되는 내용을 바로 쓸 수 있게 하거나, 글자 서식이 HTML 태그로 쓸 시 복잡한 경우에 틀에 태그를 담아 더 편리하게 쓸 수 있습니다. 또 복잡한 표를 삽입할 때 만들어진 틀을 사용하면 어려운 문법을 쓸 필요 없이 몇몇 매개변수만 입력하면 자동으로 표가 완성되도록 할 수도 있습니다.
+자세한 내용은 4장에서 소개할 것이니, 알고 있으면 좋은 서식 3개를 소개합니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%; text-align: center;"
+|- style="font-weight: 700; text-align: center;"
+! 서식
+! style="min-width: 50px;" | 설명
+! 예시
+! style="min-width: 70px;" | 출력<ref><code>span</code>에 적용했을 때</ref>
+|-
+| <code>c</code> || 글자 색상 || <code><nowiki>{{스타일|c-red}}</nowiki></code>  || <span style="color: red;">예시</span>
+|-
+| <code>bg</code> || 배경 색상 || <code><nowiki>{{스타일|bg-#a0f0f0}}</nowiki></code> || <span style="background: #a0f0f0;">예시</span>
+|-
+| <code>fs</code> || 글자 크기 || <code><nowiki>{{스타일|fs-18px}}</nowiki></code> || <span style="font-size: 18px;">예시</span>
+|}
 == 글자 서식 ==
 === 글꼴 ===
-현재 위키에서는 네 가지 글꼴을 제공하고 있습니다. 작은따옴표 3개로 글자를 둘러싸면 굵게(볼드) 처리되며, 2개로 둘러싸면 이탤릭체가 됩니다.
+현재 위키에서는 네 가지 글꼴을 제공하고 있습니다. 굵게와 기울이기는 각각 따옴표 3개와 2개로 입력할 수 있고, 밑줄과 취소선은 태그나 틀을 이용합니다.
-밑줄과 취소선을 이용하기 위해서는 HTML 태그를 사용해야 합니다. 밑줄은 <code>u</code> 태그를, 취소선은 <code>s</code> 태그를 이용합니다. 이때 취소선의 경우는 <code>--</code> 틀을 이용하면 링크 색상도 회색으로 바뀝니다.
-{| class="wikitable"
+{| class="wikitable"style="margin-left:auto; margin-right:auto;  white-space: nowrap; text-align: center; width: 100%;"
-|-
+|- style="font-weight: 700; text-align: center;"
-! 입력 !! 출력
+! width=50% | 입력
+! width=50% | 출력
 |-
 | <code><nowiki>'''굵게'''</nowiki></code>
@@ 43번째 줄: / 64번째 줄: @@
 | <code><nowiki><s>취소선</s></nowiki></code>
 |}
+=== 색상 ===
+글자의 색을 바꾸기 위해서는 <code>span</code> 태그에 <code>style</code> 속성을 부여하고 그 안에 CSS로 <code>color</code>을 지정하면 됩니다.
+예를 들어, <code><nowiki><span style="color: red;">빨간 글자</span></nowiki></code>와 같이 쓰면 됩니다.
+그러나, 너무 코드가 길고 사용하기 어렵기 때문에 보통은 틀을 사용하여 간략하게 사용합니다. RGB 6자리 색상 코드나 CSS 색상 등을 사용할 수 있습니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%; text-align: center;"
+|- style="font-weight: 700; text-align: center;"
+! 입력
+! 출력
+|-
+| <code><nowiki>{{색|red|빨강}}</nowiki></code>
+| {{색|red|빨강}}
+|-
+| <code><nowiki>{{색|#2a6db0|파랑}}</nowiki></code> || {{색|#2a6db0|파랑}}
+|}
+글씨 색상을 지정하면 다크 모드에서는 안 보이는 경우가 있습니다. 이때 <code><nowiki>##색상</nowiki></code>처럼 <code>#</code> 대신 <code>##</code>를 사용하면 됩니다. 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%; text-align: center;"
+|- style="font-weight: 700; text-align: center;"
+! 입력
+! 다크모드 출력
+|-
+| <code><nowiki>{{색|#000000|검정}}</nowiki></code><br><code><nowiki>{{색|#0000ff|파랑}}</nowiki></code>
+| style="background: #1c1d1f;" | {{색|#000000|검정}}<br>{{색|#0000ff|파랑}}
+|-
+| <code><nowiki>{{색|##000000}}|대응}}</nowiki></code><br><code><nowiki>{{색|##0000ff}}|대응}}</nowiki></code>
+| style="background: #1c1d1f;" | {{색|HSL(37, 10%, 74%)|대응}}<br>{{색|HSL(240, 100%, 75%)|대응}}
+|}
+== 내용 ==
+=== 목차 ===
+<code><nowiki>{{목차}}</nowiki></code> 틀은 오른쪽의 소개 표와 개요 문단 사이에 넣도록 되어 있는데, 다음 문단들이 틀 왼쪽에 붙지 않고 틀 밑으로 내려가도록 합니다. 그래서 목차 틀을 항상 넣는 것을 습관화하는 게 좋습니다.
+=== 문단 ===
+문단을 나누려면 줄을 두 번 띄우면 됩니다.
+한 줄만 띄우면 줄바꿈은 되지 않고, 대신 같은 문단 안에서 연결됩니다.
+문단 안에서 줄바꿈을 할 때는 <code>br</code> 태그를 열기만 하면 됩니다 (<code><nowiki><br></nowiki></code>). 두 방식은 행끼리 떨어지는 거리가 달라 서로 다른 용도로 사용합니다. 이때, <u>두 번 개행하는 방식을 표 안에 넣는 것은 권장되지 않습니다. </u>
+{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; width: 100%; text-align: center;"
+|- style="font-weight: 700; text-align: center;"
+! 두 번 개행
+! br 태그 사용
+|-
+| style="line-height: 2;" | 동해 물과 백두산이<br>마르고 닳도록
+| 동해 물과 백두산이<br>마르고 닳도록
+|}
+=== 목록 ===
+목록은 크게 번호 없는 목록과 번호 있는 목록으로 나뉩니다.
+* 별표(<code>*</code>)를 사용하면 번호 없는 목록이 됩니다.
+** 두 개 이상의 별표를 쓰면 들여쓰기가 됩니다.
+# 샵(<code>#</code>)을 사용하면 번호 있는 목록이 됩니다.
+## 역시 여러 개를 쓰면 들여쓰기가 됩니다.
+# 번호는 자동으로 부여됩니다.
+=== 링크 ===
+내부 링크는 <code><nowiki>[[링크]]</nowiki></code>로 사용하면 됩니다. 이때, 링크되는 대상과 표시되는 내용을 다르게 하려면 <code><nowiki>[[링크|표시]]</nowiki></code>처럼 쓸 수 있습니다.
+간혹 내부 링크에 색을 넣을 때 간결하게 <code><nowiki>{{색링크|링크|색상|표시}}</nowiki></code>를 사용해도 됩니다.
+외부 링크는 <code><nowiki>[URL 제목]</nowiki></code>으로 씁니다. 파이프(|) 대신 그냥 띄어쓰기로 구분하며, URL에는 띄어쓰기가 없어야 하지만 제목에는 띄어쓰기가 있을 수 있음에 유의하세요.
+나무위키 링크는 나무위키의 문서로 연결해주는데, <code>나무연결</code> 틀을 <code><nowiki>{{나무연결|링크}}</nowiki></code> 또는 <code><nowiki>{{나무연결|링크|표시}}</nowiki></code>처럼 사용하면 됩니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; text-align: center; width: 100%;"
+|- style="font-weight: 700; text-align: center;"
+! 입력
+! 출력
+|-
+| <code><nowiki>[[제21대 대통령 선거]]</nowiki></code> || [[제21대 대통령 선거]]
+|-
+| <code><nowiki>[[제21대 대통령 선거|21대 대선]]</nowiki></code> || [[제21대 대통령 선거|21대 대선]]
+|-
+| <code><nowiki>{{색링크|청광광역시|violet}}</nowiki></code> || {{색링크|청광광역시|violet}}
+|-
+| <code><nowiki>{{색링크|청광광역시|violet|청광}}</nowiki></code> || {{색링크|청광광역시|violet|청광}}
+|-
+| <code><nowiki>[https://youtube.com 유튜브]</nowiki></code> || [https://youtube.com 유튜브]
+|-
+| <code><nowiki>{{나무연결|경기외국어고등학교}}</nowiki></code> || {{나무연결|경기외국어고등학교}}
+|-
+| <code><nowiki>{{나무연결|경기외국어고등학교|경기외고}}</nowiki></code> || {{나무연결|경기외국어고등학교|경기외고}}
+|}
+=== 각주 ===
+각주를 사용하려면 <code>ref</code> 태그를 사용합니다. <code><nowiki><ref>내용</ref></nowiki></code>으로 사용하면 자동으로 사용된 순서대로 번호가 부여됩니다.<ref>이와 같이 표시됩니다.</ref>
+=== 틀 ===
+{{참고|틀을 만드는 것에 대해서는 [[도움말:틀 만들기|틀 만들기]] 도움말을 별도로 두어 다룹니다.}}
+{{참고|주요 공용 틀의 약어는 [[도움말:틀|틀]] 도움말에서 볼 수 있습니다.}}
+틀 문서에 있는 내용을 문서에 바로 삽입할 수 있습니다. 틀은 자주 사용되는 내용, 틀, 서식을 쉽게 쓸 수 있게 합니다.
+'나무연결' 또한 틀의 하나로, 나무위키 링크의 긴 내용을 쉽게 사용할 수 있도록 압축한 것입니다.
+<code><nowiki>{{〇〇|값|값|이름=값}}</nowiki></code>처럼 쓴다고 했을 때 〇〇는 틀의 이름이며, 그 뒤부터는 매개변수들입니다. 매개변수는 순서에 따라 자동으로 인식되도록 할 수도, 각각 이름이 있는 경우도 있는데, 전자의 경우 값만 쓰면 되고, 이름이 있는 경우에는 <code>이름=값</code>으로 입력합니다.
+틀의 이름과 매개변수, 그리고 매개변수끼리 구분할 때는 파이프(|)를 사용하는데, 틀의 매개변수가 많아 헷갈릴 때는 각 파이프 문자가 나오기 전에 줄바꿈을 해도 됩니다.
+공용으로 만들어진 틀의 경우, 각 틀을 어떻게 사용하는지는 주로 틀 문서에 기록되어 있습니다. <code>틀:이름</code>을 검색해 확인해보세요.