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

< 도움말:위키 문법
편집토론역사
← 이전 편집
삼쩌모 (토론 | 기여)
사무관, 인터페이스 관리자, 관리자
22,182 편집
시각위키텍스트
 
(같은 사용자의 중간 판 72개는 보이지 않습니다)
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">{{부제| 3장 「스타일링」}}</span>}}
{{분류|도움말}}
{{분류|도움말}}
{{도움말}}{{위키 문법}}
{{도움말}}{{위키 문법}}
12번째 줄: 12번째 줄:
즉, 다음 두 표현은 같은 결과를 만듭니다.
즉, 다음 두 표현은 같은 결과를 만듭니다.


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


그러나 이곳에서는 CSS를 몰라도 익힐 수 있도록 하였습니다. 그러나 CSS나 the seed 문법 등에 익숙할수록 사용하기 편할 수는 있습니다.
=== 기본 문법 ===
앞서 한 번 설명했지만, [[틀:스타일]]은 <code><nowiki>{{스타일|</nowiki>{{c|##81B11F|스타일 구문}}<nowiki>}}</nowiki></code>과 같은 형태로 사용합니다.


=== 기본 문법 ===
스타일 구문을 쓸 때는 <code>속성-값</code> 형태로 씁니다. 이때, <code>속성</code>과 <code>값</code>은 하이픈(<code>-</code>)으로 구분하며, 여러 개의 스타일은 띄어쓰기로 구분합니다. 순서는 중요하지 않습니다.
앞서 한 번 설명했지만, [[틀:스타일]]은 <code><nowiki>{{스타일|속성-값 속성-값 …}}</nowiki></code>과 같은 형태로 사용합니다.


이때, <code>속성</code>과 <code>값</code>은 하이픈(<code>-</code>)으로 구분하며, 여러 개의 스타일은 띄어쓰기로 구분합니다. 순서는 중요하지 않습니다.
종합적으로 <code>&lt;span <nowiki>{{스타일|c-red bg-blue}}</nowiki>&gt;파란 배경 빨간 글자&lt;/span&gt;</code>처럼 쓸 수 있습니다.


== 색상 ==
== 색상 ==
=== 글씨 ===
=== 글씨 ===
글씨의 색상은 <code>c</code><ref>'''c'''olor</ref> 서식을 사용합니다.
글씨의 색상은 <code>c</code><ref>'''c'''olor</ref> 서식을 사용합니다. CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.


{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! 입력
! 입력
40번째 줄: 38번째 줄:
|}
|}


CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.
다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 <code>c-##000000</code>처럼 <code>#</code> 대신 <code>##</code>를 사용합니다. 이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 다크모드 대응을 사용하는 경우 반드시 '''6자리 색상 코드만''' 사용할 수 있습니다.<ref>alpha 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.</ref>


다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 <code>{{스타일|c-##000000}}</code>처럼 <code>#</code> 대신 <code>##</code>를 사용합니다.
{| class="wikitable" style="  white-space: nowrap; text-align: center;"
 
|- style="font-weight: 700; text-align: center;"
이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 다크모드 대응을 사용하는 경우 반드시 '''6자리 색상 코드만''' 사용할 수 있습니다.<ref>alpha 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.</ref>
! rowspan="2" | 입력
! colspan="2" | 출력
|-
! 라이트
! 다크
|-
| <code><nowiki>c-#0000ff</nowiki></code>
| rowspan=2 style="background: #fff;" | {{색|#0000ff|예시}}
| style="background: #1c1d1f;" | {{색|#0000ff|예시}}
|-
| <code><nowiki>c-##0000ff</nowiki></code>
| style="background: #1c1d1f;" | {{색|HSL(240, 100%, 75%)|예시}}
|}


=== 배경 색상 ===
=== 배경 ===
배경은 <code>bg</code><ref>'''b'''ack'''g'''round</ref>를 사용합니다.
배경은 <code>bg</code><ref>'''b'''ack'''g'''round</ref>를 사용합니다. 배경 색상 역시 <code>##</code> 표기를 사용하면 다크 모드에 대응됩니다.<ref>다크모드에서 글씨 색이 흰색일 때 대비를 높여줍니다.</ref>


{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! 입력
! 입력
! 출력
! 출력<ref>출력 란에 적용</ref>
|-
| <code><nowiki>bg-red</nowiki></code>
| style="background: red;" | 예시
|-
|-
| <code><nowiki>bg-#a0f0f0</nowiki></code>
| <code><nowiki>bg-#a0f0f0</nowiki></code>
| <span style="background: #a0f0f0;">예시</span>
| style="background: #a0f0f0;" | 예시
|}
|}


배경 색상 역시 <code>##</code> 표기를 사용하면 다크 모드에 대응됩니다.
{| class="wikitable" style="  white-space: nowrap; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! rowspan="2" | 입력
! colspan="2" | 출력
|-
! 라이트
! 다크
|-
| <code><nowiki>bg-#33aaff</nowiki></code>
| rowspan=2 style="background: #33aaff; color: #fff;" | 예시
| style="background: #33aaff; color: #fff;" | 예시
|-
| <code><nowiki>bg-##33aaff</nowiki></code>
| style="background: {{다크|#33aaff}}; color: #fff;" | 예시
|}


== 글자 관련 ==
== 글씨 ==
=== 크기 ===
글씨 크기는 <code>fs</code><ref>'''f'''ont '''s'''ize</ref> 서식을 사용합니다. px, pt, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.
글씨 크기는 <code>fs</code> 서식을 사용합니다. px, pt, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.


{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! 입력
! 입력
! 출력
! 출력<ref><code>span</code>에 적용</ref>
|-
| 기본값
| <span>예시</span>
|-
| <code><nowiki>fs-10px</nowiki></code>
| <span style="font-size: 10px;">예시</span>
|-
|-
| <code><nowiki>fs-18px</nowiki></code>
| <code><nowiki>fs-20px</nowiki></code>
| <span style="font-size: 18px;">예시</span>
| <span style="font-size: 20px;">예시</span>
|}
|}


=== 글자 굵기 ===
글씨 굵기는 <code>fw</code><ref>'''f'''ont '''w'''eight</ref> 서식을 사용합니다. <code>fw-normal</code>, <code>fw-bold</code> 처럼 사용하면 됩니다. 더 상세하게 조절하고 싶은 경우, 1 이상 1000 이하의 수를 입력할 수 있습니다. <code>400</code>는 일반적인 폰트 굵기, <code>700</code>는 볼드체입니다.
글자 굵기는 <code>fw</code> 서식을 사용합니다.


<pre>
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
{{스타일|fw-bold}}
|- style="font-weight: 700; text-align: center;"
{{스타일|fw-700}}
! 입력
</pre>
! 출력<ref><code>span</code>에 적용</ref>
|-
| 기본값
| rowspan="3" |<span>예시</span>
|-
| <code><nowiki>fw-normal</nowiki></code>
|-
| <code><nowiki>fw-400</nowiki></code>
|-
| <code><nowiki>fw-bold</nowiki></code>
| rowspan="2" |<span style="font-weight: bold;">예시</span>
|-
| <code><nowiki>fw-700</nowiki></code>
|}


== 여백 ==
== 여백 ==
=== 안쪽 여백 ===
=== 안쪽 여백 ===
안쪽 여백은 <code>p</code><ref>'''p'''adding</ref>, 또는 방향별로 <code>pt</code>, <code>pb</code>,  
안쪽 여백은 <code>p</code><ref>'''p'''adding</ref>, 또는 상하좌우 방향별로 <code>pt</code>, <code>pb</code>,  
<code>pl</code>, <code>pr</code>을 사용합니다. <code>px</code>, <code>py</code>를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.  
<code>pl</code>, <code>pr</code>을 사용합니다. <code>px</code>, <code>py</code>를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.  


안쪽 여백은 주로 표 칸에 사용합니다. 참고로, 표 각 칸의 기본 여백은 대략 상하 5px, 좌우 10px입니다.
안쪽 여백은 주로 표 칸에 사용합니다. 참고로, 표 각 칸의 기본 여백은 대략 상하 5px, 좌우 10px입니다.


{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! 입력
! 입력
! 출력
! 출력<ref>출력 란 속 표의 칸에 적용</ref>
|-
|-
| 기본값
| 기본값
99번째 줄: 143번째 줄:
|}
|}
|-
|-
| <code><nowiki>p-0px</nowiki></code><ref>표 셀에 적용했을 때</ref>
| <code><nowiki>p-0</nowiki></code>
|  
|  
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
105번째 줄: 149번째 줄:
|}
|}
|-
|-
| <code><nowiki>p-20px</nowiki></code><ref>표 셀에 적용했을 때</ref>
| <code><nowiki>p-20px</nowiki></code>
|  
|  
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
111번째 줄: 155번째 줄:
|}
|}
|-
|-
| <code><nowiki>pl-20px pb-0</nowiki></code><ref>표 셀에 적용했을 때</ref>
| <code><nowiki>pl-20px pb-0</nowiki></code>
|  
|  
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
119번째 줄: 163번째 줄:


=== 바깥 여백 ===
=== 바깥 여백 ===
바깥 여백은 <code>m</code>, <code>mt</code>, <code>mr</code>, <code>mb</code>, <code>ml</code>을 사용합니다.
바깥 여백은 <code>m</code><ref>'''m'''argin</ref>, <code>mt</code>, <code>mr</code>, <code>mb</code>, <code>ml</code>을 사용합니다. 역시 <code>mx</code>, <code>my</code>를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.  
역시 <code>mx</code>, <code>my</code>를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.
 
이때 <code>mx-auto</code>로 지정하면 좌우로 가운데에 정렬됩니다. 화면을 꽉 채우지 않는 표를 가운데 정렬할 때 주로 사용됩니다. 참고로, 표의 기본 여백은 상하 대략 15px이며, 좌우로는 바깥 여백이 없습니다.
 
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
! 입력
! 출력<ref>출력 란 속 표 자체에 적용</ref>
|-
| 기본값
|
{| class="wikitable"
| 예시
|}
|-
| <code><nowiki>m-0</nowiki></code>
|
{| class="wikitable" {{style|m-0}}
| 예시
|}
|-
| <code><nowiki>m-20px</nowiki></code>
|
{| class="wikitable" {{style|m-20px}}
| 예시
|}
|-
| <code><nowiki>ml-30px mb-0</nowiki></code>
|
{| class="wikitable" {{style|ml-30px mb-0}}
| 예시
|}
|-
| <code><nowiki>mx-auto</nowiki></code>
|
{| class="wikitable" {{style|mx-auto}}
| 예시
|}
|}


