warming_up

완전 기초적인 CSS

알 수 없는 사용자 2011. 11. 11. 14:37

웹에서, 홈페이지를 만들어서 문서를 보여줄 때 이걸 이루는 가장 큰 요소들은 HTML과 CSS, 그리고 Java script이다.

HTML은 지난번 글에 썼듯이, 구조와 내용을 담당한다. a,b,c 기타 등등의 내용과 엘리먼트들이 있다.
CSS는 스타일링을 맡는다. 문서에 있는 a,b,c를 꾸밀 수 있다.
css가 만들어지기 전에는, <font color="~~~">처럼 html안에서 꾸밈요소들을 사용했다. 그렇지만 CSS가 나오고, 문서와 스타일이 분리되면서 유지보수와 작업이 더 용이해졌다.
Java script는 알다시피 팀의 기능을 맡고있다.


CSS의 시작은 Selector, 선택자이다.
이게 없으면 선언된 css가 어떤 곳에 적용을 해야 할지 모른다. 

Secletor를 크게 3가지로 나눠보자(종류가 많다고는 하는데, 이것만 일단 알아두장)
- Type : html 태그를 선택한다. tag. p나 div span 기타 등등. 
- Id : # 지시어를 이용해서 이름을 붙인다.
- Class : . 지시어를 이용해서 이름을 붙인다.

(id와 class는 조금 다르다. 그건 나중에 추가하기로)


CSS는 3가지 방식으로 기술되는데
1. tag안에 inline으로 쓰기
2. 동일문서에 소스를 삽입
3. 외부에서 include하여 쓰기

-> 여기서 가장 좋은것은 외부에서 불러오는 것이다. 고치기도 쉽고 리뉴얼하기에도 좋다.

이 기술방법이 적용될 때의 순서는 1>2>3이다. inline-style루 쓰는게 순위가 가장 높다.
그런데, 어떠한 상황에서도 외부에서 정의한 스타일로 사용하고 싶으면 
<style>
h1{
font-size:120px; !important;
}
</style>

저걸 추가해준다. 진짜 important!


CSS의 selector들은 jquery에서도 같은 selector를 사용하기 때문에, CSS를 먼저 공부하고 보면 이해가 쉽다.

CSS에 대한 자세한 내용은 공부하면서 추가하도록 합니당..-.-';