도움말:위키 문법 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^[1] 서식을 사용합니다.

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

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

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

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

배경

배경은 bg^[3]를 사용합니다.

입력	출력
`bg-#a0f0f0`	예시

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

글씨

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

입력	출력
`fs-18px`	예시

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

여백

안쪽 여백

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

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

입력 출력

기본값

예시

p-0^[7]

예시

p-20px^[8]

예시

pl-20px pb-0^[9]

예시

바깥 여백

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

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

입력 출력

기본값

예시

m-0^[11]

예시

m-20px^[12]

예시

ml-20px mb-0^[13]

예시

mx-auto^[14]

예시

테두리

기본 테두리

테두리는 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}}

↑ color
↑ alpha 값이 포함된 8자리나, 축약형 3자리, 4자리 등 모두 사용이 불가능합니다.
↑ background
↑ font size
↑ font weight
↑ padding
↑ 표 셀에 적용했을 때
↑ 표 셀에 적용했을 때
↑ 표 셀에 적용했을 때
↑ margin
↑ 표 자체에 적용했을 때
↑ 표 자체에 적용했을 때
↑ 표 자체에 적용했을 때
↑ 표 자체에 적용했을 때

[1] r

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

[3] round

[4] t size

[5] t weight

[6] ↑ padding

[7] 표 셀에 적용했을 때

[8] 표 셀에 적용했을 때

[9] 표 셀에 적용했을 때

[10] rgin

[11] 표 자체에 적용했을 때

[12] 표 자체에 적용했을 때

[13] 표 자체에 적용했을 때

[14] 표 자체에 적용했을 때

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]

[12]

[13]

[14]