== 테두리 ==
== 테두리 ==
=== 기본 테두리 ===
테두리는 <code>bd</code> 서식을 사용합니다. <code>bd-2px-sld-red</code>와 같이 두께, 종류, 색상을 입력하면 됩니다. 여백과 동일하게 <code>bdt</code>, <code>bdb</code>, <code>bdl</code>, <code>bdr</code>으로 한쪽 테두리만 설정할 수 있습니다.
테두리는 <code>bd</code> 서식을 사용합니다.


<pre>
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
{{스타일|bd-2px-sld-red}}
|- style="font-weight: 700; text-align: center;"
</pre>
! 입력
! 출력<ref>출력 란 속 표 자체에 적용</ref>
|-
| 기본값
|
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
| 예시
|}
|-
| <code>bd-2px-sld-red</code>
|
{| class="wikitable" {{style|bd-2px-sld-red my-0 mx-auto}}
| 예시
|}
|-
| <code>bd-3px-db-blue</code>
|
{| class="wikitable" {{style|bd-3px-db-blue my-0 mx-auto}}
| 예시
|}
|-
| <code>bd-2px-dot-green</code>
|
{| class="wikitable" {{style|bd-2px-dot-green my-0 mx-auto}}
| 예시
|}
|-
| <code>bd-2px-dsh-violet</code>
|
{| class="wikitable" {{style|bd-2px-dsh-violet my-0 mx-auto}}
| 예시
|}
|}
 
