고급 서식 설명서
평가: 0+x

서론

You're entering an odd world. Odd, because this guide is a fleeting view of a much bigger and more complex world that extends way beyond the limits of this wiki. Its aim is to help you understand the functioning of elements that can be useful for your articles here but it does not claim to teach you CSS or any other language in a suitable way for real use outside of the wiki. If that's what you are looking for, you can find several online courses and reference sites.

But before diving into the code itself, let's repeat the basics: the common formatting you may already have used on the wiki is called Wikidot syntax; a syntax is a set of rules conceived to make the main formatting options (bolded and italic text, tables etc) easily and quickly accessible for users.

However, as soon as you will want to try something more specific, you'll have to use the "actual" languages used by internet developers, designers and other code artists. They do not come from Wikidot but can be used on it in the different ways we're going to explore here.

Before going to the next section, a quick overview of some original or surprising results you can get by using these to give you an idea of the possibilities:


CSS

CSS — for Cascading Style Sheets — is a language used to define the appearance of an object. It allows to specify its dimensions, shape, color and several other elements. It's the language you will use 99% of the time to style your articles up and luckily it's very easy to understand. Let's see.

There are two main ways to organise text and apply code to it: div and span elements.

Here is a span element, which targets a set segment of text and allows you to switch from one style to another on the same line.

Here is a div element, also called div block because it encompasses a whole portion of text. Divs are used for interviews or exploration logs in SCP articles, for example.


It needs to include a line break after the last line of text in it before switching to another style.

So let's have a look at how it works.

차근차근 상자 만들기

[[div]]
텍스트
[[/div]]

This is the basic, blank template of a div box. This one doesn't actually do anything yet because we didn't tell it to; let's choose what we want it to look like then.

[[div style=" "]]
텍스트
[[/div]]

There, we're going to put a series of CSS declarations which are bits of code specifying each property like the background color, the border etc. Let's say I want a light blue background.

[[div style="background-color: skyblue;"]]
텍스트
[[/div]]


텍스트

A CSS declaration is always made in the same way: a CSS argument, here background-color which targets the background to say that what comes after will be about it, followed by a colon and a value which tells exactly how it should be, here a color name in English. It could also have been an hexadecimal code (or RGB, or any other less common code that also specifies colors) or even the link of an image you want to display in the background. Then the declaration ends with a semicolon and can or not be followed by other declarations.

The single difficulty in this process is to know the right names for the different arguments and values: you will learn more and more by heart with time and practice, but you should probably use a reference list to start with all the useful info and details at hand.

I can quickly make my div block look better using other such values!

[[div style="background-color: skyblue; border: 1px solid black;"]]
텍스트
[[/div]]


텍스트

Here, we're using several values in a row to define distinct aspects of the desired element: I want a border, so I specify its width (1 pixel), its appearance (solid, because it could also be a dashed one) and its color (black). But you may also have noticed a most ungainly spacing inside and outside of this box.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em;"]]
텍스트
[[/div]]


텍스트

The margin and padding arguments respectively target the space between the outer border and the content above, under and on the sides of the box and the space between its inner border and the other elements it contains. They both are almost compulsory, especially the padding, if you want your box to be easy on the eye.

The measure used here, the em, adapts its size to that of the font used with it. If your box contains very big text, these spaces will adapt themselves to provide a more accurate display. However, you can also use pixels (px) or any other fixed measure.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%;"]]
텍스트
[[/div]]


텍스트

But let's polish this box a bit to make it more stylish.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; font-size: 300%; border-radius: 0.5em; box-shadow: 5px 5px;"]]
텍스트
[[/div]]


텍스트

I have rounded the corners up and added a shadow, but it's a bit too aggressive on the eye and I'd like it to be on the top part. The first two numbers in px stand for the horizontal and vertical shadows (x and y axis). Let's invert the vertical one and add a third measure which indicates a blur on the shadow to make it smoother.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px;"]]
텍스트
[[/div]]


텍스트

And why not add a color to this shadow while we're at it.

[[div style="background-color: skyblue; border: 1px solid black; margin: 1em; padding: 1em; border-radius: 0.5em; box-shadow: 5px -5px 6px #0404b4;"]]
텍스트
[[/div]]


텍스트

And here you are, you just created a div box! It may seem complicated because we referred several times to arguments you probably have never heard of before but that's where the real work is; understanding and learning the utility and use of these codes. For this, there's only one way: trying. If you want to try your hand with the most common arguments, you can use several online tools like this one and you will soon be able to stand on your own two feet!

Span 요소

Spans work the same way as div boxes and with the same arguments save for a few properties that can't apply to a segment of text.

[[span style="background-color: gold; border: 0.9px solid grey; border-radius: 0.2em; padding: 0.2em"]] Example of text within a span [[/span]] followed by another bit of text that isn't included in it and is not affected by its formatting


Example of text within a span followed by another bit of text that isn't included in it and is not affected by its formatting

CSS 모듈

