위키
포럼
도구
바뀐글
랜덤

"CSS"의 두 판 사이의 차이

잔글 (봇: 자동으로 텍스트 교체 (-<source +<syntaxhighlight , -</source> +</syntaxhighlight>))
 
12번째 줄: 12번째 줄:


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


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


==HTML에 포함==
==HTML에 포함==
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
49번째 줄: 49번째 줄:
<p>내용</p>
<p>내용</p>
</body>
</body>
</source>
</syntaxhighlight>
* 예제: http://zetawiki.com/ex/css/ex001.php
* 예제: http://zetawiki.com/ex/css/ex001.php


56번째 줄: 56번째 줄:
<code>style</code> 태그 안쪽 내용을 css 파일로 분리하고, 대신 <code>link</code> 태그로 그 css가 연결되도록 설정해준다.
<code>style</code> 태그 안쪽 내용을 css 파일로 분리하고, 대신 <code>link</code> 태그로 그 css가 연결되도록 설정해준다.
* HTML
* HTML
<source lang='html5'>
<syntaxhighlight lang='html5'>
<!DOCTYPE html>
<!DOCTYPE html>
<meta charset="utf-8" />
<meta charset="utf-8" />
66번째 줄: 66번째 줄:
<p>내용</p>
<p>내용</p>
</body>
</body>
</source>
</syntaxhighlight>


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


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


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


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


==같이 보기==
==같이 보기==

2021년 7월 17일 (토) 17:30 기준 최신판

  다른 뜻에 대해서는 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 파일로 분리[ | ]

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 확인
원본 주소 "https://zetawiki.com/w/index.php?title=CSS&oldid=756100"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}