『 skystory 』- 내가 살고 있는 그 곳... ::

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

#wrap .body { width:500px; }

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

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

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