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

도움말

[ 펼치기 · 접기 ]

개념

틀:스타일은 HTML 태그의 style 속성에 들어갈 CSS를 간결한 약어 형태로 작성할 수 있게 해주는 틀입니다. 기본적인 사용법은 다음과 같습니다.

{{스타일|서식}}

여기서 서식은 속성-값 형태로 작성하며, 여러 개를 사용할 경우 띄어쓰기로 구분합니다.

종합하면 다음과 같이 사용할 수 있습니다.

<span {{스타일|c-red fs-18px}}>예시</span>

자주 사용하는 서식 몇 가지를 먼저 소개합니다.

서식	설명	예시	출력^[1]
`c`	글자 색상	`{{스타일\|c-red}}`	예시
`bg`	배경	`{{스타일\|bg-#a0f0f0}}`	예시
`fs`	글자 크기	`{{스타일\|fs-20px}}`	예시
`fw`	글자 굵기	`{{스타일\|fw-700}}`	예시

padding과 margin은 축 방향 약어를 함께 제공합니다.

테두리는 bd 계열 서식을 사용하며, 한 번에 여러 요소를 지정합니다.

형식은 다음과 같습니다.

bd-두께-종류-색상

서식	설명	예시	출력
`bd`	전체 테두리	`{{스타일\|bd-2px-sld-red}}`	예시
`bdt`	위쪽 테두리	`{{스타일\|bdt-4px-dsh-blue}}`	예시

종류에는 sld(solid), dsh(dashed), dot(dotted) 등이 있습니다.

글자 색이나 배경 색을 지정할 때 # 대신 ##를 사용하면 다크 모드에 대응됩니다. 이 방식은 6자리 색상 코드만 지원합니다.

입력	라이트 / 다크 모드 출력
`{{스타일\|c-##0000ff}}`	라이트 / 다크

값 앞에 $를 붙이면 CSS 변수로 처리됩니다.

{{스타일|c-$main}} → color: var(--main);

또한 값이 공백을 포함하는 경우 < >로 묶을 수 있습니다.

{{스타일|ff-<Noto Sans KR>}}

표에서는 2장에서 설명한 방식 그대로 사용할 수 있습니다.

제목
내용	내용

필요에 따라 간결함과 가독성 중 적절한 쪽을 선택해 사용하세요.