== 크기 ==
요소의 크기를 직접 지정하고 싶을 때는 <code>w</code>와 <code>h</code> 등을 사용합니다. 표, 표의 칸, <code>div</code> 등에 주로 사용합니다. 단위로는 <code>px</code>, <code>%</code>, <code>em</code>, <code>rem</code> 등 CSS에서 허용하는 값을 그대로 사용할 수 있습니다.


테두리는 다음 요소들을 순서와 관계없이 조합합니다.
<code>w</code>와 <code>h</code>로는 각각 요소의 너비와 높이를 설정할 수 있으며, <code>minw</code>와 <code>maxw</code>, <code>minh</code>와 <code>maxh</code>로는 너비와 높이의 최소·최대를 설정할 수 있습니다.


* 두께 (예: <code>2px</code>)
이때, 표 등에서 <code>maxw-너비</code>와 <code>w-100%</code>를 함께 사용하면 큰 화면에서는 지정한 너비로, 작은 화면에서는 오른쪽으로 넘어가서 잘리지 않고 화면을 꽉 채우도록 할 수 있습니다.
* 종류 (sld, dsh, dot 등)
* 색상


=== 테두리 종류 ===
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
{| class="wikitable" style="margin-left:auto; margin-right:auto; text-align: center; white-space: nowrap; width: 100%;"
|- style="font-weight: 700; text-align: center;"
|- style="font-weight: 700; text-align: center;"
! 약어
! 입력
! 설명
! 출력<ref>출력 란 속 표 자체에 적용</ref>
|-
| 기본값
|
{| class="wikitable" style="margin: 0; margin-left: auto; margin-right: auto;"
| 예시
|}
|-
| <code><nowiki>w-100px</nowiki></code>
|
{| class="wikitable" style="width: 100px; margin: 0; margin-left: auto; margin-right: auto;"
| 예시
|}
|-
|-
| <code>sld</code> || 실선
| <code><nowiki>h-80px</nowiki></code>
|
{| class="wikitable" style="height: 80px; margin: 0; margin-left: auto; margin-right: auto;"
| 예시
|}
|}
 
