HTML 문서에 CSS를 적용하는 방법에는 3가지가 있다.
embedding 방식
embedding 방식은 <head></head> Tag 사이에 CSS 설정을 삽입하는 방식이다. CSS를 적용하기 위해서는 <head></head> Tag 사이에 <style></style> Tag를 정의하고 CSS을 설정하면 된다. 이때 주의할 점은 <style> Tag의 TYPE 속성에 "text/css"를 기술해야 한다.
예제 소스
link 방식
외부에 존재하는 CSS 파일을 문서내에 Include하여 사용하는 방식이다. 여러 문서에서 동일한 CSS을 사용할 수 있으며 매번 같은 CSS를 정의할 필요가 없어 가장 많이 사용되고 있는 방식이다.
CSS를 정의한 파일의 확장자를 "css"로 지정하여 저장하고 외부에 존재하는 CSS 파일을 HTML에서 LINK Tag를 이용하여 호출한다.
CSS 파일 예
inline 방식
inline 방식은 CSS를 적용하고자 하는 HTML Tag에 직접 기술하는 방식이다. HTML 문서에 Tag와 CSS를 동시에 적용 가능하기 때문에 필요할 때 마다 즉시 사용 가능하지만 HTML Tag가 길어져 보이에 좋지않다.
예제 소스
실행결과
다음 시간에는 class 속성과 ID 속성을 사용해서 HTML Tag에 적용하는 법에 대하여 알아보자
| 종류 | 설명 |
| embedding | <head></head> Tag 사이에 스타일 설정을 삽입하는 방식 |
| link | CSS를 외부 파일에 설정하고 HTML 파일에 Include 하는 방식 |
| inline | HTML 문서 내 Tga에 직접 스타일을 설정하는 방식 |
embedding 방식
embedding 방식은 <head></head> Tag 사이에 CSS 설정을 삽입하는 방식이다. CSS를 적용하기 위해서는 <head></head> Tag 사이에 <style></style> Tag를 정의하고 CSS을 설정하면 된다. 이때 주의할 점은 <style> Tag의 TYPE 속성에 "text/css"를 기술해야 한다.
<style type="text/css">
<!--
select 1 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 2 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 3 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 4 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
-->
</style>
<!--
select 1 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 2 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 3 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
select 4 { 속성 1 : 값 ;속성 2 : 값; 속성 3 : 값}
-->
</style>
예제 소스
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
<!--
p, td {
font-size : 15pt;
font-family : 굴림;
color : red;
}
-->
</style>
</head>
<body>
<p>P Tag에 적용됩니다</p>
여기는 적용되는 Tag가 없습니다<br>
<table width="300" border="1">
<tr>
<td>테이블에 적용됩니다.</td>
</tr>
</table>
</body>
</html>
실행결과link 방식
외부에 존재하는 CSS 파일을 문서내에 Include하여 사용하는 방식이다. 여러 문서에서 동일한 CSS을 사용할 수 있으며 매번 같은 CSS를 정의할 필요가 없어 가장 많이 사용되고 있는 방식이다.
CSS를 정의한 파일의 확장자를 "css"로 지정하여 저장하고 외부에 존재하는 CSS 파일을 HTML에서 LINK Tag를 이용하여 호출한다.
<link href="경로명/파일명.css" rel="stylesheet" type="text/css">
CSS 파일 예
body {
font-family: Dotum,verdana,sans-seif;
margin:0px;
padding:0px;
color:#555;
font-size:9pt;
line-height:1.4em;
}
inline 방식은 CSS를 적용하고자 하는 HTML Tag에 직접 기술하는 방식이다. HTML 문서에 Tag와 CSS를 동시에 적용 가능하기 때문에 필요할 때 마다 즉시 사용 가능하지만 HTML Tag가 길어져 보이에 좋지않다.
예제 소스
<html> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <body> <p style="font-size:15pt;font-family:굴림;color:red;">P Tag에 적용됩니다</p> 여기는 적용되는 Tag가 없습니다<br> <table width="300" border="1"> <tr> <td style="font-size:15pt;font-family:굴림;color:red;">테이블에 적용됩니다.</td> </table> </body> </html
다음 시간에는 class 속성과 ID 속성을 사용해서 HTML Tag에 적용하는 법에 대하여 알아보자
'Tip & Tech > CSS & HTML' 카테고리의 다른 글
| Firefox를 이용하여 웹사이트를 3D로 보고 분석하기 (0) | 2012.03.23 |
|---|---|
| 구글 캘린더를 블로그나 웹페이지에 끼워 넣기 (0) | 2011.06.24 |
| 홈페이지를 위한 CSS - 기본편 (0) | 2011.04.09 |
| wysiwyg web editor Ckeditor 설치 및 설정 (13) | 2011.04.05 |
| 마우스오버 버튼 만들기 (0) | 2010.06.24 |
댓글