도움말:위키 문법 1장 「기초」

분류: 도움말

도움말
[ 펼치기 · 접기 ] 종합 길라잡이 문서의 종류 공용 외적 실용 메타 동음이의 └ 세계 내적 문서가 아닌 문서 ┘ ┌ 이름공간별 역할 ┐ 분류 파일 틀 사용자 연습장 유저 가이드 양식 문법 편집 시각표 틀 제작 디자인 문서 작성 도움말 설정 노하우 특수 기능 시각표 사전 평가·시상·활동 사용자 등급 문서 독도락 세계관 대문 세계관 사용자 위키의 동반자 전회원대회 휘장 관리·운영 저작권 사무관 규정 관리자 신문고

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

개요

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

개념

HTML 태그

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

HTML 태그는 문서를 더 다채롭게 꾸미기 위해 기초적인 내용을 알 필요가 있습니다. HTML 태그는 글자를 둘러싸서 그 내용을 꾸미거나 역할을 부여하는 역할을 주로 합니다. HTML 태그는 <〇〇>으로 열고, </〇〇>으로 닫습니다. 〇〇의 자리에는 태그의 이름을 넣으면 됩니다.

대표적인 태그로는 span가 있는데, 이는 글자에 속성을 부여하고 싶을 때 사용합니다. 또 div는 안의 내용을 둘러싸는 상자를 만들며, 그 상자에 속성을 적용해 디자인을 만듭니다.

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

CSS 기초

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

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

인라인 CSS는 HTML 태그의 style 속성 안에 직접 작성합니다. 속성을 쓸 때는 이름: 값; 형태로 쓰며, 예시로 적용해보면 <span style="color: red; font-size: 18px;">빨간 굵은 글자</span>처럼 쓸 수 있습니다.

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

속성	설명	예시	출력
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을 지정하면 됩니다. 예를 들어, <span style="color: red;">빨간 글자</span>와 같이 쓰면 됩니다.

그러나, 이 방법은 너무 코드가 길고 사용하기 어렵기 때문에 보통은 틀을 사용하여 간략하게 사용합니다. RGB 6자리 색상 코드나 CSS 색상 등을 사용할 수 있으며, RGBA 8자리 코드를 사용해서 불투명도도 지정할 수 있습니다.

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

글씨 색상을 지정하면 라이트 모드에서는 잘 보이지만 다크 모드에서는 안 보이는 경우가 있습니다. 가장 많이 하는 실수는 이렇게 검정색으로 글씨를 적는 것입니다. 이런 색들을 피하는 게 최선이지만, 불가피하게 사용하는 경우가 있는데 두 가지 대처 방법이 있습니다.

첫 번째로는 light-dark(라이트, 다크)를 이용하는 방법입니다. 색상 코드를 넣을 자리에 해당 코드를 입력하면 라이트 모드와 다크 모드에서의 색상을 다르게 할 수 있습니다. 하지만 두 색상을 모두 확인해야 하는 만큼 귀찮습니다.

두 번째는 {{자동다크글씨|색상 코드}}를 이용하는 방법인데, 여기서 색상 코드는 6자리 색상 코드만 가능합니다. 이 코드를 입력하면 두 개의 색상을 고를 필요 없이 다크 모드에서 적절한 색상으로 바꿔서 표시해줍니다.

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

내용

목차

목차는 자동으로 생성되지만 {{목차}}로 틀을 삽입하는 이유는 따로 있습니다. 이 목차 틀은 오른쪽에 띄운 소개 표 다음에 넣도록 되어 있는데, 이는 그래야지만 다음 문단들이 틀 왼쪽에 붙지 않고 틀 밑으로 내려가기 때문입니다. 그래서 목차 틀을 항상 넣는 것을 습관화하는 게 좋습니다.

문단

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

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

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

목록

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

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

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

링크

이 위키에서 링크는 크게 세 가지 종류가 있습니다. 위키 내의 다른 문서로 이동할 수 있는 것, 외부 링크, 그리고 나무위키로 연결되는 링크입니다.

내부 링크는 [[링크]]로 사용하면 됩니다. 이때, 링크되는 대상과 표시되는 내용을 다르게 하려면 [[링크|표시]]처럼 쓸 수 있습니다. 간혹 내부 링크에 색을 넣으려면 표시 내용 자리에 색 틀이 적용된 글씨를 넣으면 되지만 조금 더 간결하게 {{색링크|링크|색상|표시}}를 사용해도 됩니다.

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

나무위키 링크는 위의 외부 링크에 스타일링을 넣어 틀로 만든 것으로, 가상 세계 특성상 현실 세계의 내용을 가져다 쓸 때 사소한 내용까지 모두 다시 설정하기는 번거로우므로 나무위키에 링크할 수 있도록 만든 것입니다. 나무연결 틀을 {{나무연결|링크}} 또는 {{나무연결|링크|표시}}처럼 사용하면 됩니다.

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

각주

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