== 정렬 ==
텍스트 정렬은 <code>ta</code> 서식을 사용합니다. <code>left</code>, <code>center</code>, <code>right</code>를 사용할 수 있습니다.
 
기본적으로 대부분 환경에서 글씨는 왼쪽에 정렬되어 있습니다. 하지만 표의 머리말은 기본적으로 가운데 정렬되어 있으며, 표나 HTML 태그로 감싸고 있는 개체가 있는 경우, 그 정렬을 따르도록 되어 있습니다.
 
{| class="wikitable" style=" text-align: center; white-space: nowrap;"
|- style="font-weight: 700; text-align: center;"
! 입력
! {{style|minw-60px}} | 출력<ref><code>span</code>에 적용</ref>
|-
|-
| <code>dsh</code> || 점선
| 기본값
| {{style|row-2 ta-left}} | <span>예시</span>
|-
| <code>ta-left</code>
|-
|-
| <code>dot</code> || 점 테두리
| <code>ta-center</code>
| {{style|ta-center}} | <span>예시</span>
|-
|-
| <code>db</code> || 이중선
| <code>ta-right</code>
| {{style|ta-right}} | <span>예시</span>
|}
|}


== 레이아웃 ==
== 서식 목록 ==
=== 정렬 ===
<div class="scrollabletable" style="padding: 3px 0 5px 0; overflow-x: auto; overflow-y: hidden; max-width: 100%; display: block;">
텍스트 정렬은 <code>ta</code> 서식을 사용합니다.
{| class="wikitable" style="white-space: nowrap; text-align: center;"
|- style="font-weight:700;"
! 서식
! style="min-width:70px;" | 설명
! 예시
! style="min-width:90px;" | 출력
|-
! colspan=4 |
|-
| <code>c</code>
| 글자 색상
| <code><nowiki>c-red</nowiki></code>
| <span style="color:red;">예시</span>


<pre>
|-
{{스타일|ta-left}}
{{스타일|ta-center}}
{{스타일|ta-right}}
</pre>


=== 표시 방식 ===
| <code>bg</code>
<code>dsp</code> 서식을 사용해 요소의 표시 방식을 바꿀 수 있습니다.
| 배경 색상
| <code><nowiki>bg-red</nowiki></code>
| <span style="background:red;">예시</span>


<pre>
|-
{{스타일|dsp-inline-block}}
! colspan="4" |
{{스타일|dsp-flex}}
|-
</pre>
| <code>fs</code>
| 글자 크기
| <code><nowiki>fs-20px</nowiki></code>
| <span style="font-size:20px;">예시</span>
|-
| <code>fw</code>
| 글자 굵기
| <code><nowiki>fw-bold</nowiki></code>
| <span style="font-weight:bold;">예시</span>
|-
! colspan="4" |
|-
| <code>p</code>
| 안쪽 여백
| <code><nowiki>p-20px</nowiki></code>
| rowspan=7 | -
|-
| <code>pt</code>
| 위 여백
| <code><nowiki>pt-10px</nowiki></code>
|-
| <code>pb</code>
| 아래 여백
| <code><nowiki>pb-10px</nowiki></code>
|-
| <code>pl</code>
| 왼쪽 여백
| <code><nowiki>pl-10px</nowiki></code>
|-
| <code>pr</code>
| 오른쪽 여백
| <code><nowiki>pr-10px</nowiki></code>
|-
| <code>px</code>
| 좌우 여백
| <code><nowiki>px-15px</nowiki></code>
|-
| <code>py</code>
| 상하 여백
| <code><nowiki>py-15px</nowiki></code>


== 주의사항 ==
|-
* 스타일은 '''필요한 만큼만''' 사용하는 것이 좋습니다.
! colspan="4" |
* 과도한 색상과 장식은 가독성을 해칠 수 있습니다.
|-
* 표에서는 칸 병합(<code>col</code>, <code>row</code>)과 스타일을 함께 사용할 때 구조가 깨지지 않도록 주의하세요.
| <code>m</code>
| 바깥 여백
| <code><nowiki>m-20px</nowiki></code>
| rowspan=7 | -
|-
| <code>mt</code>
| 위 바깥 여백
| <code><nowiki>mt-10px</nowiki></code>
|-
| <code>mb</code>
| 아래 바깥 여백
| <code><nowiki>mb-10px</nowiki></code>
|-
| <code>ml</code>
| 왼쪽 바깥 여백
| <code><nowiki>ml-10px</nowiki></code>
|-
| <code>mr</code>
| 오른쪽 바깥 여백
| <code><nowiki>mr-10px</nowiki></code>
|-
| <code>mx</code>
| 좌우 바깥 여백
| <code><nowiki>mx-auto</nowiki></code>
|-
| <code>my</code>
| 상하 바깥 여백
| <code><nowiki>my-20px</nowiki></code>


다음 장에서는 실제 문서에서 자주 쓰이는 스타일 조합과 활용 예제를 다룹니다.
|-
! colspan="4" |
|-
| <code>bd</code>
| 테두리
| <code><nowiki>bd-2px-sld-red</nowiki></code>
| <span style="border:2px solid red;">예시</span>
|-
| <code>bdt</code>
| 위 테두리
| <code><nowiki>bdt-2px-sld-blue</nowiki></code>
| <span style="border-top:2px solid blue;">예시</span>
|-
| <code>bdb</code>
| 아래 테두리
| <code><nowiki>bdb-2px-dot-green</nowiki></code>
| <span style="border-bottom:2px dotted green;">예시</span>
|-
| <code>bdl</code>
| 왼쪽 테두리
| <code><nowiki>bdl-2px-dsh-violet</nowiki></code>
| <span style="border-left:2px dashed violet;">예시</span>
|-
| <code>bdr</code>
| 오른쪽 테두리
| <code><nowiki>bdr-3px-db-black</nowiki></code>
| <span style="border-right:3px double black;">예시</span>
|-
! colspan="4" |
|-
| <code>w</code>
| 너비
| <code><nowiki>w-100px</nowiki></code>
| rowspan=6 | -
|-
| <code>h</code>
| 높이
| <code><nowiki>h-80px</nowiki></code>
|-
| <code>minw</code>
| 최소 너비
| <code><nowiki>minw-200px</nowiki></code>
|-
| <code>maxw</code>
| 최대 너비
| <code><nowiki>maxw-500px</nowiki></code>
|-
| <code>minh</code>
| 최소 높이
| <code><nowiki>minh-50px</nowiki></code>
|-
| <code>maxh</code>
| 최대 높이
| <code><nowiki>maxh-300px</nowiki></code>
 
|-
! colspan="4" |
|-
| <code>ta</code>
| 텍스트 정렬
| <code><nowiki>ta-left</nowiki></code>
| style="text-align:left;" | 예시
 
|}
</div>

