제이위키의 규정
기본방침 (문서 관리 방침 · 토론 관리 방침 · 이용자 관리 방침 · 운영 관리 방침) · 편집지침 · 커뮤니티 가이드라인 · 동음이의 리다이렉트 요청
 제이위키의 도움말
FAQ · 도움말 (사이트 소개 · 저작권 · 운영진 · 단축키 · 편집 · 문법 ( · HTML · CSS) · · 분류 · 등급 (등급 목록) · 동음이의) · 유저가이드 (기초문법 · 고급문법 · 정치 창작 팁 · 전쟁 창작 팁 · 판타지 창작 팁 · 언어 창작 팁 · 종교 창작 팁) · 권리침해 · 다른 위키와의 차이점
 제이위키의 운영
운영진 (관리자 · 중재자) · 관리자 선거 (2018 · 2019 · 2021) · 투명성 보고서 · 재정 보고서
 제이위키의 인정단체
인정단체 · 에른스트의 아무튼 공방 (아무거나 월간공방) · 그리다 · 감성위키 · 와르샤와웍스 · 연필이 닿는 곳 · 철통팀 · 오펜시브 프로젝트 팀
 제이위키의 앙케이트
이 창작이 대단하다! (2021 세계관 · 2021 창작자 · 2020 세계관 · 2020 창작자 · 2020 편의성) · 연말시리즈 (2022 · 2023)
이 문서는 제이위키의 도움말입니다.

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

이 도움말에서는 틀 문서에서 쓸 수 있는 CSS(틀 스타일)에 대해 안내합니다.

CSS란?

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

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

이 도움말에서는 CSS 코딩법 자체에 대해서는 강의하지 않습니다. 또 CSS 코딩법은 일반 style, div 속성보다 더 복잡하므로, 코딩법에 익숙하지 않는 분들은 뒤로 가주시기 바랍니다.

시작하기

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

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

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

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

{{css|문서명}}

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

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

예시

{{가짜 링크}}를 예로 들어 보겠습니다.

틀:가짜 링크/styles.css에는 다음과 같은 코드가 적혀 있습니다.

.fake-link{
	color: #337ab7;
	cursor: pointer;
	transition: color .5s;
}
.fake-link:hover{
	color: #23527c;
	text-decoration: underline;
}

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

<templatestyles src="가짜 링크/styles.css" /> 또는 {{css|가짜 링크}}가 입력된 문서에서 class="fake-link"가 선언된 태그에는 글자 색 #337ab7이 적용되고, 여기에 마우스를 올리면 글자 색이 #23527c로 바뀌고 클릭 가능한 커서로 바뀌면서 밑줄이 쳐질 것입니다. 클래스 뒤의 :hover는 마우스를 위에 올렸을 때를 선언하는 가상 클래스입니다.

문법 결과
<templatestyles src="가짜 링크/styles.css" /><span class="fake-link">가짜 링크</span> 가짜 링크

가상 클래스

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

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

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

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

단점

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

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

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


  1. https://ko.wikipedia.org/wiki/CSS
  2. 사실 앞의 styles는 없어도 되고 .css가 중요합니다.
  3. 이 넘겨주기를 만들지 않고 문서를 이동할 수도 있지만 제이위키에서는 관리자 외에는 불가능합니다.