티스토리 뷰

HTML 문서에 CSS를 적용하는 방법에는 3가지가 있다.

종류 설명
 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>

예제 소스
<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 방식

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에 적용하는 법에 대하여 알아보자
댓글
댓글쓰기 폼
«   2020/10   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Total
1,085,248
Today
20
Yesterday
38