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

2025년 10월 4일 (토) 13:04 판

도움말

[ 펼치기 · 접기 ]

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

개요

위키 문법의 기초를 설명합니다. 2장부터 5장까지는 이미 만들어진 틀을 활용해서 문서를 편집하는 경우 웬만해서는 필요하지 않습니다.

개념

HTML 태그

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

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

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

HTML 태그에는 속성^attribute을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <〇〇 abc="123">과 같이 넣을 수 있고, 여러 개 넣을 때는 <〇〇 abc="123" def="456">처럼 쓰면 됩니다. 이때 abc는 속성의 이름을, 123은 속성의 값입니다. 대표적인 속성은 style이 있는데 바로 다음 문단에서 설명하겠습니다.

CSS 기초

자세한 CSS 강의는 4장 「CSS」를 참고하세요.

CSS는 문서의 글자, 표, 배경 등 시각적인 스타일을 정의하는 언어입니다. 여기서는 표와 간단한 글자 스타일링 정도에 쓸 수 있는 최소한의 인라인 CSS를 소개합니다.

인라인 CSS는 HTML 태그의 style 속성 안에 직접 작성합니다. 속성을 쓸 때는 이름: 값; 형태로 쓰며, 빨간 굵은 글자처럼 쓸 수 있습니다.

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

속성	설명	예시	출력^[1]
`color`	글자 색상	`color: red;`	예시
`background`	배경 색상	`background: #a0f0f0;`	예시
`font-size`	글자 크기	`font-size: 18px;`	예시

틀

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

틀은 코딩에서 함수를 사용하듯이 자주 사용되는 내용을 바로 쓸 수 있게 하거나, 글자 서식이 HTML 태그로 쓸 시 복잡한 경우에 틀에 태그를 담아 더 편리하게 쓸 수 있습니다. 또 복잡한 표를 삽입할 때 만들어진 틀을 사용하면 어려운 문법을 쓸 필요 없이 몇몇 매개변수만 입력하면 자동으로 표가 완성되도록 할 수도 있습니다.

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

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

글자 서식

글꼴

현재 위키에서는 네 가지 글꼴을 제공하고 있습니다. 작은따옴표 3개로 글자를 둘러싸면 굵게(볼드) 처리되며, 2개로 둘러싸면 이탤릭체가 됩니다.

밑줄과 취소선을 이용하기 위해서는 HTML 태그를 사용해야 합니다. 밑줄은 u 태그를, 취소선은 s 태그를 이용합니다. 이때 취소선의 경우는 -- 틀을 이용하면 링크 색상도 회색으로 바뀝니다.

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

색상

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

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

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

글씨 색상을 지정하면 다크 모드에서는 안 보이는 경우가 있습니다. 이런 색들을 피하는 게 최선이지만, 불가피하게 사용하는 경우가 있는데 {{자동다크글씨|색상 코드}}를 사용하면 됩니다. 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 두 개의 색상을 고를 필요 없이 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.

입력	다크모드 출력
`{{색\|#000000\|검정}}` `{{색\|#0000ff\|파랑}}`	검정 파랑
`{{색\|light-dark(#000000, #ffffff)\|방법1}}` `{{색\|light-dark(#0000ff, #aaaaff)\|방법1}}`	방법1 방법1
`{{색\|{{자동다크글씨\|#000000}}\|방법2}}` `{{색\|{{자동다크글씨\|#0000ff}}\|방법2}}`	방법2 방법2

내용

문단

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

문단 안에서 줄바꿈을 할 때는 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]

@@ 10번째 줄: / 10번째 줄: @@
 === HTML 태그 ===
 {{참고|HTML에 대한 심층적인 내용은 [[도움말:위키 문법/HTML|3장 「HTML」]]에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.}}
