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

 
Previous Post 배치파일] Yes / No 선택 묻기, 도스의 CHOICE 명령 대용, 사용자 입력 받기 ...텍스트파일(아스키파일) / 이진파일(바이너리파일) 의 차이점 - Text File, Bin...컴퓨터용어] 반각 문자 / 전각 문자;(半角/全角)의 의미, 차이점- Half-Width ...파이어폭스 팁] 한번 클릭으로, 여러 사이트 한꺼번에 열기 - Mozilla Firefox...[펄/Perl] 이진파일 열기/저장하기 - 바이너리 파일/Binary File Open S...[이뮬/당나귀] 다운로드받은 파일이 저장되는 장소 변경 - eMule eDonkey2000...울트라에디트] 숨은 기호, 줄바꿈문자(개행문자) 보기 - 울트라에디터, UltraEdit ...울트라에디트] 핫키 지정하기 / Hotkey 사용자 정의, UltraEdit Key Map...구굴어스/굴굴어스/그글어스/구글어쓰 다운로드 - Gooogle Earth문제해결] 윈도우 업데이트가 되지 않고 에러가 납니다 - Windows Update Err...

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

Thursday, September 07, 2006

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 파일의 스타일이 자동으로 한꺼번에 변경됩니다.



☞ HTML/CSS/JavaScript

0 Comments:

Post a Comment

<< Home RSS 2.0 feed

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