CSS

다른 뜻에 대해서는 jQuery .css() 문서를 참조하십시오.

1 개요[ | ]

cascading style sheet; CSS
종속형 시트, 캐스케이딩 스타일 시트, ~~최순실~~

웹페이지의 형식을 정의하는 언어 (표준)
웹페이지의 시각적 요소를 제어함
선택자와 선언문(속성 + 값)으로 구성됨
HTML 태그, 또는 거기에 지정된 ID 및 클래스이름을 통해 계층적으로 형식을 정의할 수 있음
셀렉터 대상의 속성 값을 설정

형식

셀렉터 { 속성: 값; }

셀렉터:의사클래스셀렉터 { 속성: 값; }

예시

p {
    color: green;
}

a:hover {
    text-decoration: none;
}

p:first-child {
    color: red;
}

2 HTML에 포함[ | ]

<!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>

예제: http://zetawiki.com/ex/css/ex001.php

3 CSS 파일로 분리[ | ]

CSS 파일 인클루드 문서를 참고하십시오.

style 태그 안쪽 내용을 css 파일로 분리하고, 대신 link 태그로 그 css가 연결되도록 설정해준다.

HTML

<!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>

CSS

p {font-size:50px; color:#ace; font-weight:bold}

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

4 버전 표시[ | ]

웹상의 css 파일을 수정해도 인터넷 캐시에 남아있어 새 css가 적용되지 않는 경우가 종종 있다. 자신의 컴퓨터에서는 정상이더라도 다른 사람에게 그런 현상이 나타날 수 있다. 이것을 방지하기 위해 버전 정보를 붙이는 것이 좋다.

형식

<link rel="stylesheet" type="text/css" href="/css/파일명?버전" />

적용 예시

이전 문단의 소스에 적용하면 아래와 같다.

<link rel="stylesheet" type="text/css" href="/css/ex002.css?1234" />

다른 예시 (포털)

포털사이트의 경우에는 아래와 같이 파일명 자체에 날짜를 붙여 관리하기도 한다.^[1]

<link rel="stylesheet" type="text/css" href="/css/main_20120418.css"/>

5 같이 보기[ | ]

6 참고[ | ]

↑ 네이버의 경우, 2012-04-21 확인

[1] 네이버의 경우, 2012-04-21 확인

[1]