-HTML 태그는 문서를 더 다채롭게 꾸미기 위해 기초적인 내용을 알 필요가 있습니다. HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <code><〇〇></code>으로 열고, <code></〇〇></code>으로 닫습니다. 〇〇의 자리에는 태그의 이름을 넣으면 됩니다.
+HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <code><〇〇></code>으로 열고, <code></〇〇></code>으로 닫습니다.
-대표적인 태그로는 <code>span</code>가 있는데, 이는 글자에 속성을 부여하고 싶을 때 사용합니다. 또 <code>div</code>는 안의 내용을 둘러싸는 상자를 만들며, 그 상자에 속성을 적용해 디자인을 만듭니다.
+대표적인 태그로는 <code>span</code>가 있는데, 이는 글자 자체를 선택하며, <code>div</code>는 안의 내용을 둘러싸는 상자를 만듭니다.
-일부 HTML 태그에는 속성을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <code><〇〇 abc="123"></code>과 같이 넣을 수 있고, 여러 개 넣을 때는 <code><〇〇 abc="123" def="456"></code>처럼 쓰면 됩니다. 이때 <code>abc</code>는 속성의 이름을, <code>123</code>은 속성의 값입니다. 대표적인 속성은 <code>style</code>이 있는데 바로 다음 문단에서 설명하겠습니다.
+HTML 태그에는 속성<sup>attribute</sup>을 부여할 수 있습니다. 속성을 부여할 때는 여는 태그에 <code><〇〇 abc="123"></code>과 같이 넣을 수 있고, 여러 개 넣을 때는 <code><〇〇 abc="123" def="456"></code>처럼 쓰면 됩니다. 이때 <code>abc</code>는 속성의 이름을, <code>123</code>은 속성의 값입니다. 대표적인 속성은 <code>style</code>이 있는데 바로 다음 문단에서 설명하겠습니다.
 === CSS 기초 ===
@@ 20번째 줄: / 20번째 줄: @@
 CSS는 문서의 글자, 표, 배경 등 시각적인 스타일을 정의하는 언어입니다. 여기서는 표와 간단한 글자 스타일링 정도에 쓸 수 있는 최소한의 인라인 CSS를 소개합니다.
-인라인 CSS는 HTML 태그의 <code>style</code> 속성 안에 직접 작성합니다. 속성을 쓸 때는 <code>이름: 값;</code> 형태로 쓰며, 예시로 적용해보면 <code>&lt;span style="color: red; font-size: 18px;"&gt;빨간 굵은 글자&lt;/span&gt;</code>처럼 쓸 수 있습니다.
+인라인 CSS는 HTML 태그의 <code>style</code> 속성 안에 직접 작성합니다. 속성을 쓸 때는 <code>이름: 값;</code> 형태로 쓰며, <code>&lt;span style="color: red; font-size: 18px;"&gt;빨간 굵은 글자&lt;/span&gt;</code>처럼 쓸 수 있습니다.
 자세한 내용은 4장에서 소개할 것이니, 알고 있으면 좋은 태그 3개를 소개합니다.
@@ 74번째 줄: / 74번째 줄: @@
 예를 들어, <code><nowiki><span style="color: red;">빨간 글자</span></nowiki></code>와 같이 쓰면 됩니다.
-그러나, 이 방법은 너무 코드가 길고 사용하기 어렵기 때문에 보통은 틀을 사용하여 간략하게 사용합니다. RGB 6자리 색상 코드나 CSS 색상 등을 사용할 수 있으며, RGBA 8자리 코드를 사용해서 불투명도도 지정할 수 있습니다.
+그러나, 이 방법은 너무 코드가 길고 사용하기 어렵기 때문에 보통은 틀을 사용하여 간략하게 사용합니다. RGB 6자리 색상 코드나 CSS 색상 등을 사용할 수 있습니다.
 {| class="wikitable"
@@ 85번째 줄: / 85번째 줄: @@
 |}
