CSS 기본문법

CSS는 XHTML 과 긴밀히 맞추어져 있습니다. CSS는 모든 XHTML의 요소들을 하나하나 한곳한곳 혹은 그룹을 불러내어 어떻게 스타일, 표현 되도록 정해줄수가 있습니다.

#mypage { font-size:12px; }

  • # 부분은 어떠한 종류의 이름을 부르는지 말해줍니다. 다른 2종류는 . 이 있구요(예: .mypage) 아예 아무것도 없는것이 있습니다. 나중에 더 자세히 보기록 하겠습니다.
  • mypage부분은 이름을 말합니다. #mypage는 mypage라는 id이름을 가진것을 부른것입니다. 그렇다면 xhtml에 id=mypage라고 씌인부분을 불러낸것이죠.
  • 이름을 부른후에 값을 넣습니다. 중괄호 {} 안에 속성과 값들을 들어가게 되는데, 그것들은 CSS에서 이미 정해진 속성들을 불러내어서 값을 정해주는식으로 행해집니다.
  • 예제는 간단히 하나만 정해놓았는데요, font-size는 글자크기를 말합니다.
  • 콜론 : 으로 이어지면서 원하고 싶은 값을 넣으면 됩니다. 12px로 정했지요.
  • 각각의 속성이 끝날때마다 세미콜른으로 ; 끝맺어 줍니다.

복합적인 속성들을 사용한 예를 볼까요

.yourpage { font-size: 14px; background: red; margin: 5px; }

이것을 편하게 보기 위해서
.yourpage {
font-size: 14px;
background: red;
margin: 5px;
}

이렇게 정렬해 놓습니다.
.
.
.
.
.
.
.

이름의 종류와 선택방법

이름전의 종류들을 볼까요? 어떠한 종류이냐에 따라서 css에서 이름을 부르는것들이 달라지게 됩니다. 복잡하지 않고 간단히 3가지 종류가 있는데요. 종류는 3가지 이지만 부르는 방법은 여러가지가 있습니다.

일단 3가지는 첫째로 이미 xhtml에서 정해진 속성들. 두번째는 제작자가 이름을 붙인것중 한번만 쓰이는것, 세번째는 제작자가 이름을 붙인것중 반복적으로 쓰인느것. 이 세가지를 구별해서 css에서 부릅니다.

자 이 규칙들은 어렵지 않으니 그냥 머리속에 담으시기 바랍니다. 6가지 입니다. :)

  1. 첫번째는 이미 XHTML에서 정해진 태그들의 이름들입니다. 예를 들어 html, body, blockquote, img, div, table 등인데요, 이미 정해져 있는 이 태그들을 CSS에서 부를때엔 앞에 아무것도 붙이지 않고 부릅니다. #나 . 같은거 없고 말이죠. 
    html {
	font-size: 11px;
	background: red;
	}

div {
	padding: 0;
	margin: 0;
	}
img {
	padding: 5px;
	}

    등등 보통 이값들은 css 처음부분에 나열하게 됩니다.

    다음에 설명될 2번과 3번은 1번에서의 xhtml에서 정해진 값들에 제작자가 특별히 이름을 붙였을때의 종류들입니다. 예를들어 <div id=”header”> 는 xhtml 에서 이미 div로 정해진 이름인데 제작자가 특별히 header로 이름을 붙인것이지요. <a img src=”그림주소” class=”mypicture” />또한 mypicture라고 이름을 정한것이구요.

  2. 제작자가 html의 속성에다가 이름을 붙일때에 그 용도가 단독적으로 쓰이는 것이라면 id로 지정하게 되어 있습니다. 예를 들어 레이아웃중 커다란 타이틀 그림이 들어가는 부분은 페이지중 한번밖에 안쓰이기 때문에 <div id=”titleimage”> 처럼 id로 이름을 부릅니다. 그래서 웹사이트 xhtml소스를 보면 id= 로 되어있는것은 한번만 씌여져 있습니다.

    이렇게 id로 특별히 이름이 정해진 값은 # 로 css에서 부릅니다.

    #header {
    width: 300px;
    height: 200px;
    }
    #websitetitle {
    font-size: 16px;
    }

  3. 하지만 제작자가 반복해서 쓰일만한 것에는 class 라고 부른후에 이름을 정해줍니다. 예로 일기의 날짜부분은 그다음날 일기에 또 들어가고 계속 반복적으로 들어갈 것이니 class로 부르는 것이죠. <div class=”diary_date”>

    이 class로 xhtml에서 정해진 것을 css에서 지명할때에는 . 마침표를 씁니다.

    .diary_date {
    font-size: 10px;
    margin: 5px;
    }
    .smallfont {
    font-size: 8px;
    margin: 5px;
    }

  4. 다음은이름이 정해져 있는속성 안에 이름이 정해져 있지 않은 속성(html에서 이미 정해진 이름)을 부르는경우 입니다. ㅡㅡ; 2,3번 안에 들어있는 1번이되겠네요. 예를 드는게 가장 빠르겠습니다. ^^
    <div id=”header”><p>문단</p></div>

    header 라는 div 안에 p 라는 html 에서 이미 정한 태그를 불러야 하는 경우입니다.
    이 경우에 p를 그냥 불러서

    p {
    font-size: 10px;
    }
    이라고 정해주면 웹사이트의 모든 p에 이것이 적용됩니다. 그러니 정해진 이름을 부르고 그것을 불러주면 p에 이름을 정해주지 않더래도 지정할수가 있는것이죠.

    #header p {
    font-size: 10px;
    }

    다른 예로, list를 쓸때에 이런 경우가 많은데 

    <div id="content">
	<ul>
		<li>리스트 입니다</li>
	</ul>
