도움말:위키 문법/CSS

이 문서는 제이위키의 도움말입니다.

이 문서는 제이위키 초보자를 위한 문서로, 훌륭한 기여자 분들의 기여를 언제나 기다립니다.

이 도움말에서는 틀 문서에서 쓸 수 있는 CSS(틀 스타일) 및 미디어위키의 {{#css}} 특수 명령문에 대해 안내합니다.

CSS란?

종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheet)의 약자로, 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 시트 언어입니다. HTML, JS와 함께 웹 코딩에 주로 쓰입니다.

미디어위키 문법에서는 일부 HTML 태그를 지원하고, HTML에서도 인라인 스타일(style="")을 통해 일부 구현할 수 있으나 이는 한계가 명확합니다. 이 도움말에서 안내하는 방법은 실제 CSS를 코딩할 수 있습니다.

이 도움말에서는 CSS 코딩법 자체에 대해서는 강의하지 않습니다. 주로 위키에서 CSS를 어떻게 사용할 수 있는지에 관해서와 위키 편집에 유용하게 쓰일 수 있는 활용법 극히 일부만 설명합니다. 수만, 수억 가지나 되는 CSS의 모든 코딩법을 이 문서에서 강의하기는 현실적으로 불가능하므로, 기초적인 CSS 코딩법에마저 익숙하지 않은 분들은 열람을 권장드리지 않습니다. 리브레 위키에 CSS 기초 코딩법을 강의하는 문서가 있으니 참고하시는 것도 좋습니다.

틀 스타일

시작하기

어떤 틀에 대한 CSS를 코딩하려면 틀의 하위 문서로 FULLPAGENAME/styles.css를 생성합니다. /styles.css로 된 문서는 CSS 코딩을 위해 기존 문서와 편집창이 상이합니다.

이 문서에서 CSS 코딩이 끝났다면 이제 본 문서에서 해당 CSS 코드를 사용하겠다는 태그를 선언해 주어야 합니다.

<templatestyles src="문서명/styles.css" />

{{css}}로 위 태그를 간단히 쓸 수 있습니다.

{{css|문서명}}

이때 문서명에서 이름 공간인 틀:은 없어야 합니다. 본 문서의 아무 위치에 이 태그를 입력하면 그 문서는 틀:문서명/styles.css에 코딩된 CSS를 사용할 수 있는 상태가 됩니다.

틀이나 도움말 등을 포함한 모든 다른 문서는 다른 제목으로 바꾸기 위해 문서를 이동할 때 기존 제목의 문서가 새로운 제목의 문서로 넘겨주기됩니다. 그러나 CSS 문서는 다른 제목으로 바꾸기 위해 문서를 이동하면 기존 제목의 문서가 삭제됩니다.

예시

{{블러4}}를 예로 들어 보겠습니다.

틀:블러4/styles.css 중에는 다음과 같은 코드가 적혀 있습니다.

.blur-template-2{
	filter: blur(4px);
}
.blur-template-2:hover{
	filter: none;
}

여기서 blur-template-2는 클래스에 해당합니다. CSS를 코딩할 때 앞에 온점을 붙이면 클래스임을 뜻하기 때문입니다.

또는 {{css|블러4}}가 입력된 문서에서 class="blur-template-2"가 선언된 태그 안의 내용은 마우스를 올리면 볼드체로 바뀌게 됩니다. 클래스 뒤의 :hover는 마우스를 위에 올렸을 때를 선언하는 가상 클래스입니다.

문법	결과
<span class="blur-template-2">BLUR</span>	BLUR

단점

CSS 문서에 입력된 코드는 틀 변수로 정할 수 없습니다. 마찬가지로 #if나 #switch 등 위키의 특수 명령문도 사용하지 못합니다.

예를 들어 {{블러4}}의 CSS에는 filter: blur(4px);이 입력되어 있는데, 흐림의 정도를 나타내는 저 4px 값을 변수로 만들어 사용자가 직접 얼마나 흐리게 할지를 정하게 할 수 없습니다.

하지만 흐림 정도에 따른 클래스를 여러 개 만들어 놓고 틀 변수에서 각각의 클래스를 따로 입력할 수 있게 하는 것으로 조금이나마 해결할 수는 있습니다.

이 단점은 아래의 특수 명령문에서 해결됩니다.

특수 명령문

특수 명령문이란?

미디어위키에서 틀은 두 쌍의 {{중괄호}} 안에 틀 이름을 넣어 사용한다는 것을 알고 계실 겁니다. 특수 명령문이란 미디어위키에서 제공하는 기능 중 하나로, 틀처럼 두 쌍의 중괄호 안에 이름을 넣지만 이름 앞에 해시(#) 기호를 붙여 {{#이름}} 이렇게 사용합니다. 위키 문법에 익숙한 사람들이 제작한 복잡한 틀 문서를 편집 버튼을 눌러 뜯어보면 {{#if}}, {{#switch}} 같은 문법이 많을 텐데, 이런 걸 전부 특수 명령문이라고 합니다.

시작하기

이런 특수 명령문 중에 {{#css}}가 있습니다. 이름 그대로 이 특수 명령문은 CSS 코딩을 가능하게 해줍니다. 문서의 아무데나 {{#css}}를 입력하면 그 안에 작성된 코드는 그 문서 전체에 적용됩니다.

특히 괄목할 만한 것은 틀 스타일과의 차이입니다. 틀 스타일은 어떤 틀의 하위 문서를 반드시 생성해야 하며, 특히 문서의 본문에만 간섭이 가능합니다. 이게 무슨 말이냐면 지금 눈으로 보고 계시는, 즉 문서의 제목 아래부터 하단 광고 위까지만 적힌 문서의 본문에만 CSS를 적용할 수 있습니다. 하지만 특수 명령문은 새로운 하위 문서를 생성할 필요도 없고, 특수 명령문이 사용된 문서에 접속해 있을 때를 한해 사이트 전체에 간섭이 가능합니다.

또한 틀 스타일은 오로지 CSS 코딩만을 위한 새로운 문서 작성 방식이 적용되므로 CSS 코딩에 어긋나는 위키 문법 등을 작성하면 오류가 나면서 편집 저장 자체가 안 됩니다. 즉 CSS 안에 틀 변수를 넣어 틀 사용자가 커스텀할 수 있도록 하는 것이 불가능합니다. 하지만 특수 명령문은 일단 작성 자체는 기존 문서 작성 공간에서 이루어지므로 당연히 틀 변수를 넣을 수 있습니다.

선택자

CSS의 모든 가상 클래스를 설명하지는 않습니다.

요소에 대한 style을 편집하는 것은 HTML의 style=""로도 가능하기 때문에, 이 문단에서는 오직 CSS에서만 가능한 가상 클래스에 대해 설명합니다.

가상 클래스는 태그나 클래스 이름 뒤에 콜론을 붙임으로써 기능합니다. 해당 요소에 대해 가상 클래스의 기능을 부여하고 그에 따른 style을 추가로 동작하게 할 수 있습니다.

가상 클래스	설명
hover	해당 요소 위에 마우스를 올렸을 때 동작
active	해당 요소를 클릭하는 동안 동작
focus	해당 요소에 초점을 맞췄을 때 동작
link	방문한 적 없는 링크
visited	방문한 적 있는 링크
first	첫번째 요소 동작
last	마지막 요소 동작