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

분류: 도움말

도움말
[ 펼치기 · 접기 ] 종합 길라잡이 문서의 종류 공용 외적 실용 메타 동음이의 └ 세계 내적 문서가 아닌 문서 ┘ ┌ 이름공간별 역할 ┐ 분류 파일 틀 사용자 연습장 유저 가이드 양식 문법 편집 시각표 틀 제작 디자인 문서 작성 도움말 설정 노하우 특수 기능 시각표 사전 평가·시상·활동 사용자 등급 문서 독도락 세계관 대문 세계관 사용자 위키의 동반자 전회원대회 휘장 관리·운영 저작권 사무관 규정 관리자 신문고

위키 문법
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 서식을 사용합니다. CSS에서 사용할 수 있는 색상 이름과 6자리 RGB 색상 코드를 모두 사용할 수 있습니다.

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

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

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

배경

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

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

입력	출력
	라이트	다크
bg-#33aaff	예시	예시
bg-##33aaff		예시

글씨

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

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

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

입력	출력
기본값	예시
fw-normal
fw-400
fw-bold	예시
fw-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-30px mb-0	예시
mx-auto	예시

테두리

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

입력	출력
기본값	예시
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%를 함께 사용하면 큰 화면에서는 지정한 너비로, 작은 화면에서는 오른쪽으로 넘어가서 잘리지 않고 화면을 꽉 채우도록 할 수 있습니다.

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

정렬

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

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

입력	출력
기본값	예시
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	예시