스타일시트 삽입하기

스타일시트를 삽입하는 방법 중 자주 사용되는 것은 다음 3가지이다.

1. 문서의 HEAD에 정의하기

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
h3 {font-style : italic; color : green}
-->
</STYLE>
</HEAD>
<BODY>
<H3>이 글은 원래 H3의 특성과 함께 녹색, 이탤릭체로 나타난다.</H3>
<H3>이 부분도 마찬가지이다.</H3>
</BODY>
</HTML>

HEAD에 정의할 때는 STYLE element를 사용한다. type 속성은 반드시 함께 써 주어야 한다. 주석 표시는 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위해서 의례적으로 넣는다. (실재로는 스타일이 제대로 적용되지 않아 이상한 모양으로 나타난다.)

스타일을 정의하는 부분은 { } 안에 넣는다. 속성과 값은 콜론(:)으로 구분하고, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분한다.

HTML에서와 마찬가지로 대소문자나 빈 칸은 구분하지 않는다.

2. style 속성 이용하기

<HTML>
<HEAD>
</HEAD>
<BODY>
<H3 style="font-style : italic; color : green">여기는 H3이면서 녹색이고 이탤릭체이다.</H3>
<P>
<H3>여기는 스타일 적용이 되지 않는다.</H3>
</BODY>
</HTML>

특정한 element에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 1번과 같다.

3. 외부 스타일시트 연결하기

먼저 다음과 같은 내용의 파일을 만들고 style.css로 저장한다.

h3 {font-style : italic; color : green}

HEAD 부분에 LINK element를 사용해 style.css 파일을 연결한다.

<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css">
</HEAD>
<BODY>
<H3>여기는 녹색이고 이탤릭체인 H3이다.</H3>
<P>
<H3>여기도 그렇다.</H3>
</BODY>
</HTML>

rel은 연결하는 문서가 스타일시트 문서임을 말해준다. type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 준다. 아무리 많은 문서를 만들어도 스타일은 style.css 파일에서 모두 정의해 주고, 문서들에는 LINK element만 넣어주면 된다. 수정을 할 때는 style.css 파일만을 고치면 된다.

◀ ■ ▶