CSS의 기초

css를 작성하는 방법에 대해 알아보겠습니다.

#nipa { width:500px; height:300px; }

#은 객체를 부른다는 표시입니다. 이곳에 쓰일 수 있는 건 # 과 . 이 있습니다.
#은 id="어쩌고" 라고 이름 붙여진 객체를 부르고 . 은 class="어쩌고" 라고 이름 붙여진 객체를 부릅니다.

nipa 자리에는 객체의 이름이 들어갑니다. 객체의 이름은 html 문서에서 정해줍니다. 이름을 정하는 건 마음대로 하셔도 됩니다. "nikebabo"도 좋고 "clannad"도 됩니다.

{ } 안에 속성을 적습니다. 들어갈 수 있는 속성은 객체에 따라 다양합니다. 다 외우는건 무모한 짓이고, 태그처럼 필요할 때 찾아서 적는게 효율적입니다.

그리고 한가지. 띄워쓰기는 이름이나 속성을 제외한 부분에서 마음대로 하셔도 됩니다.
예를들어,

#nipa          {    width:   500px;height: 300px;  
            }

는 맨 위의 코드와 동일합니다.
물론 이렇게 쓰시는 분들은 없겠죠? 읽기 편하게 하면 됩니다.
예를들어,

#nike                 { width:300px; border:1px solid #ccc; }
#happybirthday   { text-align:left; }
#minamike          { margin:0; padding:0 }

이렇게 줄을 맞춰서 적으면 나중에 알아보기 쉽죠.
공백으로는 스페이스바 이외에 엔터나 탭이 들어가도 됩니다.


1. id 와 class
객체의 이름을 정하는 방법에는 두가지가 있습니다.
id 는 유일한 객체의 이름을 정할 때 사용됩니다.
전체 레이아웃에서 header는 한번밖에 나오지 않겠죠. 그러면 id="header" 라고 이름을 정해줍니다.
class 는 여러번 나오는 객체의 이름을 정할 때 사용됩니다.
한 페이지에 여러 포스트가 표시되는 경우
각각의 포스트마다 id="post1" id="post2" 라고 지정하는건 피곤한 일입니다.
class="post" 라고 지정해두면,
.post  { 속성 }
한방으로 끝낼 수 있습니다. :)

이 id와 class는 마음대로 정할 수 있습니다만, a, img 등 html에서 기본적으로 사용되는 태그 이름과 같게 지정하면 나중에 헷갈리므로 되도록 단순하면서 용도를 잘 드러낼 수 있는 이름을 정해주세요.


2. 어떤 태그들은 그냥 부를 수 있습니다.
html, body, blockquote, img, div, table 등은 # 이나 . 을 붙이지 않고 그냥 부르는 것이 가능합니다.

img { width:100px; }

라고 입력해주면, html 문서에 있는 모든 이미지들의 가로를 100픽셀로 맞추게 됩니다.


3. 여러개를 한번에 부를 수 있습니다.

#nipa , #header , #minamike { width:100px; }

이렇게 해주면 3개의 객체 모두에 속성을 지정하게 됩니다.


4. 속해 있는 것들을 부르는 방법
"속해 있다" 라는 표현이 익숙하지 않은가요? 아래의 예를 보세요

<div id="wrap">
    <div class="shout">
          <p>니파!</p>
    </div>
</div>

div는 레이아웃을 짜는 한칸짜리 표와 같은 형태의 태그입니다.
wrap 안에 shout가, shout 안에 글자가 들어가 있습니다.
css 에서 shout 의 가로를 500px로 바꾸어 보겠습니다.

#wrap .body { width:500px; }

네 그렇습니다.
상위의 객체의 이름 뒤에 한 칸 띄우고 이름을 부르면 됩니다.
그럼 니파! 라는 문구의 색을 바꾸어 보겠습니다.

#wrap .body p { color:#CCCCCC; }

p는 문단을 나타내는 태그로, 앞에서 알아봤듯이 이름을 정하지 않고도 부를 수 있습니다.
물론 저렇게 할 경우 shout 안에 있는 모든 문단의 색이 변하므로,
니파! 라는 문구만 바꾸고 싶다면 니파! 를 싸고 있는 p 태그에 이름을 붙여주면 됩니다.