2026년 1월 10일 (토) 14:58 기준 최신판

분류: 도움말
도움말
[ 펼치기 · 접기 ]
위키 문법
1장 「기초」 2장 「표」 3장 「스타일링」
4장 「응용」
개별 기능
보일 제목 틀 제작 파일 삽입
내표

개념

스타일이란?

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

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

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

기본 문법

앞서 한 번 설명했지만, 틀:스타일은 {{스타일|스타일 구문}}과 같은 형태로 사용합니다.

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

종합적으로 <span {{스타일|c-red bg-blue}}>파란 배경 빨간 글자</span>처럼 쓸 수 있습니다.

색상

글씨

글씨의 색상은 c[1] 서식을 사용합니다. CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.

입력 출력
c-red 예시
c-#2a6db0 예시

다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 c-##000000처럼 # 대신 ##를 사용합니다. 이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 다크모드 대응을 사용하는 경우 반드시 6자리 색상 코드만 사용할 수 있습니다.[2]

입력 출력
라이트 다크
c-#0000ff 예시 예시
c-##0000ff 예시

배경

배경은 bg[3]를 사용합니다. 배경 색상 역시 ## 표기를 사용하면 다크 모드에 대응됩니다.[4]

입력 출력[5]
bg-red 예시
bg-#a0f0f0 예시
입력 출력
라이트 다크
bg-#33aaff 예시 예시
bg-##33aaff 예시

