mwultong Blog ... 프로그래밍 / 계산기

컴퓨터 엑셀 워드 포토샵 구글어스 WINDOWS JAVASCRIPT JAVA C++

 
Thursday, September 07, 2006

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


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


<span style="font-size:24pt; color:red">테스트</span>

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

0 Comments:

<< Home RSS 2.0 feed

구글 Google 에서 제공하는 무료 블로그 서비스인 블로거 Blogger 의 인터넷 주소는 www.blogger.com 입니다. Blogger 에 블로그를 만들면, blogspot.com 이라는 주소에 블로그가 생성됩니다.
블로그를 직접 방문하지 않고도 최신 게시물을 구독하려면 RSS 2.0 feed 주소를 리더기에 등록하시면 됩니다.
Previous Posts
Monthly Archives
Top