도움말:위키 문법/스타일링: 두 판 사이의 차이

2026년 1월 10일 (토) 12:36 판

도움말

[ 펼치기 · 접기 ]

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

개념

스타일이란?

앞선 장들에서 HTML 태그와 간단한 스타일링을 이미 사용해 보았습니다. 이 장에서는 위키에서 제공하는 틀:스타일 틀을 이용해, 복잡한 CSS를 직접 쓰지 않고도 다양한 시각적 표현을 하는 방법을 설명합니다.

스타일 틀은 HTML 태그의 style 속성 안에 들어가는 CSS를 간단한 서식으로 압축한 것입니다. 즉, 다음 두 표현은 같은 결과를 만듭니다.

<span style="color: red; background: blue;">예시</span>
<span {{스타일|c-red bg-blue}}>예시</span>

그러나 이곳에서는 CSS를 몰라도 익힐 수 있도록 하였습니다. 그러나 CSS나 the seed 문법 등에 익숙할수록 사용하기 편할 수는 있습니다.

기본 문법

앞서 한 번 설명했지만, 틀:틀은 다음과 같은 형태로 사용합니다.

{{스타일|속성-값 속성-값 …}}

이때, 속성과 값은 하이픈(-)으로 구분하며, 여러 개의 스타일은 띄어쓰기로 구분합니다. 순서는 중요하지 않습니다.

색상

글자 색상

글자 색상은 c 서식을 사용합니다.

입력	출력
`{{스타일\|c-red}}`	예시
`{{스타일\|c-#2a6db0}}`	예시

CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.

다크 모드 대응 색상

다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 # 대신 ##를 사용합니다.

