[주의!] 문서의 이전 버전(에 수정)을 보고 있습니다. 최신 버전으로 이동
1. 개요2. 텍스트 서식3. 문단4. 링크5. 리다이렉트 생성6. 앵커좌표7. 글상자8. 표9. 인용문10. 이미지(파일) 적용
10.1. 외부이미지
11. 수평줄12. 리스트13. 각주14. 주석15. 매크로16. 접기17. 수식18. youtube 동영상 삽입19. HTML19.1. CSS 스타일 적용
20. 분류21. 문법 강조22. 문법 무시23. 세로쓰기24. 사용할만한 특수문자19.1.1. 문법19.1.2. 테두리19.1.3. 줄바꿈 방지19.1.4. 색19.1.5. 텍스트 그림자 효과19.1.6. 폰트19.1.7. 여백19.1.8. 요소의 넓이 강제 100%지정 막기19.1.9. 넓이 및 높이19.1.10. 그라디언트19.1.11. 박스 중앙정렬19.1.12. 텍스트 중앙정렬
19.2. 틀1. 개요[편집]
2. 텍스트 서식[편집]
구분 | 사용 방법 | 출력 결과 |
굵은 글꼴 | '''The quick brown fox jumps over the lazy dog.''' | The quick brown fox jumps over the lazy dog. |
기울임꼴 | ''The quick brown fox jumps over the lazy dog.'' | The quick brown fox jumps over the lazy dog. |
밑줄 | __The quick brown fox jumps over the lazy dog.__ | The quick brown fox jumps over the lazy dog. |
취소선 | ~~The quick brown fox jumps over the lazy dog.~~ | |
--The quick brown fox jumps over the lazy dog-- | ||
색상(색상 이름) | {{{#red The quick brown fox jumps over the lazy dog.}}} | The quick brown fox jumps over the lazy dog. |
색상(HTML 색상 코드) | {{{#ff0000 The quick brown fox jumps over the lazy dog.}}} | The quick brown fox jumps over the lazy dog. |
텍스트 크기 크게[제약] | {{{+1 A}}}{{{+2 L}}}{{{+3 P}}}{{{+4 H}}}{{{+5 A}}} | ALPHA |
텍스트 크기 작게[제약] | {{{-1 A}}}{{{-2 L}}}{{{-3 P}}}{{{-4 H}}}{{{-5 A}}} | ALPHA |
위첨자 | 4^^4^^ | 44 |
아래첨자 | CaCO,,3,, | CaCO3 |
{{{[[알파위키]]}}} | [[알파위키]] |
3. 문단[편집]
구분 | 기본적으로 펼침 | 기본적으로 접힘 |
1단계 문단 | = 문단 제목 = | =# 문단 제목 #= |
2단계 문단 | == 문단 제목 == | ==# 문단 제목 #== |
3단계 문단 | === 문단 제목 === | ===# 문단 제목 #=== |
4단계 문단 | ==== 문단 제목 ==== | ====# 문단 제목 #==== |
5단계 문단 | ===== 문단 제목 ===== | =====# 문단 제목 #===== |
6단계 문단 | ====== 문단 제목 ====== | ======# 문단 제목 #====== |
문단은 한단계씩 내려가야 합니다. 예를 들어, 2단계 밑에 바로 5단계를 붙일 수는 없습니다. 그렇게 하다가는 목차가 이렇게 나옵니다.
4. 링크[편집]
4.1. 문서 링크[편집]
구분 | 사용 방법 | 출력 결과 |
문서명=출력 | [[알파위키]] | |
문서명=출력 (특정 문단에 링크) | [[알파위키#s-4]] | |
문서명≠출력 | [[알파위키|바로 이 위키]] | |
문서명≠출력 (특정 문단에 링크) | [[알파위키#s-4|나무위키와의 관계]] |
구분 | 사용 방법 |
상위 문서로 링크 | [[../]] |
하위 문서로 링크 | [[/하위 문서명]] |
4.2. URL 링크[편집]
구분 | 사용 방법 | 출력 결과 |
URL=출력 | [[https://alphawiki.org/]] | |
URL≠출력 | [[https://alphawiki.org/|알파위키]] |
5. 리다이렉트 생성[편집]
리다이렉트는 한 문서를 들어갈 때 다른 문서로 이동시켜주는 기능입니다. 리다이렉트를 생성하는 법은 다음과 같습니다.
#redirect 문서 제목 또는 #넘겨주기 문서 제목으로 리다이렉트를 생성할 수 있습니다.#redirect 문서 제목#s-문단 번호로 문서의 특정 문단으로 넘겨줄 수 있습니다.6. 앵커좌표[편집]
목표 문서에
[anchor(앵커이름)]을 삽입한 후 링크, 리다이렉트 문서에 #s-n 대신 #앵커이름을 사용할 수 있습니다. 예를 들어, 알파위키 문서의 특정 지점에 [anchor(우왕)]을 삽입하였을 때, [[알파위키#우왕]]으로 링크를 걸거나 #redirect 알파위키#우왕으로 삽입하여 "우왕"이라는 앵커좌표를 삽입한 지점으로 넘어가도록 할 수 있습니다.7. 글상자[편집]
모니위키식 글상자는 지원이 중단되었습니다. 하지만, 우리의 친구 CSS를 이용하면 흉내낼 수 있습니다.
{{{#!wiki style="border:1px solid black;display:table;padding:3px;"
내용
}}}
내용
8. 표[편집]
표의 한 줄은 ||로 시작해 ||로 끝납니다.
||1||2||1 | 2 |
||1||2||
||3||4||1 | 2 |
3 | 4 |
8.1. 셀 합치기[편집]
2개 이상의 셀을 합치는 법은 다음과 같습니다.
8.1.1. 가로 합치기[편집]
||1||2||3||4||
||||1||2||3||
||||||1||2||
||||||||1||1 | 2 | 3 | 4 |
1 | 2 | 3 | |
1 | 2 | ||
1 | |||
추가로 합치고자 하는 셀의 갯수만큼 ||을 추가로 입력하면 됩니다.
||1||2||3||4||
||<-2>1||2||3||
||<-3>1||2||
||<-4>1||1 | 2 | 3 | 4 |
1 | 2 | 3 | |
1 | 2 | ||
1 | |||
합치고자 하는 셀의 갯수만큼 <-수>를 입력하는 방법으로도 합칠 수 있습니다.
8.1.2. 세로 셀 합치기[편집]
||1||<|2>5||<|3>8||<|4>10||
||2||
||3||6||
||4||7||9||1 | 5 | 8 | 10 |
2 | |||
3 | 6 | ||
4 | 7 | 9 |
합치고자 하는 셀의 갯수만큼 <|수>를 입력하면 됩니다.
8.1.3. 주의사항[편집]
- <|숫자>, <-숫자>의 칸 길이 배치는 입력한 숫자에 비례하지 않습니다. 정확한 길이를 맞추기 위해서는 <width>문법으로 셀의 길이를 일일히 지정해줘야 합니다.
- <|숫자>, <-숫자>를 정확하게 입력하지 않으면 표가 정상적으로 출력되지 않을 수 있습니다.
- 표 전체에 테두리를 두르는 tableborder 문법이 정상적으로 적용되지 않아 테두리가 적용되지 않는 구간이 나타납니다.
- 표의 너비가 화면 표시영역의 너비보다 길 경우 나머지 부분은 가져지며, 스크롤바가 나타납니다.
- 표의 너비가 화면보다 작은데도 스크롤바가 나타났다면 칸의 길이가 일치하지 않아 나타나는 문법 오류입니다.
8.2. 표와 셀 꾸미기[편집]
표와 셀을 꾸미는 법은 다음과 같습니다.
8.2.1. 표 꾸미기[편집]
- 정렬
<table align=left> = 왼쪽 정렬
<table align=center> = 가운데 정렬
<table align=right> = 오른쪽 정렬
<table align=center> = 가운데 정렬
<table align=right> = 오른쪽 정렬
||<table align=left>왼쪽||
||<table align=center>가운데||
||<table align=right>오른쪽||왼쪽 |
가운데 |
오른쪽 |
주의사항
- 모바일의 경우, 화면이 작아 오른쪽 정렬이 적용되지 않을 수 있습니다.
- 표 배경색
<table bgcolor=색이름 또는 코드>
||<table bgcolor=red>1||2||
||3||4||1 | 2 |
3 | 4 |
- 표 테두리색
<table bordercolor=색 이름 또는 코드>
||<table bordercolor=red>1||2||
||3||4||1 | 2 |
3 | 4 |
주의사항 <tableborder>문법을 이용할 때 셀,칸(<|>,<->) 숫자를 정확하게 입력하지 않으면 테두리가 적용되지 않는 부분이 생깁니다.
8.2.2. 셀 꾸미기[편집]
- 셀 가로 정렬
<(> = 왼쪽 정렬
<:> = 가운데 정렬
<)> = 오른쪽 정렬
<:> = 가운데 정렬
<)> = 오른쪽 정렬
||@@@@@@@@@@@@@@@@@@@@||
||<(> 왼쪽||
||<:> 가운데||
||<)> 오른쪽||
@@@@@@@@@@@@@@@@@@@@ |
왼쪽 |
가운데 |
오른쪽 |
더 간편하게, 셀의 우측에 공백을 넣으면 왼쪽 정렬, 좌측에 공백을 넣으면 오른쪽 정렬, 양쪽 모두에 공백을 넣으면 가운데 정렬을 할 수 있습니다.
||@@@@@@@@@@@@@@@@@@@@||
||왼쪽 정렬 ||
|| 가운데 정렬 ||
|| 오른쪽 정렬||@@@@@@@@@@@@@@@@@@@@ |
왼쪽 정렬 |
가운데 정렬 |
오른쪽 정렬 |
- 셀 세로 정렬
셀을 합칠 때 사용하는 <|>을 이용하여 세로 정렬이 가능합니다. n은 아무거나 넣어도 됩니다.
방향 | 마크업 | 비고 |
위로 | <^|n> | 윗첨자 사용할때 쓰는 그 ^입니다. |
중간 | <|n> | 기본값 |
하단으로 | <v|n> | 알파벳 v |
적용예시:
ㅇㅇ | ㅇㅇ |
ㅇㅇ |
이 기능은 셀을 합칠 때를 상정하고 만들어졌으나, 꼼수를 이용하면 합치지 않은 셀에서도 사용 가능합니다. n을 1로 치환하면 됩니다. 이렇게 되면 HTML 상으로 colspan 속성이 1로 들어가, 합쳐지지 않게 됩니다.(모르면 넘어가셔도 됩니다.)
예시:
- 상단상단
- 중앙중앙
- 하단하단
:: RAW ::
*상단
||[br][br][br][br][br][br]||<^|1>상단||
*중앙
||[br][br][br][br][br][br]||중앙||
*하단
||[br][br][br][br][br][br]||<v|1>하단||
- 셀 배경색
<bgcolor=색이름 또는 코드> 또는 <#색이름 또는 코드>
||<#red>1||2||
||3||4|| 1 | 2 |
3 | 4 |
- 한 줄 배경색
<rowbgcolor=색이름 또는 코드>
||<rowbgcolor=red>1||2||3||
||4||5||6|| 1 | 2 | 3 |
4 | 5 | 6 |
- 셀 너비
<width=100px> (절대 수치)
<width=50%> (상대 수치)
<width=50%> (상대 수치)
||<width=100px>1||3||
||2||4||1 | 3 |
2 | 4 |
||<width=20%> 1||3||
||2||4||1 | 3 |
2 | 4 |
- 셀 높이
<height=100px> (절대 수치)
<height=50%> (상대 수치)
<height=50%> (상대 수치)
||<height=100px>1||3||
||2||4||1 | 3 |
2 | 4 |
8.2.3. 주의사항[편집]
- 색 코드를 입력할 때, 앞에 #을 입력해야 적용됩니다.
[접기/펼치기]
|
8.3. 캡션[편집]
표에 캡션을 다는 방법은 다음과 같습니다.
|캡션|셀1||셀2||
||셀3||셀4||
셀1 | 셀2 |
셀3 | 셀4 |
|와 |사이에 내용을 입력합니다. 미리보기에서는 캡션이 깨질 수 있으나, 편집 시 정상적으로 보입니다.
9. 인용문[편집]
내용 안에 문법 적용이 가능합니다.
> (내용)내용
>>>> (내용)(내용)
주의 1. 위아래로 연속된 인용문을 만드려면 붙여써야 합니다.
| |
1
2
3
a
b
c
주의 2. 인용문법의 왼쪽에는 아무것도 없어야 문법이 적용됩니다.
||>
>
||>
||
>
>
10. 이미지(파일) 적용[편집]
[[나무파일:나무위키에 업로드된 파일 이름]]으로 나무위키에서 포크된 파일을 사용할 수 있습니다. 2017년 9월 27일 이전에 나무위키에 업로드된 파일만 가능합니다.[[파일:파일 이름]]으로 알파위키에 업로드된 파일을 사용할 수 있습니다.10.1. 외부이미지[편집]
꼼수를 이용한, 비권장 문법입니다.
하지만 이미지 업로드 기능이 동작하지 않는 시점에선 이게 유일한 방법이라는게 함정
주의. HTTPS를 지원하는 웹사이트로만 링크가 가능하며, 넓이, 높이는 지정해야 합니다. 안 하면 이미지가 나타나지 않습니다.
한 유저의 前 그라바타입니다.
또한, 이 문법을 표에 적용할 때에는 셀의 넓이가 이미지 넓이 이상으로 설정되어 있어야 합니다. 자세한 사례는 Windows 7 문서를 참고하세요.
{{{#!wiki style="background-image:url('파일주소');width:넓이;height:높이;background-repeat:no-repeat no-repeat;background-size:cover;"
}}}
주의. HTTPS를 지원하는 웹사이트로만 링크가 가능하며, 넓이, 높이는 지정해야 합니다. 안 하면 이미지가 나타나지 않습니다.
{{{#!wiki style="background-image:url('https://ko.gravatar.com/userimage/134752146/35bdd096204130139d15af1a778f1d53.jpeg');width:80px;height:80px;background-repeat:no-repeat no-repeat;background-size:cover;"
}}}
또한, 이 문법을 표에 적용할 때에는 셀의 넓이가 이미지 넓이 이상으로 설정되어 있어야 합니다. 자세한 사례는 Windows 7 문서를 참고하세요.
11. 수평줄[편집]
- 를 4개 이상 10개 미만(으)로 연속으로 늘어놓으면 됩니다.
---
---
----
-----
------
-------
--------
---------
-------------
12. 리스트[편집]
번호가 없는 리스트는 다음과 같이 적용할 수 있습니다.
* 내용 * 내용* 내용↓
- 내용
- 내용
- 내용
번호가 있는 리스트는 다음과 같이 적용할 수 있습니다.
1. 리스트
1. 리스트
A. 리스트
A. 리스트
a. 리스트
a. 리스트
I. 리스트
I. 리스트
i. 리스트
i. 리스트
↓
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
- 리스트
주의사항
- 리스트를 적용할 때, 앞에 공백을 입력해야 합니다.
13. 각주[편집]
각주를 적용하는 방법은 다음과 같습니다.
[5]
[A]
[제목]
[B]
[B]
2번째 줄과 같이, 각주를 입력할 때 출력되는 각주의 문자를 변경할 수 있습니다. 같은 문자의 각주를 입력할 때, 2번째 각주부터는 내용을 생략할 수 있습니다.
주의사항
[* 내용]
[*A 문자가 있는 각주]
[*제목 이렇게도 할 수 있음.]
[*B 같은 각주를 반복]
[*B]
[5]
[A]
[제목]
[B]
[B]
2번째 줄과 같이, 각주를 입력할 때 출력되는 각주의 문자를 변경할 수 있습니다. 같은 문자의 각주를 입력할 때, 2번째 각주부터는 내용을 생략할 수 있습니다.
주의사항
- [* 와 내용 사이에 공백이 있어야 합니다.
- 틀 내부에 각주를 넣으면 문서 자체의 각주와 번호가 꼬이게 됩니다. 예를 들어 틀 내부에도 1번 각주가 있고 문서 자체에도 1번 각주가 있을 경우, 두 각주의 앵커가 동일한 '#fn-1'로 지정되며 브라우저에서는 먼저 나온 쪽의 앵커만을 유효한 앵커로서 인식하게 되어 문서 자체의 1번 각주를 눌러도 틀 내부의 1번 각주로 이동하는 현상이 일어납니다.
14. 주석[편집]
본문
## (내용)
본문
## 이 글은 출력되지 않습니다.
본문
본문
본문
본문
문서 열람 시에는 보이지 않으며, 문서 편집할 때만 나타나는 내용을 삽입할 수 있습니다. 문서를 편집하는 편집자들에게 유의사항을 알리는 용도로 주로 이용됩니다.
15. 매크로[편집]
매크로를 입력하는 법은 다음과 같습니다.
[date]
[br]
[include(틀:틀이름)]
[목차]
[각주]
[pagecount]
[age(YYYY-MM-DD)]
[dday(YYYY-MM-DD)]
15.1. date[편집]
현재 시각을 표시합니다.
예:
[date] 또는 [datetime] 로 호출 가능합니다.예:
- 현재 시각은 입니다.
15.2. br[편집]
해당 위치에 한 줄을 개행하는 html인
<br>을 실행합니다.[br]로 호출가능합니다.15.3. include[편집]
해당 위치에 틀을 삽입할 수 있습니다.
삽입 될 문서에
꼭 틀만 삽입 가능 한것은 아닙니다.
이 특성을 이용해서 틀에 사용 설명을 기술할 수 있습니다.
[include(틀:문서명)] 으로 호출 가능합니다.삽입 될 문서에
과 같은 형태를 삽입하고,[include(틀:문서명, 이름=값)] 을 할 경우 '값' 이 을 적어넣은 위치에 호출됩니다.꼭 틀만 삽입 가능 한것은 아닙니다.
[include(알파위키)]를 적으면 알파위키 문서가 호출되지만 알파위키 문서 내에 있는 틀은 호출되지 않습니다.이 특성을 이용해서 틀에 사용 설명을 기술할 수 있습니다.
틀:틀예시라는 틀이 있다고 가정하면, 틀:틀예시/설명문서라는 문서에 설명을 기술한 뒤 틀:틀예시 문서에 틀 문법 하단에 이 매크로를 이용해서 설명문서를 삽입하면 틀 문서에서는 설명이 보이지만, 틀을 실제로 사용할 때는 해당 내용을 볼 수 없습니다.15.4. 목차[편집]
해당 문서의 문단을 목차로 나타냅니다.
[목차] 또는 [tableofcontents]로 호출가능합니다.15.5. 각주[편집]
해당 문서의 각주를 표시합니다. 기본적으로 문서 최하단에 자동으로 표기되지만,
문서 중간에 해당 매크로를 호출한 경우, 해당 매크로가 호출 되기 전의 매크로를 출력하고,
남은 각주는 다시 매크로를 호출하지 않는다면, 최하단에 나머지 각주가 표기됩니다.
문서 중간에 해당 매크로를 호출한 경우, 해당 매크로가 호출 되기 전의 매크로를 출력하고,
남은 각주는 다시 매크로를 호출하지 않는다면, 최하단에 나머지 각주가 표기됩니다.
[각주] 또는 [footnote] 로 호출가능 합니다.15.6. pagecount[편집]
알파위키 전체 문서수를 계산합니다. 632562개와 같은 형식으로 출력합니다.
특정 네임스페이스만을 계산하는 방법도 있습니다.
예를 들어, 알파위키에 존재하는 모든 사용자들의 수를 계산하고싶다면
예:현재 사용자 수는 3483입니다.
[pagecount]로 호출 가능합니다.특정 네임스페이스만을 계산하는 방법도 있습니다.
[pagecount(네임스페이스)]로 호출할 수 있습니다.예를 들어, 알파위키에 존재하는 모든 사용자들의 수를 계산하고싶다면
사용자 로 네임스페이스를 정하면 됩니다. 또한, 일반적인 문서의 수를 구하려면 문서를 사용하시면 됩니다.예:현재 사용자 수는 3483입니다.
15.7. age[편집]
생년월일을 기입시 자동으로 만 나이를 계산하여 줍니다.
예를들어, 1999년 9월 9일에 출생하였다면,
[age(년-월-일)] 로 호출 할 수 있습니다.예를들어, 1999년 9월 9일에 출생하였다면,
[age(1999-09-09)]와 같은 형태로 적으면 됩니다.(결과: 26)15.8. dday[편집]
날짜를 기입하면, 현재 시간으로부터 남은 일수를 계산합니다. 계산한 값 앞에는 -가 붙습니다.
반대로, 이미 지나간 날짜를 기입하면, 지나간 일수를 계산합니다. 계산한 값 앞에는 +가 붙습니다.
예를들어, 2010년 10월 2일부터 지나간 일수를 계산하려면,
[dday(년-월-일)]으로 호출합니다.반대로, 이미 지나간 날짜를 기입하면, 지나간 일수를 계산합니다. 계산한 값 앞에는 +가 붙습니다.
예를들어, 2010년 10월 2일부터 지나간 일수를 계산하려면,
[dday(2010-10-02)]와 같이 적으면 됩니다15.9. math[편집]
16. 접기[편집]
|
접기안내문구(접힌 내용) |
텍스트를 누르면 접은 내용이 펼쳐지고, 텍스트를 다시 누르면 펼쳐진 내용이 접힙니다.
주의사항
- 접기 안내문구 텍스트에는 나무마크나 html등 어떠한 문법도 적용되지 않습니다.
- 표에 접기 문법을 적용한 경우 표 바깥의 문법은 표 안에 적용되지 않습니다. 따라서 표 안쪽의 문법은 따로 설정해야 합니다.
16.1. 여러개의 틀을 한꺼번에 접기(고급)[편집]
|| {{{#!folding 접기/펼치기
{{{#!folding 접기1번
내용 1
}}}
{{{#!folding 접기2번
내용 2
}}}
}}} ||접기/펼치기접기1번내용 1 접기2번내용 2 |
하나의 접기 문법 틀 안에 다른 접기문법 들을 넣으면, 바깥에 있는 접기 문법을 열였을 때 내부에 있던 접기들이 한꺼번에 펼쳐집니다. include문법을 이용한 틀을 넣었을 때에도 동일하게 적용됩니다.
16.2. 문단 접기[편집]
문단을 표시하는 각 등호 뒤/앞에
예시:
#을 붙여 주세요. 그렇게 하면 문단이 기본으로 접힙니다.예시:
====# 접힌 문단 #====
내용16.2.1. 접힌 문단 예시[편집]
17. 수식[편집]
- 편집창에서 쓰는 띄어쓰기는 명령어를 구분해주는 기능을 합니다. 수식 자체의 띄어쓰기는
\, \quad, \qquad를 입력해 줍니다.
- 기술적인 문제로 LaTeX 대신 KaTeX를 사용 중이므로, 일부 문법은 미지원될 수 있습니다.
17.1. 분수[편집]
분수는
\frac{분자}{분모} 혹은 {분자 \over 분모 형태로 나타낼 수 있습니다. 이 때 글씨 크기를 일정하게 유지하려면 \displaystyle를 씁니다.<math> \frac{1}{3} + \frac{5}{7} = \frac{22}{21}</math><math> \displaystyle \frac{1}{3} + \frac{5}{7} = \frac{22}{21}</math>17.2. 첨자[편집]
위첨자는 ^, 아래첨자는 _으로 적용할 수 있습니다.
<math> \displaystyle a^2,\a_4,\a^3_5</math>- 합(시그마)이나 곱(파이), 적분, 극한 을 나타내는 기호는 아래와 같이
\sum, \prod, \int, \lim명령어와 위첨자, 아래첨자 기능을 씁니다.
이 때 원래 모양대로 나타내려면 마찬가지로\displaystyle을 씁니다.
<math> \sum^{n}_{k=1}k, \prod^{n}_{k=1}k </math> <math> \displaystyle \sum^{n}_{k=1}k, \prod^{n}_{k=1}k </math> <math> \lim_{x \to 0} \frac{\sin x}{x} </math> → <math> \displaystyle \lim_{x \to 0} \frac{\sin x}{x} </math> <math> \int^{b}_{a} x^n dx </math> <math> \displaystyle \int^{b}_{a} x^n dx </math> 17.3. 장식 기호[편집]
장식 기호는 기호명칭{문자} 로 나타낼 수 있습니다.
<math> \dot{1}, \ddot{1}, \grave{1}, \check{1}, \breve{1}, \tilde{1}, \bar{1}, \hat{1}, \vec{1} </math>17.4. 정자체[편집]
수식은 기본적으로 이탤릭체로 되어 있습니다. 수식 내에서 정자로 쓸 때에는
삼각함수나 쌍곡선 함수, 로그, exp 등의 특수함수는 \ 기호로 간단하게 쓸 수 있습니다.
\text{문구} 를 이용합니다.<math>\displaystyle {nT \over PV} = \text{const} </math> → 삼각함수나 쌍곡선 함수, 로그, exp 등의 특수함수는 \ 기호로 간단하게 쓸 수 있습니다.
<math> \sin x, \cos x, \tan x </math> →<math> \sinh y, \cosh y, \tanh y </math> →<math> \exp(t), \log W, \ln W </math> →18. youtube 동영상 삽입[편집]
[youtube(유튜브 공유 링크)] 로 유튜브 동영상을 삽입 가능합니다.공유 링크는 해당 영상의 공유 버튼을 나오면 뒤에 나오는 영문과 숫자가 혼합된 문자를 말합니다.
19. HTML[편집]
알파위키는 html문법을 부분적으로 지원합니다.
div 문법을 사용하면 강제로 줄이 바뀌고, span문법을 사용하면 줄이 바뀌지 않습니다.
{{{#!html (코드)}}} 형태입니다. 여는 부분(앞)과 닫는 부분(뒤)이 둘 다 있어야 html문법이 적용됩니다.div 문법을 사용하면 강제로 줄이 바뀌고, span문법을 사용하면 줄이 바뀌지 않습니다.
[[종점1역|{{{#!html<div style="font-size:13px"><font color="#585858">종점1 방면</font>}}}]]
[[종점3역|{{{#!html<span style="font-size:13px"><font color="#585858">종점3 </font>}}}]]
자세한 태그 목록은 HTML/태그문서를 참조하시기 바랍니다.
19.1. CSS 스타일 적용[편집]
{{{#!wiki style="스타일"
내용}}} 형태이며, 열고 닫는 부분 모두가 있어야 합니다.{{{#!wiki style="background-color: orange"
오렌지색}}}오렌지색
주의사항
- 이러한 코드는 내부적으로
<div>박스로 처리됩니다. - 스타일 내용과 본문 사이에는 줄바꿈이 있어야 합니다.
19.1.1. 문법[편집]
19.1.2. 테두리[편집]
border 속성은 wiki문의 border(테두리)를 지정해 주는 속성입니다.사용법
용례
border: 두깨 스타일 색상용례
{{{#!wiki style="border: 2px solid gray"
2px solid gray 스타일입니다.
}}}
2px solid gray 스타일입니다.
border 스타일
dotted dashed solid double groove ridge inset outset none |
비슷한 속성
파일:속성.png border-top
파일:속성.png border-bottom
파일:속성.png border-left
파일:속성.png border-right
각각 상하좌우의 테두리를 설정하는 속성입니다. 사용 방법은
파일:속성.png border-radius
이 속성은 테두리의 둥근 면의 반지름을 설정하는 속성입니다.
파일:속성.png border-bottom
파일:속성.png border-left
파일:속성.png border-right
각각 상하좌우의 테두리를 설정하는 속성입니다. 사용 방법은
border와 같습니다.파일:속성.png border-radius
이 속성은 테두리의 둥근 면의 반지름을 설정하는 속성입니다.
{{{#!wiki style="border: 5px solid #ABCDEF;width: 300px;text-align: center;border-radius: 6px;"
border-radius를 6px로 지정했습니다.
}}}
border-radius를 6px로 지정했습니다.
19.1.3. 줄바꿈 방지[편집]
float 속성을 지정해 주시면 되며, 반드시 wiki의 닫는 중괄호와 그 다음 여는 중괄호는 붙어 있어야 합니다. 다음 예시를 보시면 이해가 쉬울 겁니다.예시1
{{{#!wiki style="width:100px;border:1px solid blue;float:left;margin:3px;padding:3px;"
알파위키}}}{{{#!wiki style="width:100px;border:1px solid blue;float:left;margin:3px;padding:3px;"
알파위키
}}}알파위키 알파위키 |
예시2
{{{#!wiki style="border:1px solid blue;float:left"
알파위키}}}{{{#!wiki style="border:1px solid blue;float:left;"
알파위키
}}}
알파위키 알파위키 |
19.1.4. 색[편집]
배경 색은
글자 색은
주의사항
위 예시와 같이, 밝은 배경과 밝은 색을 혼합하면 가독성이 떨어집니다.
background-color 속성으로 처리합니다. color는 영국식 colour이 아닌 미국식 color로 작성해야 하는 점 유의해 주시기 바랍니다.
{{{#!wiki style="background-color: #ABCDEF"
#ABCDEF는 알파위키 상징색입니다.
}}}
#ABCDEF는 알파위키 상징색입니다.
글자 색은
color 속성으로 처리합니다. 역시 color는 미국식입니다. 다만, 글자색은 {{{#색 내용}}} 문법으로 더 쉽게 처리할 수 있다는 점을 기억해 두시기 바랍니다.
{{{#!wiki style="color: #ABCDEF"
#ABCDEF는 알파위키 상징색입니다.
}}}
#ABCDEF는 알파위키 상징색입니다.
주의사항
위 예시와 같이, 밝은 배경과 밝은 색을 혼합하면 가독성이 떨어집니다.
19.1.5. 텍스트 그림자 효과[편집]
글자에 그림자 효과를 냅니다. 가로이동과 세로이동을 0으로 지정해놓으면 네온 효과가 납니다.
예시와 같이 나타나며,
이와같이 세로 이동을 움직여 색깔을 섞어서 쓸 수 도 있습니다.
{{{#!html <span style="text-shadow: 가로이동px 세로이동px 그림자크기px #그림자 색상 코드;color:#글자 색상 코드">텍스트</span>}}}예시와 같이 나타나며,
{{{#!html <span style="text-shadow: 0px -2px 4px #FF0000, -3px -1px 4px #FFA500, -3px 1px 4px #FFFF00, 0px 2px 4px #00FF00, 3px 1px 4px #00FFFF, 3px -1px 4px #0000FF;color: #FFFFFF">이와같이 세로 이동을 움직여 색깔을 섞어서 쓸 수 도 있습니다.</span>}}}
이와같이 세로 이동을 움직여 색깔을 섞어서 쓸 수 도 있습니다.
19.1.6. 폰트[편집]
font-family 속성을 이용하시면 됩니다.
{{{#!wiki style="font-family: Times New Roman;float:left"
이건 Times New Roman이고요, }}}{{{#!wiki style="font-family: Arial"
이건 Arial입니다.}}}
이건 Times New Roman이고요,
이건 Arial입니다.
19.1.7. 여백[편집]
padding 속성은 틀 안의 여백을 정의하고, margin 속성은 틀과 다른 요소 사이의 여백을 정의합니다.
||{{{#!wiki style="padding:15px;margin:10px;border:2px solid gray;"
padding 15px에 margin 10px입니다.
}}}||
padding 15px에 margin 10px입니다. |
19.1.8. 요소의 넓이 강제 100%지정 막기[편집]
{{{#!wiki}}} 문법이 내부적으로 <div> 박스로 처리되는 관계로, 기본적으로 해당 스타일 내부의 요소의 넓이는 100%로 강제 설정됩니다. 이를 막으려면, display 속성을 table으로 설정하거나 width 속성을 정의하시면 됩니다.
{{{#!wiki style="border: 2px dotted #abcdef;"
속성 적용 안함
}}}
{{{#!wiki style="border: 2px dotted #abcdef;display:table;"
display:table
}}}
{{{#!wiki style="border: 2px dotted #abcdef;width:100px;"
width 100px
}}}
속성 적용 안함
display:table
width 100px
19.1.9. 넓이 및 높이[편집]
넓이 및 높이는
width 및 height 속성으로 설정할 수 있습니다.
{{{#!wiki style="width: 100px; height: 50px; border: 2px solid black;"
width 100px, height 500px
}}}
width 100px, height 500px
19.1.10. 그라디언트[편집]
박스에 그라디언트 속성을 정의합니다. 구버전 IE 등 일부 웹브라우저에서는 깨져 보일 수 있으므로,
background-color 속성과 병행하여 사용하는 것을 추천합니다. 다만 이러한 경우에는, 그라디언트 관련 속성이 뒤에 와야 우선권을 가집니다.19.1.10.1. 선형[편집]
background-image 속성에 linear-gradient(to 방향, 색1 퍼센트, 색2 퍼센트)의 값을 적용시킬 수 있습니다.또는, 값을 간소화하여
linear-gradient(to 방향, 색1, 색2)로 사용할 수 있습니다.색은 갯수 제한없이 사용 가능하며, 콤마(,)로 구분하여 색의 이름(white, black, blue 등), html 색 값(#ABCDEF 등) 또는 RGB 값(rgb(0,0,0) 또는 rgba(0,0,0,0.5))으로 쓸 수 있습니다.
{{{#!wiki style="background-image:linear-gradient(to right, #ABCDEF, #C0AAE1)"
#ABCDEF에서 #C0AAE1로 그라디언트!
}}}
#ABCDEF에서 #C0AAE1로 그라디언트!
19.1.10.2. 원형[편집]
background-image 속성에 radial-gradient 속성을 적용하시면 됩니다. 사용법은 선형 그라디언트와 같습니다. 다만, 방향의 값을 적용시키지 않습니다.
{{{#!wiki style="background-image:radial-gradient(#ABCDEF 40%, #C0AAE1 80%);height:100px;"
원형 그라디언트!
}}}
원형 그라디언트!
19.1.10.3. 정보상자에서의 활용[편집]
물론 그라디언트를 정보상자에 적용시키는 것도 가능합니다.
||<-2><:>{{{#!wiki style="background:linear-gradient(to right,skyblue,#abcdef);margin:-5px -10px;"
{{{#white 나무마크}}}}}}||
||<)>사용 엔진||[[the seed]]||
||<)>개발자||[[namu]],[[kasio]]||
19.1.11. 박스 중앙정렬[편집]
다음과 같이 박스를 중앙 정렬할 수 있습니다.
또는, 강제로 넓이를 지정하기보다는 유동적인 넓이를 적용하기 위해서 다음과 같이 할 수도 있습니다.
여기서 박스 넓이가 강제로 100%로 설정되는 현상을 방지하는 조치를 하는 점과
{{{#!wiki style="border:1px solid black;width:60px;margin: 0 auto;"
중앙정렬된 박스.
}}}
중앙정렬된 박스.
또는, 강제로 넓이를 지정하기보다는 유동적인 넓이를 적용하기 위해서 다음과 같이 할 수도 있습니다.
{{{#!wiki style="display:table;border:1px solid black;margin:0 auto;"
중앙정렬된 박스!
}}}
중앙정렬된 박스!
여기서 박스 넓이가 강제로 100%로 설정되는 현상을 방지하는 조치를 하는 점과
margin을 0 auto로 지정하였다는 점이 핵심입니다.19.1.12. 텍스트 중앙정렬[편집]
text-align 속성을 center로 설정하시면 됩니다.
{{{#!wiki style="border: 1px solid black;text-align:center"
중앙 정렬된 텍스트.
}}}
중앙 정렬된 텍스트.
19.2. 틀[편집]
HTML을 이용해 틀을 만들 수 있습니다. 알파위키에서 사용되는 틀의 형식은 다음과 같습니다.
orange - 주의 문구에 쓰입니다.
green - 잘 쓰이지 않습니다. 편집시의 주의할 사항을 적습니다.
red - 강한 경고에 쓰입니다.
#ABCDEF - 공식 문서에 쓰입니다.아니면 쓸 색깔이 생각나지 않을때(...)도 쓸 수 있습니다.
blue - 더 강력한 경고에 쓰입니다.
purple - 범죄와 같은 매우 강력한 경고에 쓰입니다.
{{{#!wiki style="border:1px solid #E0E0E0;border-left:3px solid 테두리색;box-shadow: 3px 3px 10px #B3B3B3;margin-right:10px;margin-left:10px;padding:12px"
{{{+1 제목}}}
내용}}}제목
내용
내용
orange - 주의 문구에 쓰입니다.
제목
내용
내용
green - 잘 쓰이지 않습니다. 편집시의 주의할 사항을 적습니다.
제목
내용
내용
red - 강한 경고에 쓰입니다.
제목
내용
내용
#ABCDEF - 공식 문서에 쓰입니다.
제목
내용
내용
blue - 더 강력한 경고에 쓰입니다.
제목
내용
내용
purple - 범죄와 같은 매우 강력한 경고에 쓰입니다.
19.2.1. 응용 형식[편집]
19.2.1.1. border 위로[편집]
다음과 같은 형식으로 border을 위로 올려놓을 수 있습니다. 앏은 틀에 사용하기에 유용합니다.
{{{#!wiki style="border:1px solid #E0E0E0;border-top:3px solid 테두리색;box-shadow: 3px 3px 10px #B3B3B3;margin-right:10px;margin-left:10px;padding:12px"
{{{+1 제목}}}
내용}}}제목
내용
내용
19.2.1.2. 나무위키 방식[편집]
{{{#!wiki style="border:1px solid gray;border-top:5px solid orange;padding:12px"
{{{+1 여기에 제목을 넣어 주세요.}}}[br][br]여기에 내용을 넣어 주세요.}}}
여기에 제목을 넣어 주세요.
여기에 내용을 넣어 주세요.
여기에 내용을 넣어 주세요.
출처
20. 분류[편집]
[[분류:분류명]]으로 문서에 맞는 분류를 적용할 수 있습니다.어떤 분류에 해당하는 문서를 찾고 싶으면, 그 분류에 해당하는 문서의 최하단의 분류명을 누르거나,
분류:분류명을 검색하면 그 분류에 해당하는 문서가 정리되어 있습니다.[[분류:분류명#blur]]로 특정 분류를 숨길 수 있습니다. 스포일러 방지에 유용한 기능이며, 마우스를 오버하면 분류가 표시됩니다.분류 문서로 링크하실 때는,
[[:분류:분류명]]을 입력하셔야 합니다.21. 문법 강조[편집]
해당 하는 프로그래밍 언어의 문법을 강조해서 표기합니다. 지원하는 언어는 C++ (cpp)와 C (csharp), CSS (css), Go (go), Java (java), JavaScript (javascript), JSON (json), 마크다운 (markdown), Objective-C (objectivec), Perl (perl), PHP (php), Python (python), Ruby (ruby), SQL (sql), TypeScript (typescript), XML (xml)입니다.
사용법:
예시:
코드는 여기에서 가져왔습니다.
사용법:
{{{#!syntax 언어명
코드
}}}예시:
const http = require('http');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');
res.end('Hello World\n');
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});코드는 여기에서 가져왔습니다.
22. 문법 무시[편집]
{{{내용}}}을 쓸 수 있습니다.또는, 문법의 적절한 부분에 역슬래시(\)를 넣어 주시면 됩니다.
구현방식 | 입력 | 출력 |
보통 | '''이런 것!''' | 이런 것! |
역슬래시 | '\'' 이런 것! ''' | '''이런 것!''' |
역슬래시 | '\'' 이런 것! '\'' | ''' 이런 것! ''' |
주의사항
- 볼드체와 같은 문법에는 작은 따옴표 3개 중 첫번째와 두번째 사이에 역슬래시를 삽입하여야 제대로 나옵니다. 이는 여는 문법과 닫는 문법을 구분하지 아니합니다.
- 역슬래시 (\)를 출력하시려면 역슬래시를 두번 입력하시면 됩니다.( \\ -> \) 혹은,
{{{#!html \}}}->\를 사용하세요. 전자를 추천드립니다.
23. 세로쓰기[편집]
문장 앞에
가로쓰기입니다.
|세로쓰기입니다.
|를 붙이세요.
가로쓰기입니다.
|세로쓰기입니다.
가로쓰기입니다.
|세로쓰기입니다.
24. 사용할만한 특수문자[편집]
【
】
·
■
●