1. CSS란?
(1) CSS의 특징과 기본 형식
● CSS의 특징
스타일 시트(Style sheet)란 글자의 크기 및 종류, 배경 색상, 테두리 모양 등을 보다 다양하게 장식할 수 있는 방법입니다. 1997년에 제정된 HTML 4.0부터 사용할 수 있는데, 스타일 시트의 종류는 CSS(Cascading Stype Sheet)와 JSSS(JavaScript Stype Sheet)가 있습니다. JSSS는 넷스케이프에서만 지원하지만, CSS는 넷스케이프와 인터넷 익스플로러에서 전부 사용할 수 있습니다. 요즘에는 인터넷 익스플로러 사용자가 절대 다수이기 때문에 스타일 시트라고 말하면 CSS를 의미하는 경향이 있습니다. 여기서는 CSS에 대해서만 설명합니다.
CSS의 기능은 다음과 같습니다.
?글자의 크기를 다양하게 조절할 수 있습니다. ?글자와 줄 간격을 다양하게 설정할 수 있습니다. ?특정 글자의 배경색을 별도로 설정할 수 있습니다. ?웹 페이지의 내용과 모양을 분리해서 처리할 수 있습니다. ?배경색과 배경 이미지를 다양하게 설정할 수 있습니다. ?문서의 모양을 별도 파일로 관리할 수 있습니다. ?테두리 선을 다양하게 설정할 수 있습니다. |
앞 장에서 설명한 HTML만 사용하면 단순한 형태의 모양만 지정할 수 있지만, 스타일 시트의 다양한 속성과 값을 사용해서 여러 가지 형태의 문서를 꾸밀 수 있습니다. 스타일 시트를 사용하면 다음과 같은 장점이 있습니다.
∙기능을 쉽게 확장할 수 있습니다.
HTML의 기본 기능에 다양한 옵션을 부여할 수 있기 때문에 문서 형식을 풍부하게 만들 수 있습니다. 다양한 여백 지정, 줄 간격의 조정, 글자 모양의 다양화, 테두리 지정 등과 같은 HTML 태그만으로 처리할 수 없는 기능을 스타일 시트를 사용해서 구현할 수 있습니다.
∙문서 내용과 형식을 분리할 수 있습니다.
HTML 태그와 문서 모양을 지정하는 스타일 시트를 별도의 영역에 코딩할 수 있기 때문에 출력되는 내용과 문서 형식을 쉽게 분리할 수 있습니다. 문서 내용과 형식의 분리는 내용이 변경되더라도 모양을 그대로 유지할 수 있고, 문서 모양을 보다 쉽게 변경할 수 있습니다.
∙일관성 있는 문서를 작성할 수 있습니다.
문서 모양을 지정하는 스타일 시트를 HTML과 별도의 파일로 작성하고, 이를 다른 HTML 파일에서 불러 사용할 수 있습니다. 또한 스타일 시트를 한 곳에 집중시켜 적용함으로써 편리하게 관리할 수 있습니다. 이렇게 하면 여러 개의 웹 페이지를 구성할 때 일관된 문서 모양을 사용할 수 있게 됩니다.
∙간편하게 문서 모양을 지정할 수 있습니다.
HTML 태그만을 사용해서 글자 모양을 지정한다면 모든 태그마다 속성값을 설정해야 하지만, 스타일 시트를 사용하면 특정한 태그에 대한 속성을 일관되게 설정할 수 있습니다. 통일된 속성을 적용해서 간편한 문서 작성이 가능해집니다.
[두드리기] 캐스캐이딩(Cascading)이란? 스타일 시트를 사용할 때 문서 스타일 정보를 다른 여러 자원으로부터 받아서 사용할 수 있습니다. 즉, 다른 스타일 정보를 받아서 어떤 문서에 맞는 스타일로 사용할 수 있습니다. 여러 개의 스타일을 받아올 경우, 스타일 시트들의 일련의 순서를 정의할 필요가 있는데, 나중에 지정한 스타일 시트가 먼저 지정한 것보다 우선적으로 적용되는 규칙을 갖습니다. 이러한 우선권 규칙을 캐스캐이딩이라고 합니다. CSS는 이러한 기능을 지원합니다. |
● CSS의 기본 형식
CSS로 스타일 시트를 구성하기 위해서는 먼저 스타일을 정의해야 합니다. CSS 코드는 일반 HTML 태그와 구별하기 위해 별도의 영역을 사용합니다. CSS의 기본 형식은 다음과 같습니다.
<STYLE type=“text/css"> <!-- 스타일 지정 --> </STYLE> |
CSS의 스타일은 <STYLE>과 </STYLE> 태그 사이에 정의합니다. <STYLE> 태그의 type 속성은 사용한 스타일 시트의 규격을 지정합니다. 만약 CSS를 사용한다면 “text/css”로 설정해야 합니다. 스타일 지정은 선택자와 선언 부분으로 구성됩니다.
[두드리기] 스타일을 지정할 때 주석문(<!-- ~ -->)으로 처리한 이유는 스타일 시트를 이해하지 못하는 브라우저에서 스타일 시트를 무시하도록 하는 배려 때문입니다. |
[두드리기] 스타일 시트의 타입 선언 <STYLE> 태그의 type 속성값은 CSS와 JSSS가 서로 다릅니다. ?CSS : “text/css” ?JSSS : “text/JavaScript” |
∙선택자(Selector)
HTML 문서의 스타일을 정의할 대상으로 태그 또는 클래스 이름을 사용합니다. 두 개 이상의 선택자를 한꺼번에 지정할 수 있고, 태그를 선택자로 사용하면 HTML 문서에서 사용된 해당 태그에 모두 동일한 스타일이 적용됩니다.
∙선언(Declaration)
스타일의 내용을 지정하는 부분으로. 선택자에 지정한 스타일을 의미합니다. 선언 부분은 속성(Property)과 속성값(Value)으로 이루어집니다. 선언 부분은 중괄호({ })로 표시해야 하고, 중괄호 안에 사용하는 속성과 속성값은 콜론(:)으로 구분합니다. 만약 여러 개의 속성을 사용한다면 세미콜론(;)으로 구분해야 합니다.
예) P {font-size: 9pt; color:purple}
P는 선택자로 <P> 태그를 뜻합니다. HTML 문서에 사용된 모든 <P> 태그에 대해 글자 크기는 9pt, 색깔은 purplr로 설정합니다.
스타일 시트를 사용하는 다양한 방법이 있지만, <HEAD> 태그에서 스타일 시트를 정의하는 것이 가장 간단한 방법입니다.
[첫걸음] <P> 태그에 스타일을 적용한 간단한 예제입니다.
<HTML> <HEAD> <TITLE>간단한 CSS</TITLE>
<STYLE type="text/css"> <!-- P {font-size:15pt; color:purple} --> </STYLE>
</HEAD> <BODY> <P align="center"> <P> 태그에 스타일을 적용합니다.<BR> <P> 태그를 사용하면 글자 크기가 15pt, <BR> 글자 색상은 purplr로 지정됩니다.</P> </BODY> </HTML> |
(2) 스타일 시트 선언 방법
HTML 문서에서 스타일 시트를 사용하기 위해서는 미리 스타일이 정의되어 있어야 합니다. HTML 문서에서 직접 스타일 시트를 정의하는 방법과 스타일 시트가 정의된 외부 파일을 불러와서 처리하는 방법이 있습니다. 스타일 시트를 HTML 문서 안에서 정의하는 것은 <HEAD>와 </HEAD> 태그 사이에 선언하는 방법과 태그에 직접 스타일 시트를 사용하는 선언하는 방법이 있습니다. 그리고 외부 파일을 불러오는 것도 <LINK> 태그를 사용하는 방법과 @import 명령을 사용하는 방법이 있습니다. 결국 스타일 시트를 선언하는 방법은 4가지가 있습니다.
∙<HEAD>와 </HEAD> 태그 사이에 선언하는 내부 스타일 시트 방법
∙외부 파일로 정의된 스타일 시트를 불러오는 방법 - <LINK> 태그 사용
∙외부 파일로 정의된 스타일 시트를 불러오는 방법 - @import 사용
∙HTML 태그에 스타일 시트를 직접 사용하는 인라인 스타일 방법
만약 여러 가지 스타일 시트 선언 방법을 사용한다면 중복되는 스타일에 대해 우선순위가 있어야 합니다. 기본적으로 가장 나중에 불러들인 우선순위가 적용됩니다.
● 내부 스타일 시트(Embedded Style Sheet) 방법
가장 사용하는 선언 방법입니다. HTML 문서의 <HEAD>와 </HEAD> 태그 사이에 <STYLE> 태그를 사용해 스타일 시트를 선언합니다. 이라는 태그를 선언하여 지정하는 방법이다. <STYLE> 태그에서 지정한 스타일은 웹 페이지 전체에 적용됩니다.
<HEAD> <STYLE type="text/css"> <!-- 선택자1 {속성:속성값} 선택자2 {속성:속성값} 선택자3 {속성:속성값} --> </STYLE> </HEAD> |
[첫걸음] 내부 스타일 시트를 사용하는 예제입니다.
<HTML> <HEAD> <TITLE>내부 스타일 시트의 사용</TITLE>
<STYLE type="text/css"> <!-- H1 {font-family:휴먼옛체; color:red} H2 {font-style:italic; background-color:blue; color:white} --> </STYLE>
</HEAD> <BODY> <H1>내부 스타일 시트를 선언하는 방법입니다.</H1> <H2>지정된 태그에 동일한 스타일이 적용됩니다.</H2> </BODY> </HTML> |
● 외부 스타일 시트(Linked Style Sheet) 방법 - <LINK> 태그 사용
외부 스타일 시트 방법은 스타일 시트 문서를 별도의 파일로 저장하고, HTML 문서에서 이 파일을 불러와서 스타일을 적용합니다. 외부 파일을 불러오는 방법은 @import 명령과 <LINK> 태그를 사용하는 방법이 있습니다. 이처럼 스타일 시트 문서를 별도의 파일로 작성하면 서로 다른 여러 개의 HTML 문서에 같은 형식의 스타일 시트를 적용하거나, 여러 개의 스타일 시트를 한 개의 HTML 문서에 적용할 수 있는 장점이 있습니다.
<LINK> 태그로 스타일 시트 문서 파일을 불러오려면 다음과 같은 형식으로 사용합니다.
<HEAD> <LINK rel = “stylesheet” type=“text/css” href = “파일 이름”> </HEAD> |
∙rel 속성 : relation의 약자로 링크가 설정된 문서와 현재 문서와의 관계를 지정해주는 속성입니다.
∙type 속성 : 스타일 시트로 사용한 규격을 지정합니다.
∙href 속성 : 스타일 시트 문서 파일 이름을 지정합니다.
<LINK> 태그에서 외부 스타일 시트 문서 파일을 불러오기 위해 rel, type 속성은 언제나 동일한 값을 지정하면 되고, href 속성만 사용할 파일 이름을 지정하면 됩니다. 일반적으로 스타일 시트 문서 파일은 확장자로 css를 사용합니다.
[첫걸음] <LINL> 태그로 외부 스타일 시트 문서 파일을 불러오는 예제입니다.
H1 {font-family:휴먼옛체; color:red} H2 {font-style:italic; background-color:blue; color:white} |
<HTML> <HEAD> <TITLE>내부 스타일 시트의 사용</TITLE>
<LINK rel="stylesheet" type="text/css" href="sheet1.css">
</HEAD> <BODY> <H1><LINK> 태그로 외부 스타일 시트를 불러오는 방법입니다.</H1> <H2>지정된 태그에 스타일이 적용됩니다.</H2> </BODY> </HTML> |
● 외부 스타일 시트(Linked Style Sheet) 방법 - @import 명령 사용
<LINK> 태그는 <HEAD>와 </HEAD> 태그 사이에 사용하면 되지만, @import 명령어는 <STYLE>과 </STYLE> 태그 사이에 사용해야 합니다. 만약 <STYLE> 태그에서 다른 선언과 함께 사용한다면 가장 앞에서 사용해야 합니다. @import 명령의 사용 형식은 다음과 같습니다.
<STYLE type="text/css"> <!-- @import url("파일 이름”); --> </STYLE> |
[첫걸음] @import 명령으로 외부 스타일 시트 문서 파일을 불러오는 예제입니다.
<HTML> <HEAD> <TITLE>외부 스타일 시트의 사용</TITLE>
<STYLE type="text/css"> <!-- @import url("sheet1.css"); --> </STYLE>
</HEAD> <BODY> <H1>@import 명령으로 외부 스타일 시트를 불러오는 방법입니다.</H1> <H2>지정된 태그에 스타일이 적용됩니다.</H2> </BODY> </HTML> |
● 태그에 직접 스타일 시트를 적용(Inline Style Sheet)하는 방법
인라인 스타일 시트는 내부 스타일 시트나 외부 스타일 시트 선언 방법과는 달리 HTML 태그에 style이라는 속성을 지정하여 해당 태그만 적용되는 범위에서만 스타일을 적용하는 방법입니다. <HEAD>이나 <TITLE> 태그와 같이 헤더 부분이 아닌 본문에 출력되는 모든 태그에서 사용할 수 있습니다. 인라인 스타일 시트를 사용하면 style 속성이 사용된 태그에서만 적용되기 때문에 부분적인 스타일 지정에 사용하면 편리합니다. 다만 인라인 스타일을 많이 사용하면 HTML 문서가 커지기 때문에 특별한 경우 이외에는 사용하지 않는 것이 좋습니다.
<태그 style=“속성:속성값”> |
[첫걸음] 내부 스타일 시트를 사용하는 예제입니다.
<HTML> <HEAD> <TITLE>인라인 스타일 시트의 사용</TITLE> </HEAD> <BODY> <H1 style="font-family:휴먼옛체; color:red"> 인라인 스타일 시트를 사용하는 방법입니다.</H1> <H2 style="font-style:italic; background-color:blue; color:white"> style 속성이 사용된 태그에만 스타일이 적용됩니다.</H2> </BODY> </HTML> |