Using "inline" properties in spans and divs (with a style=" " directly in your page's code) is an easy way to apply CSS in your article. However, it can be more convenient to use a CSS module to do so1.

A CSS module is a block of text that won't be displayed anywhere on your page and contains a set of CSS declarations that will apply to your page. The wiki's themes are basically nothing but big CSS modules most often affecting general aesthetic elements — and that's where it becomes interesting. CSS modules allow you to not only apply styles to specific elements you created from zero in your code but also to modify the design and attributes of elements that already have different default ones and to which you cannot apply a style=" " value. This code, for example, allows you to modify Wikidot tables' design:

[[module CSS]]
table.wiki-content-table {
    background-color: #CEF6CE !important;
    color: black !important;
}
table.wiki-content-table th {
    background-color: #3B0B17 !important;
    color: #F6CED8 !important;
}
[[/module]]

And with this code on your page, the following:

||~ 제목 1 ||~ 제목 2 ||~ 제목 3 ||
|| 셀 1 || 셀 2 || 셀 3 ||

Will look like this:

제목 1 제목 2 제목 3
셀 1 셀 2 셀 3

"table.wiki-content-table" is the CSS name for the table cells and the "th" specification more precisely targets the title cells. After giving them a new background and font color, we add the "!important" command to indicate that this argument has to overwrite any other previously defined color. It is not always necessary but can be useful to replace Wikidot's default settings if you try with a normal argument and it doesn't work. Be careful not to use !important if your code works without it though, it can also break it if used unwisely.

But you may have noticed a change in the format we're using? Indeed, the standard CSS format we use in those modules implies 1) a more readable formatting and 2) the necessity to precise which element should each CSS declaration apply to since our module is not tied to a single element but to the whole page. The recommended format in a CSS module is the following:

elementname {
    argument: value;
    argument: value;
    argument: value;
}

To note that spaces and line breaks are used for readability only: the following module would also work, even if much less enjoyable to look at.

elementname{argument:value;argument:value;argument:value;}

You may now be asking yourself how to find the name of an element to modify it: to do so, your computer has an appointed tool you might already have used, the element inspector. We will talk again about this tool's possibilities later, but for now just remember you only have to right click on what you want to modify then select "Inspect" to find its name which will be displayed in the newly opened interface.

inspection.png

Rightclicking on this image show me that the blocks I used here are named "div.code" or more simply ".code" in CSS.

Once you have opened this window, you can go on top left of it to use the "inspect by click" tool instead of using right again click every time. Pro tip: It can also be used more quickly with the Ctrl + Shift + C shortcut.

inspectclic.png

Let's see the different practical applications of a CSS module now.

Case 1: You use the same div box several times in your article and would like to lighten your code by avoiding to repeat all of it every time. You will then have to define a class - in other words, create a set of rules you will then be able to simultaneously apply to several elements. To do so, set the element to target a dot followed by the name you want to give your class.

.yourclassname {
    padding: 1em;
    margin: 1em;
    background-color: gold;
    color: darkred;
    border: 1px dashed black;
}

To apply your class to a div, span or other element, simply add class="yourclassname" to it.

[[div class="yourclassname"]]
div 블록 속 텍스트
[[/div]]


div 블록 속 텍스트

Case 2: You use the same div box several times in your article while sometimes changing a detail in it. To do so, you can either 1) use several classes or 2) add a style=" " to the main one. Let's see the first of these two methods.

.box {
    padding: 1em;
    margin: 1em;
    color: darkred;
    border: 1px dashed black;
}
.yellow {
    background-color: gold;
}
.blue {
    background-color: lightblue;
}

All elements given the "box" class will receive its properties and you will then be able to adjust their appearance through a second more specific class, here used for the background color. The order of the classes doesn't matter.

[[div class="yellow box"]]
yellow box 속 텍스트
[[/div]]

[[div class="box blue"]]
blue box 속 텍스트
[[/div]]


yellow box 속 텍스트

blue box 속 텍스트

But you can also get the same result using class and style at the same time, like this:

[[div class="box" style="background-color: gold;"]]
yellow box 속 텍스트
[[/div]]

[[div class="box" style="background-color: lightblue;"]]
blue box 속 텍스트
[[/div]]

None of these options is better than the other, it's up to you to see which one is the most intuitive and convenient to use on a case by case basis.


배울 때의 모범 자세

There is a most efficient path to follow in your quest to become an advanced formatting expert: trying. The page inspector, accessible using right click or Ctrl + Maj + I or Ctrl + Maj + C (depending on your browser), is the best tool to do so.

Once done, you will see all of selected element's properties and will be able to modify them at leisure and see the results live on your page. These modifications will be visible by you only, won't affect all other users and will be reset if you refresh the page, so don't hold yourself back! Here's a random box to train yourself:

예시 텍스트



If you enjoy this game, you can push it further by adding the study of existing formats to it, comparing their code with the result to understand what does what. You can and are encouraged totry this a bit everywhere on the site, but here are some interesting examples with comments to let you see the recommended method. P.S. : If you are curious about the use of components, you may be interested in the second tab.


결론

If you have read and undersood all of the above, you should just need some practice to become a master in the art of advanced syntax. If you have any questions or problems with code tinkering, feel free to contact either me (Dr LekterDr Lekter on Wikidot, Lekter#1551 on Discord) or a technical expert or staff from your branch.

Good luck in your quest, and may you make a wise use of the skills you will acquire on the road!

한 걸음 더 나아가기 위한

유용한 링크 요약

» CSS arguments list «
» Div box creation tool «
» Full documentation «
» HTML color codes «
» Ready-to-use codes34 «