CSS는 Cascading Style Sheets의 약자로 HTML과 XML문서 내에 있는 엘리먼트의 formatting을 지정하기 위한 스타일 시트 매커니즘이다. 이 CSS는 문서의 저자나 독자가 엘리먼트에 스타일을 쉽게 지정하도록 하고 쉽게 이해되도록 하는 것을 목표로 설계 되었다.
월드와이드 웹 컨소시엄(W3C)에서는 CSS표준을 정해 놓고 있는데 현재 CSS3까지 나왔다.
여기서 포스팅을 하는 것은 명확히 CSS1 이다. 이 CSS1은 이후의 CSS2나 CSS3의 근간이 되는 기능들로 이후의 것은 다른 기능이 추가된 것들이다.
CSS에서 Cascade란 폭포의 물이 떨어지는 윗부분을 말한다. 동사로 절벽위로 떨어지는 폭포를 나타내기도 하는데, 상단의 그림에서 처럼 문서의 스타일을 감싸듯이 꾸며주는 역할을 한다.
사실 CSS는 프로그램이라기보다는 설정에 가깝다. 태그-엘리멘트를 정해주고 그 엘리멘트의 출력방식을 규칙에 맞게 작성하는 것이다. CSS문서가 저장되면 다른 html이나 xml문서에서 언제나 css파일을 인쿨루딩하여 가져다 사용할 수 있다. 이러한 점은 재사용성이라던가, 손쉬운 수정, 모듈화등 다양한 장점이 있고, 세부 내용들도 개발중에 있다.
그럼 이제 CSS1 내용에 대해 알아보도록 하자^^!
CSS규칙은 다음의 두 부분으로 구성된다.
선택자(selector) : 엘리먼트의 타입이름을 나타낸다. (엘리먼트는 html상의 태그와 일치한다.)
선언(declaration) : 엘리먼트에 적용할 속성들에 대한 선언.
그리고 선언 부분은 다음의 두개로 나뉜다.
속석(property), 속성 값(value)
이 4가지로 모든 선언을 할 수 있다.
단 여기서 선언부분에 선언하는 내용은 Html상의 설정과 내용이 완전이 같은 것이 아니라, 작성시 CSS의 설정, 속성 및 값을 확인 후에 작성하여야 한다.
기본적으로 알아야할 규칙에 대해 알아보자.
일단 CSS파일 정의하는 부분을 알아보자.
정의하는 부분에는 3가지 방법이 있다.
첫째, <head></head> TAG안에 스타일 시트 선언하기.
이방법은 <head>내에서 이 문서 내에서 사용할 스타일을 설정하는 것이다. 자바스크립트처럼 주석표시를 해줘야 한다.
이 경우 해당 문서에만 적용이 된다.
<html><head><title>Test</title>
<style type="text/css">
<!--
h1 {color:red;font-size:30pt;}
//-->
</style>
</head>
<body>
<h1>Hello Everyone!! Good Morning</h1><br>
<h2>Yes Sir</h2>
</body>
</html>
둘째, HTML TAG내에 스타일 시트 선언하기
이는 사용되는 TAG에 직접 Style을 적어주는 것으로 특정부분에 사용할 스타일에만 적용한다. 직접 여러번 작성해야함으로 생산성이 떨어진다.
<html> <head><title>Test</title></head> <body> <h1 style="color:red;font-size:30pt;">Hello Everyone!! Good Morning</h1><br> <h2>Yes Sir</h2> </body> </html>
세번째, 외부파일을 이용한 스타일 선언하기
<html> <head><title>Test</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h3>Hello Everyone!! Good Morning</h3><br> <div class=asdf>Yes Sir</div> </body> </html>
가장 많이 쓰이는 부분은 세번째 외부파일을 이용하여 사용하는 것이고, 이 방법이 가장 관리가 효율적이고, 제어하기 쉽다.
앞으로는 이 세번째 방법을 주로 이용할 것이다.
참고로 xml에서 작성한 css를 including 하기 위해서는 다음과 같이하면 된다.
<?xml-stylesheet type="text/css" href="경로 및 파일명"?>
을 상단 부분에 xml 명시할때 넣어주면 된다.!
※ 몇 가지 언급하자면 xml의 경우 DTD에 의하여 엘리멘트(TAG)를 직접 정의하여 사용하기 때문에 CSS에서도
DTD에서 정의한 태그를 가져다 OUTPUT을 정의하면 된다.
그러나 html의 경우 몇 가지의 태그가 미리 정의되어 있고, 본인이 스스로 태그를 만들 수가 없다.(이를 개선한것이 SGML 및 XML임)
그렇기 때문에 CSS에서 새롭게 태그를 만들어 놓으면 전혀 적용되지 않는다.
자신이 직접 새롭게 만들고 싶을 경우, class와 id를 이용한 선언을 하면 가능해진다.
그부분은 다음번에 언급하도록 하겠다.
'무언가 만들기 위한 지식 > Design' 카테고리의 다른 글
| [UCC] Nefer Member Introduce (0) | 2010.04.19 |
|---|---|
| [UCC] Nefer Concert 홍보영상 (0) | 2010.04.19 |
| Vista Button Design (0) | 2010.04.09 |
| CSS1(Cascading Style Sheets)-속성관련 (0) | 2010.02.24 |
| CSS1(Cascading Style Sheets)-구문 규칙 (0) | 2010.02.24 |