글씨

글씨 크기는 fs[6] 서식을 사용합니다. px, pt, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.

입력 출력[7]
기본값 예시
fs-10px 예시
fs-20px 예시

글씨 굵기는 fw[8] 서식을 사용합니다. fw-normal, fw-bold 처럼 사용하면 됩니다. 더 상세하게 조절하고 싶은 경우, 1 이상 1000 이하의 수를 입력할 수 있습니다. 400는 일반적인 폰트 굵기, 700는 볼드체입니다.

입력 출력[9]
기본값 예시
fw-normal
fw-400
fw-bold 예시
fw-700

여백

안쪽 여백

안쪽 여백은 p[10], 또는 상하좌우 방향별로 pt, pb, pl, pr을 사용합니다. px, py를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.

안쪽 여백은 주로 표 칸에 사용합니다. 참고로, 표 각 칸의 기본 여백은 대략 상하 5px, 좌우 10px입니다.

입력 출력[11]
기본값
예시
p-0
예시
p-20px
예시
pl-20px pb-0
예시

바깥 여백

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

이때 mx-auto로 지정하면 좌우로 가운데에 정렬됩니다. 화면을 꽉 채우지 않는 표를 가운데 정렬할 때 주로 사용됩니다. 참고로, 표의 기본 여백은 상하 대략 15px이며, 좌우로는 바깥 여백이 없습니다.

입력 출력[13]
기본값
예시
m-0
예시
m-20px
예시
ml-30px mb-0
예시
mx-auto
예시

테두리

테두리는 bd 서식을 사용합니다. bd-2px-sld-red와 같이 두께, 종류, 색상을 입력하면 됩니다. 여백과 동일하게 bdt, bdb, bdl, bdr으로 한쪽 테두리만 설정할 수 있습니다.

