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

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

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

css

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

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

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

 {{#css: (구문) }} 

로 덮어 주시면 됩니다.

어떤 문장을 디자인할까?

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

.....

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

어떻게 된 걸까요?

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

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

css의 기본 구문

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

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

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

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

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

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

• color : 글의 색깔을 의미합니다.
• background-color : 배경색을 의미합니다.
• font-family : 글꼴을 의미합니다. 단, 이 글꼴에는 한계가 있습니다.
• font-size : 글꼴 크기를 의미합니다.
• text-align : 텍스트 정렬을 의미합니다. 주로 "center"(가운데 정렬)가 쓰이게 됩니다.

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

= id에 스타일을 적용하는 방법

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

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

{{#css:

.name {
  color: "white";
  background-color: "black";
}

}}

백괴게임