Thursday, September 07, 2006

컴퓨터용어] HTML의 CSS 란? CSS 파일이란? - Cascading Style Sheets

CSS (Cascading Style Sheets) 는, HTML 파일을 작성할 때, 글자의 크기나 색깔, 여백 등의 각종 스타일을 지정할 때 사용하는 것입니다.

span 이라는 태그에, CSS의 font-size 속성으로 글꼴의 크기를 정하고, color 속성으로 색깔을 정의한 예제입니다.

결과:
테스트

위와 같이 태그 속에 직접 정의하는 것보다, 다음과 같이 문서의 첫부분에 한꺼번에 정의하는 것이 더 합리적입니다. 다음의 예제에서, 파란 글자로 된 부분이 CSS가 정의된 곳입니다.

<html>
<head>
<style type="text/css">
body { background-color:white; }
.test { font-style:italic; color:red; }
</style>
</head>

<body>

<span class="test">body 태그 안에는, 웹문서의 본문이 위치합니다.</span>

</body>
</html>

body { background-color:white; } <- 이것은 문서 전체의 배경색을 하얗게 하는 CSS 속성입니다.

.test { font-style:italic; color:red; } <- 이것은, class="test" 라고 정의된 태그의 스타일만 선택적으로 변경하는 클래스입니다.

CSS 파일이란?

만약 자신의 사이트에 .html / .htm 문서가 수백 개 있고, 그 모든 파일에서 body { background-color:white; } 이런 스타일이 항상 사용된다면, 스타일만을 별도의 파일로 분리하는 것이 좋을 것입니다. 그러면 웹문서의 분량도 작아지고, 또한 "스타일 파일"만을 고치면, 수백 개의 html 파일의 스타일을 한꺼번에 고칠 수 있는 이점이 있습니다.

위의 예제에서 스타일 정의 부분만을
common.css

body { background-color:white; }
.test { font-style:italic; color:red; }

이런 파일로 저장한 것이, "CSS 파일"입니다.

그런 후, 각 HTML 파일에서, 다음과 같이 common.css 파일을 불러서 사용하면 되겠지요.

<html>
<head>
<link rel="stylesheet" type="text/css" href="common.css" />
</head>
...이하 생략...

이제 common.css 라는 작은 파일 하나만 수정하면, 수백 수천만 개의 HTML 파일의 스타일이 자동으로 한꺼번에 변경됩니다.

tag: html

HTML | CSS | 자바스크립트 JavaScript