웹마당넷 |[CSS 강좌]스타일시트를 사용하는 4가지 방법

CSS3

제 목

[CSS 강좌]스타일시트를 사용하는 4가지 방법

작성자

웹돌이

등록일

2007-12-11 12:57:26

조회수

4,812

스타일시트의 적용방법은 크게 Inline방식과 Embedding 두가지 방식으로 나누어져 있습니다.
이번 강좌에서는 위의 두가지 방식과 클래스를 이용한 방식 그리고 파일을 이용한 방식 4가지의 활용방법에 대하여 알아보도록 하겠습니다.

참고로 클래스를 이용하는 방법과 파일을 이용하는 방법은 Inline방식과 Embedding방식을 효율적으로 이용하는 활용방법일 뿐입니다.

① Inline 방식

Inline방식은 Embedding방식과는 달리 한정된 태그내에서만 적용이 가능합니다. 즉 닫는 태그를 사용하면 바로 스타일시트의 적용이 해제됨을 의미합니다.
아래 Embedding방식과 클래스를 이용한 방식을 상대비교해 보세요^^
참고로 저는 여러가지의 방법을 다 사용은 하나 클래스를 이용한 방법 Embedding방식 Inline방식순으로 사용을 하는것 같습니다.

Inline 방식

<html>
<head>
<title>스타일시트 예제</title>
</head>
<body>
<font style=`font-size:30px;font-family:궁서;color:blue`> 인포카페의 스타일시트 강좌입니다.</font>
</body>
</html>

위 예제에서 보듯이 HTML과 같이 직접사용은 하였으나 스타일시트의 기본구조를 사용하고 있죠^^
물론 HTML로도 같은 방법은 표현할 수 있습니다.
그러나 홈페이지 제작을 하다보면 특수한 상황이 발생하게끔 되죠^^ 그러한 경우와 저같이 Inline방식의 스타일시트가 HTML보다 편해서 사용하시는 분도 많이들 계실겁니다. 그럼 아래 Embedding방식을 참조해 보세요^^ 참고로 이페이지 상단의 예제가 Embedding방식입니다.

② Embedding 방식

Inline방식 즉 사용하고자 하는 태그에서 한정되어 사용하는 방법과는 달리 head태그 내에 존재하면서 문서 전체를 통일성있게 정의 한다는것이 Embedding방식의 특징이라고 할 수 있습니다.

Embedding 방식

<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">

</style>
</head>
<body>
<font> 인포카페의 스타일시트 강좌입니다.</font>
</body>
</html>

③ Class 이용한 방법

Class를 이용한 방법은 Embedding방법과 동일하나 차이점은 태그를 대신하여 키워드즉 원하고자하는 단어를 정의하여 광범위하게 스타일시트를 적용할 수 있습니다.

사용방법은 Embedding방식과 같으나 keyword앞에 `.`을 입력해야하며 적용할 태그에 class=`키워드`와 같이 사용하셔야 합니다.
.키워드{스타일속성;속성 값}와 같이 적용 class=`키워드`사용 아셨죠^^*
키워드는 임의적으로 사용하시면 되고 `.`은 꼭꼭꼭 찍으세요^^*

아래 예제는 Embedding방식과 Class방법을 비교해 보았습니다.

Class를 이용한 방법

<html>
<head>
<title>스타일시트 예제</title>
<style type="text/css">

</style>
</head>
<body>
<font> Embedding방식 적용.</font>
<br>
<font class=`keyword_test`> Class방법 적용.</font>
</body>
</html>

④ 파일저장을 이용한 방법 - [External Style Sheet]

이번에는 파일을 이용한 방법입니다.^^ 어렵지는 않아요. 지금까지 그러했듯이^^
단지! 스타일시트의 내용을 다른파일로 저장해서 `.css`파일로 저장한다는것과 아래와 같이 파일을 불러오는 태그를 head태그 사이에 입력하는 과정일 뿐입니다.

<link href=`경로명/파일명` rel=`stylesheet` type=`text/css`>

감이 잡히시죠^^
참고로 저를 비롯하여 많은 개발자들이 많이 사용하는 방법입니다.^^

파일저장을 이용한 방법

font {font-size:30px;font-family:궁서;color:blue}
.keyword_test {font-size:100px;font-family:굴림;color:red}
위 스타일이 적용될 문서를 `Sheet_04_01.css`와 같이 확장자를 .css로 저장합니다. 물론 파일명은 임의적으로 적용하셔도 되구요^^

<html>
<head>
<title>스타일시트 예제</title>
<link href=`Sheet_04_01.css` rel=`stylesheet` type=`text/css`>
</head>
<body>
<font> Embedding방식 적용.</font>
<br>
<font class=`keyword_test`> Class방법 적용.</font>
</body>
</html>

출 처 :