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>

3 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}

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 참고[ | ]

  1. 네이버의 경우, 2012-04-21 확인
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}