- 다른 뜻에 대해서는 jQuery .css() 문서를 참조하십시오.
1 개요[ | ]
- cascading style sheet; CSS
- 종속형 시트, 캐스케이딩 스타일 시트,
최순실
- 웹페이지의 형식을 정의하는 언어 (표준)
- 웹페이지의 시각적 요소를 제어함
- 선택자와 선언문(속성 + 값)으로 구성됨
- HTML 태그, 또는 거기에 지정된 ID 및 클래스이름을 통해 계층적으로 형식을 정의할 수 있음
- 셀렉터 대상의 속성 값을 설정
- 형식
css
Copy
셀렉터 { 속성: 값; }
css
Copy
셀렉터:의사클래스셀렉터 { 속성: 값; }
- 예시
css
Copy
p {
color: green;
}
css
Copy
a:hover {
text-decoration: none;
}
css
Copy
p:first-child {
color: red;
}
2 HTML에 포함[ | ]
html
Copy
<!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>
3 CSS 파일로 분리[ | ]
![](https://z-images.s3.amazonaws.com/thumb/e/ec/Crystal_Clear_app_xmag.svg/24px-Crystal_Clear_app_xmag.svg.png 1.5x, https://z-images.s3.amazonaws.com/thumb/e/ec/Crystal_Clear_app_xmag.svg/32px-Crystal_Clear_app_xmag.svg.png 2x)
style
태그 안쪽 내용을 css 파일로 분리하고, 대신 link
태그로 그 css가 연결되도록 설정해준다.
- HTML
html
Copy
<!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
css
Copy
p {font-size:50px; color:#ace; font-weight:bold}
4 버전 표시[ | ]
웹상의 css 파일을 수정해도 인터넷 캐시에 남아있어 새 css가 적용되지 않는 경우가 종종 있다. 자신의 컴퓨터에서는 정상이더라도 다른 사람에게 그런 현상이 나타날 수 있다. 이것을 방지하기 위해 버전 정보를 붙이는 것이 좋다.
- 형식
html
Copy
<link rel="stylesheet" type="text/css" href="/css/파일명?버전" />
- 적용 예시
이전 문단의 소스에 적용하면 아래와 같다.
html
Copy
<link rel="stylesheet" type="text/css" href="/css/ex002.css?1234" />
- 다른 예시 (포털)
포털사이트의 경우에는 아래와 같이 파일명 자체에 날짜를 붙여 관리하기도 한다.[1]
html
Copy
<link rel="stylesheet" type="text/css" href="/css/main_20120418.css"/>
5 같이 보기[ | ]
6 참고[ | ]
- ↑ 네이버의 경우, 2012-04-21 확인
편집자 Jmnote Jmnote bot Ykhwong
로그인하시면 댓글을 쓸 수 있습니다.