도움말:위키 문법/CSS

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

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

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

1.CSS란?

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

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

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

2.틀 스타일

2.1.시작하기

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

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

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

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

{{css|문서명}}

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

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

2.2.예시

{{블러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

2.3.단점

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

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

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

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

3.특수 명령문

3.1.특수 명령문이란?

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

3.2.시작하기

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

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

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

4.선택자

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

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

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

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