|
초기의 브라우저에서는 동일한 텍스트 문서라도 브라우저에서 제공하는 폰트 종류와 폰트 크기에 따라서 서로 다른 모양으로 출력되었다. 그러나 인터넷 익스플로러 3.0버전부터는 스티일 시트를 이용하여 사용자 환경에 영향을 받지 않고 HTML 문서를 동일한 형식으로 브라우저에출력할 수 있다. 넷스케이프에서도 커뮤니케이트 4.0버전부터 스타일 시트를 지원한다.
스타일 시트란 HTML 문서에서 사용되는 각 태그별로 일정한 속성과 값을 미리 정의하여 공통적으로 사용하기 위한 방법이다. 즉, HTML 문서에서 태그를 일일이 수작업으로 바꾸지 않고 스타일 시트 파일만 편집하면 모든 문서를 자동적으로 수정할 수 있다. 또한 하나의 문서에 여러개의 스타일 시트를 동시에 적용할 수 있다. 즉, 하나의 태그에 서로 다른 스타일을 정의할 수 있다. 이것을 Cascade라고 하고 CSS는 Cascading Style Sheet를 말하는 것이다. 익스플로러에서는 4.0버전부터 CSS를 완벽하게 지원하고 있으나넷스케이프 4.0버전에서는 아직 불완전하다.
■ 스타일 선언
- 스타일 선언은 태그이름, 속성(Property) 그리고 값(Value)을 정의하며 다음과 같은 형식으로 사용한다.
TAG 이름 { Property:Value}
- HTML 문서에 스타일 시트를 적용하는 방법은 3가지가 있으며, 이 방법간에 우선 순위가 존재한다. 즉Inline 스타일 시트, Embedding 스타일 시트, Link 스타일 시트의 순서로 HTML 문서에 적용된다
- Embedding 스타일 시트
- 이 방법은 <HEAD> 태그안에서 스타일을 선언하는 방법이다.
<BODY> 태그사이에서도 선언할 수 있다. 그러나 HTML 문서가 브라우저에 출력될 때 <HEAD> 태그를 먼저 로딩한 후 <BODY> 태그 사이에 내용을 로딩하기 때문에 <HEAD> 태그 안에서 선언하는 것이 바람직하다.
스타일 시트를 지원하지 않는 브라우저를 위해서 <STYLE> 태그 내부의 내용을 주석으로 처리하는 것이 좋다. 스타일 시트를 지원하는 브라우저에서는 스타일 시트에서 정의한 기능이 그대로 적용된다.
Embedding 스타일 시트는 이전에 작성한 모든 HTML 문서에 대해 스타일을 새롭게 정의해야하는 단점이 있다.
<HEAD>
<SYTLE TYPE="text/css">
<!--
TAG1{Property:Value}
TAG2{Property:Value}
:
// -->
</STYLE>
</HEAD>
|
[결과를 보시려면 여기를 누르세요.]
<HTML>
<HEAD>
<STYLE TYPE="text/css">
<!--
BODY { font-size:10pt}
H1 {color:blue}
A {text-decoration:none;color:red;font-weight:bold}
//-->
</STYLE>
</HEAD>
<BODY>
<H1>Embedding 스타일 시트 예 </H1>
본문의 내용의 글자 크기는 10pt입니다.
<P>
문서를 연결하는 <a href="test.html">이 부분</a>의 밑줄은 보이지
않고 빨간색으로 진하게 보일 것입니다.
</HEAD>
</HTML>
|
- Link 스타일 시트
- 스타일 시트를 별도의 파일로 작성한 후, 이 파일을 여러 HTML 문서에서 불러와서 사용할 수 있다. 파일로 저장할 때 확장자는 .css로 한다. 이 스타일 시트는 다음 형식처럼 <HEAD> 태그안에서 <LINK> 태그를 이용하여 불러온다.
<HEAD>
<LINK REL="STYLESHEET">
TYPE="TEXT/CSS"
HREF="파일이름.css">
</HEAD>
|
[결과를 보시려면 여기를 누르세요.]
<HTML>
<HEAD>
<LINK REL="STYLESHEET" TYPE="text/css" HREF="sample.css">
</HEAD>
<BODY>
<H1>Link 스타일 시트 예 (굴림체, 글자크기는 10pt, 밑줄)</H1>
<P>
윗줄이 그어져 있고 파란색이며 20pt이다.
</BODY>
</HTML>
|
|
위 예에서 사용한 sample.css 파일의 내용은 다음과 같다.
H1 { font-family:굴림;
font-size:10pt;
text-decoration:underline;
}
P { color:blue;
text-decoration:overline;
font-size:20pt;
}
|
- Inline 스타일 시트
- 스타일 시트를 특정 태그 내에서 선언하는 방법이다. 그러나 수정할 경우에는 일일이 태그마다 수작업을 해야 하므로 지나치게 많이 사용하는 것은 좋지 않다. 자주 사용하는 경우에는 Link 스타일 시트나 Embedding 스타일 시트를 사용하는 것이 바람직 하다.
- <TAG STYLE="Property:Value">
|
[결과를 보시려면 여기를 누르세요.]
<HTML>
<HEAD>
<TITLE>Inline 스타일 시트 예</TITLE>
</HEAD>
<BODY>
<H1 STYLE="font-family:굴림">Inline 스타일 시트 예</H1>
<A href="index.html" STYLE="background-color:yellow">이 부분</a>의 배경이
노란색으로 나타난다.
</BODY>
</HTML>
|