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

← 이전 편집 다음 편집 →

시각위키텍스트

2025년 11월 29일 (토) 19:17 판

분류: 도움말

도움말

[ 펼치기 · 접기 ]

틀:위키 문법 요약

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

개념

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

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

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

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

스타일을 적용할 때 HTML 태그 중 여는 태그에 틀:스타일을 {{스타일|스타일 구문}}과 같이 사용합니다.

스타일 구문을 쓸 때는 속성-값 형태로 쓰며, 띄어쓰기로 구분합니다.
종합적으로 <span {{스타일|c-red bg-blue}}>파란 배경 빨간 글자</span>처럼 쓸 수 있습니다.

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

@@ 7번째 줄: / 7번째 줄: @@
 == 개념 ==
-{{참고|HTML에 대한 심층적인 내용은 [[도움말:위키 문법/HTML|3장 「HTML」]]에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.}}
+{{참고|HTML에 대한 심층적인 내용은 [[도움말:위키 문법/HTML/요약|3장 「HTML」]]에서 다룹니다. 이곳에서는 뒤에 내용을 이해할 수 있도록 개념만 설명하고 있습니다.}}
-{{참고|CSS에 대한 심층적인 내용은 [[도움말:위키 문법/CSS|4장 「CSS」]]에서 다룹니다.}}
+{{참고|CSS에 대한 심층적인 내용은 [[도움말:위키 문법/스타일링/요약|4장 「스타일링」]]에서 다룹니다.}}
 HTML 태그는 <code><태그></code>로 열고 <code></태그></code>로 닫는 형태이며, '''내용을 꾸미거나 역할을 부여'''합니다.
 * 다음 두 개의 태그를 소개합니다.
-** <code>span</code>(글자 선택)
+** <code>span</code>(글자)
 ** <code>div</code>(박스)
 * 속성<sup>attribute</sup>을 부여할 때 여는 태그에 <code><nowiki><태그 속성="값"></태그></nowiki></code>처럼 부여합니다.
-CSS는 '''스타일을 지정'''합니다. 인라인 CSS는 <code>style</code> 속성 안에 <code>속성: 값;</code> 형태로 작성합니다.
+스타일을 적용할 때 HTML 태그 중 여는 태그에 [[틀:스타일]]을 <code><nowiki>{{스타일|</nowiki>{{색|{{adt|#81B11F}}|스타일 구문}}<nowiki>}}</nowiki></code>과 같이 사용합니다.
-* 다음 세 개의 속성<sup>property</sup>을 소개합니다.
+* 스타일 구문을 쓸 때는 <code>속성-값</code> 형태로 쓰며, 띄어쓰기로 구분합니다.
+* 종합적으로 <code>&lt;span <nowiki>{{스타일|c-red bg-blue}}</nowiki>&gt;파란 배경 빨간 글자&lt;/span&gt;</code>처럼 쓸 수 있습니다.
 {| class="wikitable" style="margin-left:auto; margin-right:auto;  white-space: nowrap; border: #81B11F 2px solid;"
 |- style="background-color: #81b11f; color: #fff; font-weight: 700; text-align: center;"
-| 속성
+| 서식
 | 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>
+| <code>c</code> || 글자 색상 || <code><nowiki>{{스타일|c-red}}</nowiki></code>  || <span style="color: red;">예시</span>
 |-
-| <code>background</code> || 배경 색상 || <code>background: #a0f0f0;</code> || <span style="background: #a0f0f0;">예시</span>
+| <code>bg</code> || 배경 색상 || <code><nowiki>{{스타일|bg-#a0f0f0}}</nowiki></code> || <span style="background: #a0f0f0;">예시</span>
 |-
-| <code>font-size</code> || 글자 크기 || <code>font-size: 18px;</code> || <span style="font-size: 18px;">예시</span>
+| <code>fs</code> || 글자 크기 || <code><nowiki>{{스타일|fs-18px}}</nowiki></code> || <span style="font-size: 18px;">예시</span>
 |}