도움말:위키 문법 4장 「스타일링」

도움말

[ 펼치기 · 접기 ]

위키 문법
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 색상 코드를 모두 사용할 수 있습니다.

다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 style="color:light-dark(#000000, HSL(37, 10%, 74%));"처럼 # 대신 ##를 사용합니다.

이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 다크모드 대응을 사용하는 경우 반드시 6자리 색상 코드만 사용할 수 있습니다.^[1]

배경 색상

배경은 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)과 스타일을 함께 사용할 때 구조가 깨지지 않도록 주의하세요.

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

↑ alpha 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.

[1] 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.

[1]