사용자: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에 스타일을 적용하는 방법

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

{{#css:

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

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

백괴게임

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

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

class에 스타일을 적용하는 방법

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

{{#css:

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

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

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

백괴게임

백괴사전

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

• 이전 강의
• 다음 강의
• 돌아가기