{{스타일|c-##000000}}

이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 반드시 6자리 색상 코드만 사용할 수 있습니다.

배경 색상

배경 색상은 bg 또는 bgc를 사용합니다.

입력	출력
`{{스타일\|bg-#a0f0f0}}`	예시

배경 색상 역시 ## 표기를 사용하면 다크 모드에 대응됩니다.

글자 관련

글자 크기

글자 크기는 fs 서식을 사용합니다.

입력	출력
`{{스타일\|fs-18px}}`	예시

px, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.

글자 굵기

글자 굵기는 fw 서식을 사용합니다.

{{스타일|fw-bold}}
{{스타일|fw-700}}

여백

안쪽 여백 (padding)

안쪽 여백은 p, 또는 방향별로 pt, pr, pb, pl을 사용합니다.

서식	설명
`p`	전체 여백
`px`	좌우 여백
`py`	상하 여백

바깥 여백 (margin)

바깥 여백은 m, mt, mr, mb, ml을 사용합니다. mx, my를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.

테두리

기본 테두리

테두리는 bd 서식을 사용합니다.

{{스타일|bd-2px-sld-red}}

테두리는 다음 요소들을 순서와 관계없이 조합합니다.

두께 (예: 2px)
종류 (sld, dsh, dot 등)
색상

테두리 종류

약어	설명
`sld`	실선
`dsh`	점선
`dot`	점 테두리
`db`	이중선

레이아웃

정렬

텍스트 정렬은 ta 서식을 사용합니다.

{{스타일|ta-left}}
{{스타일|ta-center}}
{{스타일|ta-right}}

표시 방식

dsp 서식을 사용해 요소의 표시 방식을 바꿀 수 있습니다.

{{스타일|dsp-inline-block}}
{{스타일|dsp-flex}}

주의사항

스타일은 필요한 만큼만 사용하는 것이 좋습니다.
과도한 색상과 장식은 가독성을 해칠 수 있습니다.
표에서는 칸 병합(col, row)과 스타일을 함께 사용할 때 구조가 깨지지 않도록 주의하세요.

다음 장에서는 실제 문서에서 자주 쓰이는 스타일 조합과 활용 예제를 다룹니다.

@@ 1번째 줄: / 1번째 줄: @@
-{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법<span style="display: block">{{부제|4장 「스타일링」}}</span>}}
+{{DISPLAYTITLE:<span class="mw-page-title-namespace">도움말</span>:위키 문법<span style="display: block">{{부제| 4장 「스타일링」}}</span>}}
 {{분류|도움말}}
 {{도움말}}{{위키 문법}}
@@ 5번째 줄: / 5번째 줄: @@
 == 개념 ==
-=== 스타일 틀 ===
+=== 스타일이란? ===
-[[틀:스타일]]은 HTML 태그의 <code>style</code> 속성에 들어갈 CSS를 간결한 약어 형태로 작성할 수 있게 해주는 틀입니다.
+앞선 장들에서 HTML 태그와 간단한 스타일링을 이미 사용해 보았습니다.
-기본적인 사용법은 다음과 같습니다.
+이 장에서는 위키에서 제공하는 [[틀:스타일]] 틀을 이용해, 복잡한 CSS를 직접 쓰지 않고도 다양한 시각적 표현을 하는 방법을 설명합니다.
-<code><nowiki>{{스타일|서식}}</nowiki></code>
+스타일 틀은 HTML 태그의 <code>style</code> 속성 안에 들어가는 CSS를 간단한 서식으로 압축한 것입니다.
+즉, 다음 두 표현은 같은 결과를 만듭니다.
-여기서 서식은 <code>속성-값</code> 형태로 작성하며, 여러 개를 사용할 경우 띄어쓰기로 구분합니다.
+<pre>
+<span style="color: red; background: blue;">예시</span>
+<span {{스타일|c-red bg-blue}}>예시</span>
+</pre>
-종합하면 다음과 같이 사용할 수 있습니다.
+그러나 이곳에서는 CSS를 몰라도 익힐 수 있도록 하였습니다. 그러나 CSS나 the seed 문법 등에 익숙할수록 사용하기 편할 수는 있습니다.
-<code>&lt;span <nowiki>{{스타일|c-red fs-18px}}</nowiki>&gt;예시&lt;/span&gt;</code>
+=== 기본 문법 ===
+앞서 한 번 설명했지만, {{틀|스타일}}은 다음과 같은 형태로 사용합니다.
-== 스타일 서식 ==
+<pre>
-=== 기본 서식 ===
+{{스타일|속성-값 속성-값 …}}
-자주 사용하는 서식 몇 가지를 먼저 소개합니다.
+</pre>
-{| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%; text-align: center;"
+이때, <code>속성</code>과 <code>값</code>은 하이픈(<code>-</code>)으로 구분하며, 여러 개의 스타일은 띄어쓰기로 구분합니다. 순서는 중요하지 않습니다.
-|- style="font-weight: 700;"
-! 서식
+== 색상 ==
-! 설명
+=== 글자 색상 ===
-! 예시
+글자 색상은 <code>c</code> 서식을 사용합니다.
-! 출력<ref><code>span</code>에 적용</ref>
+{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
+|- style="font-weight: 700; text-align: center;"
+! 입력
+! 출력
 |-
-| <code>c</code> || 글자 색상 || <code><nowiki>{{스타일|c-red}}</nowiki></code> || <span style="color:red;">예시</span>
+| <code><nowiki>{{스타일|c-red}}</nowiki></code>
+| <span style="color: red;">예시</span>
 |-
-| <code>bg</code> || 배경 || <code><nowiki>{{스타일|bg-#a0f0f0}}</nowiki></code> || <span style="background:#a0f0f0;">예시</span>
+| <code><nowiki>{{스타일|c-#2a6db0}}</nowiki></code>
+| <span style="color: #2a6db0;">예시</span>
+|}
+CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.
+=== 다크 모드 대응 색상 ===
+다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다.
+이럴 때는 색상 코드 앞에 <code>#</code> 대신 <code>##</code>를 사용합니다.
+<pre>
+{{스타일|c-##000000}}
+</pre>
+이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다.
+단, 반드시 6자리 색상 코드만 사용할 수 있습니다.
+=== 배경 색상 ===
+배경 색상은 <code>bg</code> 또는 <code>bgc</code>를 사용합니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
+|- style="font-weight: 700; text-align: center;"
+! 입력
+! 출력
 |-
-| <code>fs</code> || 글자 크기 || <code><nowiki>{{스타일|fs-20px}}</nowiki></code> || <span style="font-size:20px;">예시</span>
+| <code><nowiki>{{스타일|bg-#a0f0f0}}</nowiki></code>
-|-
+| <span style="background: #a0f0f0;">예시</span>
-| <code>fw</code> || 글자 굵기 || <code><nowiki>{{스타일|fw-700}}</nowiki></code> || <span style="font-weight:700;">예시</span>
 |}
-=== 여백 ===
+배경 색상 역시 <code>##</code> 표기를 사용하면 다크 모드에 대응됩니다.
-padding과 margin은 축 방향 약어를 함께 제공합니다.
+== 글자 관련 ==
+=== 글자 크기 ===
+글자 크기는 <code>fs</code> 서식을 사용합니다.
-{| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%; text-align: center;"
+{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
-|- style="font-weight: 700;"
+|- style="font-weight: 700; text-align: center;"
-! 서식
+! 입력
-! 설명
-! 예시
 ! 출력
 |-
-| <code>p</code> || 안쪽 여백 || <code><nowiki>{{스타일|p-10px}}</nowiki></code> || <span style="padding:10px; background:#eee;">예시</span>
+| <code><nowiki>{{스타일|fs-18px}}</nowiki></code>
-|-
+| <span style="font-size: 18px;">예시</span>
-| <code>px</code> || 좌우 여백 || <code><nowiki>{{스타일|px-20px}}</nowiki></code> || <span style="padding-left:20px; padding-right:20px; background:#eee;">예시</span>
-|-
-| <code>py</code> || 상하 여백 || <code><nowiki>{{스타일|py-10px}}</nowiki></code> || <span style="padding-top:10px; padding-bottom:10px; background:#eee;">예시</span>
 |}
-=== 테두리 ===
+px, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.
-테두리는 <code>bd</code> 계열 서식을 사용하며, 한 번에 여러 요소를 지정합니다.
-형식은 다음과 같습니다.
+=== 글자 굵기 ===
+글자 굵기는 <code>fw</code> 서식을 사용합니다.
-<code>bd-두께-종류-색상</code>
+<pre>
+{{스타일|fw-bold}}
+{{스타일|fw-700}}
+</pre>
-{| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%; text-align: center;"
+== 여백 ==
-|- style="font-weight: 700;"
+=== 안쪽 여백 (padding) ===
+안쪽 여백은 <code>p</code>, 또는 방향별로 <code>pt</code>, <code>pr</code>, <code>pb</code>, <code>pl</code>을 사용합니다.
+{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
+|- style="font-weight: 700; text-align: center;"
 ! 서식
 ! 설명
-! 예시
-! 출력
 |-
-| <code>bd</code> || 전체 테두리 || <code><nowiki>{{스타일|bd-2px-sld-red}}</nowiki></code> || <span style="border:2px solid red;">예시</span>
+| <code>p</code> || 전체 여백
+|-
+| <code>px</code> || 좌우 여백
 |-
-| <code>bdt</code> || 위쪽 테두리 || <code><nowiki>{{스타일|bdt-4px-dsh-blue}}</nowiki></code> || <span style="border-top:4px dashed blue;">예시</span>
+| <code>py</code> || 상하 여백
 |}
-종류에는 <code>sld</code>(solid), <code>dsh</code>(dashed), <code>dot</code>(dotted) 등이 있습니다.
+=== 바깥 여백 (margin) ===
+바깥 여백은 <code>m</code>, <code>mt</code>, <code>mr</code>, <code>mb</code>, <code>ml</code>을 사용합니다.
+<code>mx</code>, <code>my</code>를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.
+== 테두리 ==
+=== 기본 테두리 ===
+테두리는 <code>bd</code> 서식을 사용합니다.
+<pre>
+{{스타일|bd-2px-sld-red}}
+</pre>
+테두리는 다음 요소들을 순서와 관계없이 조합합니다.
-=== 색상 확장 ==
+* 두께 (예: <code>2px</code>)
-글자 색이나 배경 색을 지정할 때 <code>#</code> 대신 <code>##</code>를 사용하면 다크 모드에 대응됩니다.
+* 종류 (sld, dsh, dot 등)
-이 방식은 6자리 색상 코드만 지원합니다.
+* 색상
-{| class="wikitable" style="margin-left:auto; margin-right:auto; white-space: nowrap; width: 100%; text-align: center;"
+=== 테두리 종류 ===
-|- style="font-weight: 700;"
+{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
-! 입력
+|- style="font-weight: 700; text-align: center;"
-! 라이트 / 다크 모드 출력
+! 약어
+! 설명
+|-
+| <code>sld</code> || 실선
+|-
+| <code>dsh</code> || 점선
+|-
+| <code>dot</code> || 점 테두리
 |-
-| <code><nowiki>{{스타일|c-##0000ff}}</nowiki></code>
+| <code>db</code> || 이중선
-| <span style="color:#0000ff;">라이트</span> / <span style="color:#7faaff;">다크</span>
 |}
-=== 변수와 값 묶기 ===
+== 레이아웃 ==
-값 앞에 <code>$</code>를 붙이면 CSS 변수로 처리됩니다.
+=== 정렬 ===
+텍스트 정렬은 <code>ta</code> 서식을 사용합니다.
-<code><nowiki>{{스타일|c-$main}}</nowiki></code>
+<pre>
-→ <code>color: var(--main);</code>
+{{스타일|ta-left}}
+{{스타일|ta-center}}
+{{스타일|ta-right}}
+</pre>
-또한 값이 공백을 포함하는 경우 <code>&lt; &gt;</code>로 묶을 수 있습니다.
+=== 표시 방식 ===
+<code>dsp</code> 서식을 사용해 요소의 표시 방식을 바꿀 수 있습니다.
-<code><nowiki>{{스타일|ff-<Noto Sans KR>}}</nowiki></code>
+<pre>
+{{스타일|dsp-inline-block}}
-== 표에서의 사용 ==
+{{스타일|dsp-flex}}
-표에서는 [[도움말:위키 문법/표|2장]]에서 설명한 방식 그대로 사용할 수 있습니다.
+</pre>
-{| class="wikitable" {{스타일|bd-2px-sld-##cccccc}}
-! {{스타일|c-white bg-##333333 col-2}} | 제목
-|-
-| 내용
-| 내용
-|}
-== 정리 ==
+== 주의사항 ==
-* <code>{{스타일}}</code>은 CSS를 간단히 쓰기 위한 틀입니다.
+* 스타일은 '''필요한 만큼만''' 사용하는 것이 좋습니다.
-* 서식은 <code>속성-값</code> 형태이며 띄어쓰기로 구분합니다.
+* 과도한 색상과 장식은 가독성을 해칠 수 있습니다.
-* <code>##색상</code>은 다크 모드 대응 색상입니다.
+* 표에서는 칸 병합(<code>col</code>, <code>row</code>)과 스타일을 함께 사용할 때 구조가 깨지지 않도록 주의하세요.
-* <code>col</code>, <code>row</code>는 표 병합에 사용합니다.
-* 복잡한 CSS는 HTML의 <code>style</code> 속성을 직접 써도 됩니다.
-필요에 따라 간결함과 가독성 중 적절한 쪽을 선택해 사용하세요.
+다음 장에서는 실제 문서에서 자주 쓰이는 스타일 조합과 활용 예제를 다룹니다.