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

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

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

배경

배경은 bg를 사용합니다.

입력	출력
bg-#a0f0f0	예시

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

글씨

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

입력	출력
기본값	예시
fs-18px	예시

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

여백

안쪽 여백

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

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

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

바깥 여백

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

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

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

테두리

기본 테두리

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

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

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

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

테두리 종류

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

레이아웃

정렬

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

표시 방식

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

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