입력 출력[14]
기본값
예시
bd-2px-sld-red
예시
bd-3px-db-blue
예시
bd-2px-dot-green
예시
bd-2px-dsh-violet
예시

크기

요소의 크기를 직접 지정하고 싶을 때는 w와 h 등을 사용합니다. 표, 표의 칸, div 등에 주로 사용합니다. 단위로는 px, %, em, rem 등 CSS에서 허용하는 값을 그대로 사용할 수 있습니다.

w와 h로는 각각 요소의 너비와 높이를 설정할 수 있으며, minw와 maxw, minh와 maxh로는 너비와 높이의 최소·최대를 설정할 수 있습니다.

이때, 표 등에서 maxw-너비와 w-100%를 함께 사용하면 큰 화면에서는 지정한 너비로, 작은 화면에서는 오른쪽으로 넘어가서 잘리지 않고 화면을 꽉 채우도록 할 수 있습니다.

입력 출력[15]
기본값
예시
w-100px
예시
h-80px
예시

정렬

텍스트 정렬은 ta 서식을 사용합니다. left, center, right를 사용할 수 있습니다.

기본적으로 대부분 환경에서 글씨는 왼쪽에 정렬되어 있습니다. 하지만 표의 머리말은 기본적으로 가운데 정렬되어 있으며, 표나 HTML 태그로 감싸고 있는 개체가 있는 경우, 그 정렬을 따르도록 되어 있습니다.

입력 출력[16]
기본값 예시
ta-left
ta-center 예시
ta-right 예시

서식 목록

서식 설명 예시 출력
c 글자 색상 c-red 예시
bg 배경 색상 bg-red 예시
fs 글자 크기 fs-20px 예시
fw 글자 굵기 fw-bold 예시
p 안쪽 여백 p-20px -
pt 위 여백 pt-10px
pb 아래 여백 pb-10px
pl 왼쪽 여백 pl-10px
pr 오른쪽 여백 pr-10px
px 좌우 여백 px-15px
py 상하 여백 py-15px
m 바깥 여백 m-20px -
mt 위 바깥 여백 mt-10px
mb 아래 바깥 여백 mb-10px
ml 왼쪽 바깥 여백 ml-10px
mr 오른쪽 바깥 여백 mr-10px
mx 좌우 바깥 여백 mx-auto
my 상하 바깥 여백 my-20px
bd 테두리 bd-2px-sld-red 예시
bdt 위 테두리 bdt-2px-sld-blue 예시
bdb 아래 테두리 bdb-2px-dot-green 예시
bdl 왼쪽 테두리 bdl-2px-dsh-violet 예시
bdr 오른쪽 테두리 bdr-3px-db-black 예시
w 너비 w-100px -
h 높이 h-80px
minw 최소 너비 minw-200px
maxw 최대 너비 maxw-500px
minh 최소 높이 minh-50px
maxh 최대 높이 maxh-300px
ta 텍스트 정렬 ta-left 예시
  1. ↑ color
  2. ↑ alpha 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.
  3. ↑ background
  4. ↑ 다크모드에서 글씨 색이 흰색일 때 대비를 높여줍니다.
  5. ↑ 출력 란에 적용
  6. ↑ font size
  7. ↑ span에 적용
  8. ↑ font weight
  9. ↑ span에 적용
  10. ↑ padding
  11. ↑ 출력 란 속 표의 칸에 적용
  12. ↑ margin
  13. ↑ 출력 란 속 표 자체에 적용
  14. ↑ 출력 란 속 표 자체에 적용
  15. ↑ 출력 란 속 표 자체에 적용
  16. ↑ span에 적용
라이선스를 별도로 명시하지 않은 세계관이나 문서는
CC-BY-SA 4.0에 의해 이용하실 수 있습니다.
제작한 세계관이나 문서의 저작권은 각 기여자에게 주어집니다.
무단 전재 또는 복제는 명백한 저작권 침해이며 법적 책임을 물 수 있습니다.
상세한 내용은 쩌모위키:라이선스를 참고하십시오.
Powered by Mediawiki,
Designed by Vierthalb.