사용자:Bd3076/백괴게임 강좌/HCJ/2강

지난 시간에는 id와 class에 대해 배웠습니다.

이번 시간에는 css를 배워 보겠습니다.

css[편집 | 원본 편집]

css(Cascading Style Sheets)는 문서의 디자인을 담당합니다.

css를 잘만 활용하면, 이런 무지개 색깔도 만들 수 있고, 그 밖에 다양한 것을 만들 수 있습니다.

미디어위키에서 css를 사용하려면, css 구문을

 {{#css: (구문) }}

로 덮어 주시면 됩니다.

css에게 저쪽에 있는 문장을 빨간색으로 바꿔 달라고 했습니다.

.....

아무 일도 일어나지 않습니다.

어떻게 된 걸까요?

간단합니다. css에게 어떤 문장을 빨간색으로 할 지 알려주지 않은 것입니다.

여기서 저번에 배운 id와 class가 중요해집니다.

css의 스타일 구문은 다음과 같은 형식을 하고 있습니다.

(스타일을 지정할 곳) {
   (스타일 구문)
}

스타일 구문은 다음과 같은 형식을 하고 있습니다.

(스타일 변수): (값);

위의 문장은 스타일 변수에 값을 대입합니다.

스타일 변수에는 여러 가지가 있는데, 자주 쓰이는 것들은 아래와 같습니다.

더 많은 변수가 있지만, 일단 이 정도만 알아두어도 됩니다.

아래 코드로 모두 설명하겠습니다.

{{#css:

#name {
  color: white;
  background-color: black;
}

}}
<span id="name">백괴게임</span>

백괴게임

우선 스타일 지정 위치를 #name으로 해 줌으로서 스타일을 name이라는 id를 가지고 있는 요소에게 적용하라는 지시를 내렸습니다.

또한 color: white;로 글자를 흰색으로, background-color: black;로 배경색을 검정색으로 바꿔 줬습니다.

이번에는 아래 예제를 보세요.

{{#css:

.names {
  color: white;
  background-color: black;
}

}}
<span class="names">백괴게임</span>

<span class="names">백괴사전</span>

백괴게임

백괴사전

이번에는 스타일 지정 위치를 .names로 해 클래스 names에 스타일을 지정하라고 명령하였습니다.