CSS 문서 원본 보기

{{다른뜻|jQuery .css()}}
==개요==
;cascading style sheet; CSS
;종속형 시트, 캐스케이딩 스타일 시트, <del>[[최순실]]</del>
*웹페이지의 형식을 정의하는 언어 (표준)
*웹페이지의 시각적 요소를 제어함
*[[선택자]]와 선언문(속성 + 값)으로 구성됨
*HTML 태그, 또는 거기에 지정된 ID 및 클래스이름을 통해 계층적으로 형식을 정의할 수 있음
*[[셀렉터]] 대상의 속성 값을 설정

https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Gnome-mime-text-css.svg/200px-Gnome-mime-text-css.svg.png

;형식
<syntaxhighlight lang='css'>
셀렉터 { 속성: 값; }
</syntaxhighlight>
<syntaxhighlight lang='css'>
셀렉터:의사클래스셀렉터 { 속성: 값; }
</syntaxhighlight>

;예시
<syntaxhighlight lang='css'>
p {
    color: green;
}
</syntaxhighlight>
<syntaxhighlight lang='css'>
a:hover {
    text-decoration: none;
}
</syntaxhighlight>
<syntaxhighlight lang='css'>
p:first-child {
    color: red;
}
</syntaxhighlight>

==HTML에 포함==
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>CSS 예제 1</title>
<style>
p {font-size:50px; color:#ace; font-weight:bold}
</style>
</head>
<body>
<p>내용</p>
</body>
</syntaxhighlight>
* 예제: http://zetawiki.com/ex/css/ex001.php

==CSS 파일로 분리==
{{참고|CSS 파일 인클루드}}
<code>style</code> 태그 안쪽 내용을 css 파일로 분리하고, 대신 <code>link</code> 태그로 그 css가 연결되도록 설정해준다.
* HTML
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<meta charset="utf-8" />
<head>
<title>CSS 예제 2</title>
<link rel="stylesheet" type="text/css" href="/css/ex002.css" />
</head>
<body>
<p>내용</p>
</body>
</syntaxhighlight>

* CSS
<syntaxhighlight lang='css'>
p {font-size:50px; color:#ace; font-weight:bold}
</syntaxhighlight>

*예제: http://zetawiki.com/ex/css/ex002.php

==버전 표시==
웹상의 css 파일을 수정해도 인터넷 캐시에 남아있어 새 css가 적용되지 않는 경우가 종종 있다. 자신의 컴퓨터에서는 정상이더라도 다른 사람에게 그런 현상이 나타날 수 있다. 이것을 방지하기 위해 버전 정보를 붙이는 것이 좋다.
;형식
<syntaxhighlight lang='html5'>
<link rel="stylesheet" type="text/css" href="/css/파일명?버전" />
</syntaxhighlight>

;적용 예시
이전 문단의 소스에 적용하면 아래와 같다.
<syntaxhighlight lang='html5'>
<link rel="stylesheet" type="text/css" href="/css/ex002.css?1234" />
</syntaxhighlight>

;다른 예시 (포털)
포털사이트의 경우에는 아래와 같이 파일명 자체에 날짜를 붙여 관리하기도 한다.<ref>네이버의 경우, 2012-04-21 확인</ref>
<syntaxhighlight lang='html5'>
<link rel="stylesheet" type="text/css" href="/css/main_20120418.css"/>
</syntaxhighlight>

==같이 보기==
*[[HTML에 CSS를 적용하는 3가지 방식]]
*[[CSS 파일 인클루드]]
*[[CSS 주요 스타일]]
*[[CSS 셀렉터]]
*[[HTML 스타일 초기화]]
*[[W3C]]
*[[LESS]]

==참고==
* http://maintainablecss.com/chapters/introduction/
* {{위키백과|종속형_시트}}

[[분류: CSS]]
[[분류: HTML]]