간단하게 말하면, HTML 만으로 홈페이지를 만드는 것보다, 더 많은 페이지의 디자인을 업그레이드 하고자 할때 사용합니다.
문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하고 만들 수도 있고, 문자 색상, 등등 좀 더 자유롭게 만들 수가 있습니다.
그리고 스타일시트를 사용하는 큰 장점은 스타일시트 설정을 스타일시트 파일로 저장하여, 여러개의 HTML 파일에 적용시킬 수도 있습니다.
문자의 크기를 자신이 생각하는 크기로 정하거나, 줄 간격을 적당하게 조절하여 읽기 편하고 만들 수도 있고, 문자 색상, 등등 좀 더 자유롭게 만들 수가 있습니다.
그리고 스타일시트를 사용하는 큰 장점은 스타일시트 설정을 스타일시트 파일로 저장하여, 여러개의 HTML 파일에 적용시킬 수도 있습니다.
■ 스타일시트는 크게 세 가지로 구분이 되어 집니다.
독립적인 스타일 문서 - External 스타일시트
하나의 웹 문서에만 영향을 주는 - Internal 스타일시트
웹 문서안의 특정 영역에만 영향을 주는 - Inline 스타일시트
하나의 웹 문서에만 영향을 주는 - Internal 스타일시트
웹 문서안의 특정 영역에만 영향을 주는 - Inline 스타일시트
■ 스타일을 지정하는 일반적인 방법은 아래의 문법을 따릅니다.
태그 {속성:값; 속성:값; 속성:값;.......}
스타일시트 안에서는 태그에 <와>를 사용하지 않고 태그 이름만 씁니다.또 스타일 정의에서 사용하는 속성과 HTML 태그에서 사용하는 속성은 차이가 있습니다.
속성과 값 사이에는 콜론(:)을, 하나의 선언 내용과 다른 선언 내용 사이에는 세미콜론(;)을 구분자로 사용합니다.
HTML 과 CSS 의 차이점 맛보기
그럼 예제를 통해서, HTML 과 CSS 의 어떤 차이가 있는지 알아보겠습니다.
<HTML>
<HEAD>
<TITLE>희야의웹하우스</TITLE>
</HEAD>
<BODY>
<H1> 희야의웹하우스에 어서오세요 </H1>
<H2> 오늘의 주요 강좌 </H2>
<P>지금부터 CSS 강좌에 들어가려고 합니다.<BR>
블로그나, 사이트 꾸미기 등 없어서는 안될정도로 중요하게 자리잡고있는<BR>
CSS스타일시트에 대해서 지금부터 알아보도록 하겠습니다</P>
<H2> 오늘날짜 어쩌고 저쩌고 </H2>
</BODY>
</HTML>
위 내용은 순전히 HTML 태그를 이용하여 적었습니다. 결과물은?<HEAD>
<TITLE>희야의웹하우스</TITLE>
</HEAD>
<BODY>
<H1> 희야의웹하우스에 어서오세요 </H1>
<H2> 오늘의 주요 강좌 </H2>
<P>지금부터 CSS 강좌에 들어가려고 합니다.<BR>
블로그나, 사이트 꾸미기 등 없어서는 안될정도로 중요하게 자리잡고있는<BR>
CSS스타일시트에 대해서 지금부터 알아보도록 하겠습니다</P>
<H2> 오늘날짜 어쩌고 저쩌고 </H2>
</BODY>
</HTML>
이렇게 나오게 됩니다.
그럼 이제 스타일시트를 적용해서 다시 작성해 보겠습니다.
<HTML>
<HEAD>
<TITLE>희야의웹하우스</TITLE>
<style type="text/css">
H2 {COLOR : GREEN;}
</STYLE>
</HEAD>
<BODY>
<H1> 희야의웹하우스에 어서오세요 </H1>
<H2> 오늘의 주요 강좌 </H2>
<P>지금부터 CSS 강좌에 들어가려고 합니다.<BR>
블로그나, 사이트 꾸미기 등 없어서는 안될정도로 중요하게 자리잡고있는<BR>
CSS스타일시트에 대해서 지금부터 알아보도록 하겠습니다</P>
<H2> 오늘날짜 어쩌고 저쩌고 </H2>
</BODY>
</HTML>
결과물<HEAD>
<TITLE>희야의웹하우스</TITLE>
<style type="text/css">
H2 {COLOR : GREEN;}
</STYLE>
</HEAD>
<BODY>
<H1> 희야의웹하우스에 어서오세요 </H1>
<H2> 오늘의 주요 강좌 </H2>
<P>지금부터 CSS 강좌에 들어가려고 합니다.<BR>
블로그나, 사이트 꾸미기 등 없어서는 안될정도로 중요하게 자리잡고있는<BR>
CSS스타일시트에 대해서 지금부터 알아보도록 하겠습니다</P>
<H2> 오늘날짜 어쩌고 저쩌고 </H2>
</BODY>
</HTML>
위 소스를 보시면 <head>와 </head> 사이에 스타일시트 를 넣었습니다.
그리고 H2 {COLOR : GREEN;} = H2 에 해당하는 텍스트의 색상은 모두 녹색으로 바뀌게 됩니다.
일단 이정도로 어떤 차이가 있는지 맛을 보았구요~
다음에는 좀 더 자세하게 알아보도록 할께요 ^^
'■ 블로그꾸미기 > HTML/css' 카테고리의 다른 글
| [ HTML ] 테이블에 색상을 넣어보자/ 테두리도 꾸미기 (0) | 2010.09.26 |
|---|---|
| IFRAME 아이프레임 (0) | 2010.09.25 |
| [ HTML ] 배경음악을 넣어보자 bgsound/ embed (0) | 2010.09.24 |
| [ HTML ] 테이블 테두리/색상/cellspacing/cellpadding (0) | 2010.09.24 |
| [ HTML ] TABLE 에 대해 알아보자 (0) | 2010.09.24 |
| [ HTML] body 태그 (0) | 2009.08.14 |