-글씨 색상을 지정하면 라이트 모드에서는 잘 보이지만 다크 모드에서는 안 보이는 경우가 있습니다. 가장 많이 하는 실수는 {{색|#000000|이렇게 검정색으로}} 글씨를 적는 것입니다. 이런 색들을 피하는 게 최선이지만, 불가피하게 사용하는 경우가 있는데 두 가지 대처 방법이 있습니다.
+글씨 색상을 지정하면 다크 모드에서는 안 보이는 경우가 있습니다. 이런 색들을 피하는 게 최선이지만, 불가피하게 사용하는 경우가 있는데 <code><nowiki>{{자동다크글씨|색상 코드}}</nowiki></code>를 사용하면 됩니다. 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 두 개의 색상을 고를 필요 없이 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.
-첫 번째로는 <code>light-dark(라이트, 다크)</code>를 이용하는 방법입니다. 색상 코드를 넣을 자리에 해당 코드를 입력하면 라이트 모드와 다크 모드에서의 색상을 다르게 할 수 있습니다. 하지만 두 색상을 모두 확인해야 하는 만큼 귀찮습니다.
-두 번째는 <code><nowiki>{{자동다크글씨|색상 코드}}</nowiki></code>를 이용하는 방법인데, 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 두 개의 색상을 고를 필요 없이 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.
 {| class="wikitable"
@@ 107번째 줄: / 103번째 줄: @@
 == 내용 ==
 === 목차 ===
-목차는 자동으로 생성되지만 <code><nowiki>{{목차}}</nowiki></code>로 틀을 삽입하는 이유는 따로 있습니다. 이 목차 틀은 오른쪽에 띄운 소개 표 다음에 넣도록 되어 있는데, 이는 그래야지만 다음 문단들이 틀 왼쪽에 붙지 않고 틀 밑으로 내려가기 때문입니다. 그래서 목차 틀을 항상 넣는 것을 습관화하는 게 좋습니다.
+<code><nowiki>{{목차}}</nowiki></code> 틀은 오른쪽에 소개 표 다음에 넣도록 되어 있는데, 다음 문단들이 틀 왼쪽에 붙지 않고 틀 밑으로 내려가도록 합니다. 그래서 목차 틀을 항상 넣는 것을 습관화하는 게 좋습니다.
 === 문단 ===
@@ 113번째 줄: / 109번째 줄: @@
 한 줄만 띄우면 줄바꿈은 되지 않고, 대신 같은 문단 안에서 연결됩니다.
-문단 안에서 줄바꿈을 할 때는 <code>br</code> 태그를 열기만 하면 됩니다 (<code><nowiki><br></nowiki></code>). <code>br</code> 태그는 줄바꿈 이상의 역할을 하지 않기 때문에 닫을 필요가 없습니다. 두 방식은 행끼리 떨어지는 거리가 달라 서로 다른 용도로 사용합니다. 이때, 두 번 개행하는 방식을 표 안에 넣는 것은 권장되지 않습니다.
+문단 안에서 줄바꿈을 할 때는 <code>br</code> 태그를 열기만 하면 됩니다 (<code><nowiki><br></nowiki></code>). 두 방식은 행끼리 떨어지는 거리가 달라 서로 다른 용도로 사용합니다. 이때, 두 번 개행하는 방식을 표 안에 넣는 것은 권장되지 않습니다.
 {| class="wikitable"
@@ 133번째 줄: / 129번째 줄: @@
 === 링크 ===
-이 위키에서 링크는 크게 세 가지 종류가 있습니다. 위키 내의 다른 문서로 이동할 수 있는 것, 외부 링크, 그리고 나무위키로 연결되는 링크입니다.
 내부 링크는 <code><nowiki>[[링크]]</nowiki></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>처럼 사용하면 됩니다.
+나무위키 링크는 나무위키의 문서로 연결해주는데, <code>나무연결</code> 틀을 <code><nowiki>{{나무연결|링크}}</nowiki></code> 또는 <code><nowiki>{{나무연결|링크|표시}}</nowiki></code>처럼 사용하면 됩니다.
 {| class="wikitable"