도움말:위키 문법 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 색상 코드를 모두 사용할 수 있습니다.
다크 모드에서 색상이 너무 어둡거나 보이지 않는 경우가 있습니다. 이럴 때는 색상 코드 앞에 style="color:light-dark(#000000, HSL(37, 10%, 74%));"처럼 # 대신 ##를 사용합니다.
이 방식은 다크 모드에서 자동으로 밝은 색상으로 변환하여 표시합니다. 단, 다크모드 대응을 사용하는 경우 반드시 6자리 색상 코드만 사용할 수 있습니다.[2]
배경 색상
배경은 bg[3]를 사용합니다.
| 입력 | 출력 |
|---|---|
bg-#a0f0f0
|
예시 |
배경 색상 역시 ## 표기를 사용하면 다크 모드에 대응됩니다.
글자 관련
크기
글씨 크기는 fs 서식을 사용합니다. px, pt, em, rem 등 CSS에서 허용하는 단위를 그대로 사용할 수 있습니다.
| 입력 | 출력 |
|---|---|
fs-18px
|
예시 |
글자 굵기
글자 굵기는 fw 서식을 사용합니다.
{{스타일|fw-bold}}
{{스타일|fw-700}}
여백
안쪽 여백
안쪽 여백은 p[4], 또는 방향별로 pt, pr, pb, pl을 사용합니다. px, py를 사용해 좌우·상하 여백을 한 번에 지정할 수도 있습니다.
| 서식 | 설명 |
|---|---|
p |
전체 여백 |
px |
좌우 여백 |
py |
상하 여백 |
바깥 여백
바깥 여백은 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)과 스타일을 함께 사용할 때 구조가 깨지지 않도록 주의하세요.
다음 장에서는 실제 문서에서 자주 쓰이는 스타일 조합과 활용 예제를 다룹니다.