</div>

    에서 ‘리스트 입니다’ 부분을 css에서 부르려면

    #content ul li {
    color: blue;
    }

    이렇게 선택할수 있겠습니다. 한칸씩 띄워주고 부르면 되겠네요.
    주의 하실점은 이름이 정해져 지지 않은 값을 부를때에 쓰는 방법이라는것입니다. #header #content { font-size: 12px;}은 안되는것이죠.

  5. 여러가지를 한꺼번에 부를수 있습니다. 어차피 같은 값을 적용시킬꺼라면 쉼표, comma 를 사용해서 나누어주면 됩니다.

    #content ul li, #header, .diary_date { font-size: 12px; }

    이렇게 정리된것은 다음과 똑같은 효과를 냅니다. 밑에것들이 더 길뿐입니다.
    #content ul li { font-size: 12px; }
    #header { font-size: 12px; }
    .diary_date { font-size: 12px; }

  6. 마지막으로 어떤 특정 속성을 가지고 있는 태그를 불러내어 선택할수 있습니다. 2,3 번과 비슷하지만 이름대신 속성으로 찾는것이지요.
    앞에 태그를 부르고 그다음 대괄호 안에 속성을 불러냅니다.

    div[align] { font-style: italic; }

    align 이라는 속성을 가지고 있는 div 에는 이탈릭으로 모든폰트 스타일이 바뀌겠습니다.

    이 선택하는 방법은 넷스케이프 6 에서는 가능하지만 ie 에서는 가능하지 않습니다.

혹시나 이해가 잘 안되었다면 연습하면서 이해해봅시다.

css selecter exercise
CSS 에서 동그라미 친 부분을 불러봅시다.

1은 2번규칙에 의해서 #header 로 부르면 됩니다.
#header {
font-size:12px;
}

2는 그냥 li 로 불러도 되지만 id=”content” 안에
속해있으니 4번규칙에 의해서 부르는게 좋습니다.

#content ul li {
list-style-type: none;
}

3또한 4번규칙을 써도 되겠죠. 하지만 그냥 1번규칙
을 써서 불러보겠습니다.

p {
color: #ff0000;
}

4번은 class로 불려졌으니 마침표를 써서 불러야겠죠.
3번규칙입니다.

.date {
font-size: 10px;
}

5번은 정하지 않고 놔두게 되면 위의 3번에서
정한값이 그대로 적용됩니다. 그게 싫다면
4번규칙을 써서 부릅니다.

#footer p {
font-size: 13px;
}

정리를 해보겠습니다. css는 각각의 모든 xhtml의 요소들을 부를수가 있는데 그 이름의 종류에따라서 부르는 기호가 틀려지게 됩니다. 이름을 정하지 않은 보통의 xhtml요소들은 앞에 아무것도 붙이지 않고, id 로 정해진 이름을 부를때엔 # 샾, 그리고 class로 정해진것은 . 마침표를 앞에 붙여서 부릅니다. 그리고 아시다시피 XHTML의 규정으로, id는 단독적으로 쓰이는것에 이름을 붙일때에 쓰고, class는 반복적으로 쓰일때에 씁니다. html의 속성을 부를때에 어떠한 정해진 이름안에 속해있다면 이름 띄고 속성(#header ul li) 이렇게 부를수 있다는것도 잊지 마시구요. 또한 쉼표로 나누어 여러가지를 한꺼번에 불러서 동일한 값을 줄수 있으며 넷스케이프에서는 속성을 찾아 그곳에 다른 속성을 더해줄수 있다는것도 나누었습니다.
css selecter chart

* 이름을 정할때에는 자신이 알아볼 정도만의 이름뿐만이 아닌 평범하게 모두가 알아볼수 있을만한 이름을 정하여 선택해 쓰는것이 좋습니다.
** 브라우저의 호환성을 위해 혹은 특히 class는 여러곳에서 쓰일수 있기때문에 혼돈되지 않도록 앞에 XHTML 속성을 부른후에 제작자가 정한 이름을 붙이는 경우도 있습니다. 예를들어
<div id=”header”> 를 css에서 부를때에

div#header { width: 300px; } 이렇게 말이죠. 호환성과 문제들은 이곳에서 다루면서 또한 wsg 이나 CSS Design Korea 에서 더 자세히 다룰것입니다.

어렵지 않죠? CSS2는 함수나 계산등이 들어가지 않는 단순한 언어이기때문에 그렇게 어렵지는 않을것입니다.

CSS에서 XHTML에 있는 요소들을 부르는법을 알았으니 이제 부르고 나서 명령을 해주어야겠죠. 그것들을 살펴봅시다.