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

← 이전 편집 다음 편집 →

시각위키텍스트

2025년 11월 29일 (토) 15:44 판

분류: 도움말

도움말

[ 펼치기 · 접기 ]

틀:위키 문법 요약

📘 이 문서는 요약판입니다. 상세한 설명은 1장 「기초」 전체 문서를 참고하세요.

개념

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

CSS에 대한 심층적인 내용은 4장 「CSS」에서 다룹니다.

HTML 태그는 <태그>로 열고 </태그>로 닫는 형태이며, 내용을 꾸미거나 역할을 부여합니다.

다음 두 개의 태그를 소개합니다.
- span(글자 선택)
- div(박스)
속성^attribute을 부여할 때 여는 태그에 <태그 속성="값"></태그>처럼 부여합니다.

CSS는 스타일을 지정합니다. 인라인 CSS는 style 속성 안에 속성: 값; 형태로 작성합니다.

다음 세 개의 속성^property을 소개합니다.

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

글자 서식

기본적 서식은 다음과 같습니다.

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

간단히 색을 넣으려면 {{색|색상|문구}}을 사용하실 수 있습니다.
- 다크 모드 대응은 {{자동다크글씨|#000000}}처럼 사용합니다.

입력	출력
`{{색\|red\|빨강}}`	빨강
`{{색\|#2a6db0\|파랑}}`	파랑
`{{색\|{{자동다크글씨\|#2a6db0}}\|파랑}}`	파랑
기기를 다크모드로 전환해보세요!

내용

문단을 나누려면 두 번 개행하면 됩니다.

한 줄만 띄우면 줄바꿈은 되지 않고, 대신 같은 문단 안에서 연결됩니다.
문단 안에서 줄바꿈할 때 <br>를 사용합니다.

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

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

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

기본적인 링크는 [[문서]]나 [[문서|표시]]로 씁니다.

색상을 부여하거나 ({{색링크|문서|색상|표시}})
외부로 연결할 수도 있습니다. ([URL 제목])
- 나무위키에 링크하는 경우에는 {{나무연결|문서}}를 사용합니다.

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

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

틀

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

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

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

틀은 {{틀이름|값|이름=값}} 형태로 사용합니다.
각 틀의 사용법은 틀:이름 문서에서 확인합니다.

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

[1] span에 적용했을 때

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

[1]

[2]

@@ 18번째 줄: / 18번째 줄: @@
 * 다음 세 개의 속성<sup>property</sup>을 소개합니다.
-{| class="wikitable"
+{| class="wikitable" style="width: 100%; border: #81B11F 2px solid;"
-|-
+|- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
-! 속성 !! 설명 !! 예시 !! 출력<ref><code>span</code>에 적용했을 때</ref>
+| 속성
+| style="min-width: 50px;" | 설명
+| 예시
+| style="min-width: 70px;" | 출력<ref><code>span</code>에 적용했을 때</ref>
 |-
 | <code>color</code> || 글자 색상 || <code>color: red;</code>  || <span style="color: red;">예시</span>
@@ 31번째 줄: / 34번째 줄: @@
 == 글자 서식 ==
 기본적 서식은 다음과 같습니다.
+{| class="wikitable"style="width: 100%; border: #81B11F 2px solid;"
-{| class="wikitable"
+|- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
-! 입력 !! 출력
+| 입력 || 출력
 |-
-| <code><nowiki>'''굵게'''</nowiki></code> || '''굵게'''
+| width=50% | <code><nowiki>'''굵게'''</nowiki></code> || '''굵게'''
 |-
 | <code><nowiki>''기울이기''</nowiki></code> || ''기울이기''
@@ 47번째 줄: / 50번째 줄: @@
 ** 다크 모드 대응은 <code><nowiki>{{자동다크글씨|#000000}}</nowiki></code>처럼 사용합니다.
-{| class="wikitable"
+{| class="wikitable" style="width: 100%; border: #81B11F 2px solid;"
-! 입력 !! 출력
+|- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
+| 입력 || 출력
 |-
-| <code><nowiki>{{색|red|빨강}}</nowiki></code> || {{색|red|빨강}}
+| width=50% | <code><nowiki>{{색|red|빨강}}</nowiki></code> || {{색|red|빨강}}
 |-
 | <code><nowiki>{{색|#2a6db0|파랑}}</nowiki></code> || {{색|#2a6db0|파랑}}
@@ 64번째 줄: / 68번째 줄: @@
 * 문단 안에서 줄바꿈할 때 <code><nowiki><br></nowiki></code>를 사용합니다.
-{| class="wikitable"
+{| class="wikitable" style="width: 100%; border: #81B11F 2px solid;"
-|-
+|- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
-! 두 번 개행 !! br 태그 사용
+| 두 번 개행 || br 태그 사용
 |-
-| style="line-height: 2;" | 동해 물과 백두산이<br>마르고 닳도록
+| width=50% style="line-height: 2;" | 동해 물과 백두산이<br>마르고 닳도록
-| 동해 물과 백두산이<br>마르고 닳도록
+| width=50% | 동해 물과 백두산이<br>마르고 닳도록
 |}
@@ 83번째 줄: / 87번째 줄: @@
 ** 나무위키에 링크하는 경우에는 <code><nowiki>{{나무연결|문서}}</nowiki></code>를 사용합니다.
-{| class="wikitable"
+{| class="wikitable" style="width: 100%; border: #81B11F 2px solid;"
-|-
+|- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
-! 입력 !! 출력
+| 입력 || 출력
 |-
-| <code><nowiki>[[제21대 대통령 선거]]</nowiki></code> || [[제21대 대통령 선거]]
+| width=50% | <code><nowiki>[[제21대 대통령 선거]]</nowiki></code> || [[제21대 대통령 선거]]
 |-
 | <code><nowiki>[[제21대 대통령 선거|21대 대선]]</nowiki></code> || [[제21대 대통령 선거|21대 대선]]